Inserting Editable content control in Word online add-in - javascript

In my Word Add-In, I want my user to be able to insert a template, with editable content controls. Works fine in Word client, but in Word online, I can't get it to work properly.
You'll find my code below. I get a debug error saying The action isn't supported in Word Online. Error location : ContentControl.placeholderText.
Indeed when I comment out the line setting placeholderText, I get no error. But then my add-in only adds lines of empty text, which is not my purpose obviously.
Word.run(function (context) {
var thisDocument = context.document,
range = thisDocument.getSelection();
case "ProtagonistsIntroduction":
var paragraph = range.insertParagraph("Customer", Word.InsertLocation.before);
paragraph.styleBuiltIn = "Heading1";
setTemplateContentControlProperties(range, "Mr/Ms. and name", true);
//I insert here many other content controls
break;
})
.catch(function (error) {
console.log('Error: ' + JSON.stringify(error));
if (error instanceof OfficeExtension.Error) {
console.log('Debug info: ' + JSON.stringify(error.debugInfo));
}
});
function setTemplateContentControlProperties(container, placeholderText, lineBreakAfter) {
var contentControl = container.insertContentControl();
contentControl.appearance = "BoundingBox";
contentControl.removeWhenEdited = true;
contentControl.placeholderText = placeholderText;
if (lineBreakAfter) {
contentControl.insertBreak("Line", Word.InsertLocation.after);
}
return contentControl;
}
As this tool is here to provide the user with a document template with all the information that he should include, I need these placeholders.
Is there a way around this ?
I would be OK with a way of just adding lines of text instead of content controls when in Word Online ; but adding the content controls when I'm in a compatible environment (Word client) ; if there isn't anything better than that.
Cheers !

The inability to set placeholderText in Word Online is a known limitation of the Word API, as described in this GitHub issue: https://github.com/OfficeDev/office-js/issues/53. I'd suggest that you subscribe to notifications for that GitHub issue to be notified of any updates there from the product team.

Related

Weird behavior in Node REPL when pasting text (Windows OS) - Crashes

I'm sorry if this has already been posted but I have no idea how to search for what I am experiencing.
This be might Windows OS specific I don't know.
I use VS code as my IDE and when testing node code I open the integrated terminal and run node from there. I then copy and paste a lot of my code to run them line by line and do testing etc. I noticed that it would completely lock up node when pasting sometimes. After a painstakingly long time I finally found it only happens when I copied and pasted large amounts of text. IE I could highlight my whole code, copy and paste and it would lock up node. But then if I tried copying only half and executed it then the second half and executed it, it would work.
I thought this was VS code related until recently I did it directly in the node REPL outside of VS code and it crashed there also.
Has anyone else experienced this? I did a google and found some reported bugs ages ago similar to what I'm experiencing but they were meant to be fixed.
To make this even weirder, sometimes I CAN execute the large amount of text under certain conditions. It seems to work if I copy and paste in small batches first, ie split the code into 3 parts and execute them individually, then if I now go back and highlight it all and copy and paste, it executes it fine. But then I load a new node up, copy and paste all code again and it fails. Not really sure what's going on.
EDIT: Here is the code below. If you open the node REPL and paste of this, it will freeze on the first line (so don't worry about the requires not being able to find the modules). NOTE; the code has been changed to take out the IP so IF does execute it will error as I just replaced some keywords with random text. Ignore this, the point of it is to show that it won't copy and paste past the first line, it will freeze. Any help appreciated!
//{"_id":"56aba3108d6d183da42403c2"}
//placeholder
const request = require('request');
var mongoose = require ("mongoose");
var lodash = require ("lodash");
var myFuncs = require("./functions");
var item_urls;
var options = {
json: true
};
var test = [] ;
function updateDB (){
var url = "get stuff";
request(url, options, (error, res, body) =>{
if (error) {
return console.log(error)
};
if (!error && res.statusCode == 200) {
console.log("executing cb1");
item_urls = body.payload.items;
myFuncs.fixItemIDs (item_urls);
var primes = item_urls.filter(item => item.item_name.includes("Strun Wraith Set"));
for (item in primes)
{
let url = `https://get more stuff/v1/items/${primes[item].url_name}`;
// console.log (url);
request(url, options, (error, res, body) =>{
if (error) {
return console.log(error)
};
if (!error && res.statusCode == 200) {
console.log(`Getting item ${url}`);
test.push(body.payload.item);
myFuncs.fixItemIDs (test);
}
});
};
console.log ("done");
};
});
}
updateDB();
I logged it as a Bug on Github and someone else tested and reproduced the issue. It is now a confirmed bug they are going to look into. It is even present in beta/latest version.
https://github.com/nodejs/node/issues/32999

What is dnndev.me? (React Native Share link on Facebook shows as dnndev.me)

I'm currently working on a simple share function where I can share a news article via the URL (I.E. https://www.nrps.nl/Nieuws/Nieuwsitem.aspx?ID=812). I'm using React Native Share for this (code below). When sharing on Facebook it shows up as dnndev.me instead of nrps.nl, what I expected it to be. Clicking the dnndev.me link redirects to https://www.nrps.nl/Nieuws/Nieuwsitem.aspx?ID=812&fbclid=IwAR3Eq-j1wX8GUVvSEvhFNu85k8U_vjmV0l4_ycF-AUhoV61YBIieRGJgQg4 instead of https://www.nrps.nl/Nieuws/Nieuwsitem.aspx?ID=812, but the content is the same. (if I shouldn't show any of this, please edit it out. I don't know what the extra string means)
From what I can tell, dnndev.me seems to be a development environment.
The questions:
What is dnndev.me, besides some sort of host?
Can I do anything to work around it showing up as dnndev.me or can I only inform NRPS that they haven't done so already?
RN code:
let message = `${news.Title}\n${news.Image}\n${news.MessageUrl}`
news.title is a simple string. news.image is a URL to an image, news.MessageUrl is the URL of the news article itself. I've tested it with only the MessageUrl and it has the same result.
try {
const result = await Share.share({
message: `${message}`,
});
if (result.action === Share.sharedAction) {
if (result.activityType) {
// shared with activity type of result.activityType
} else {
// shared
}
} else if (result.action === Share.dismissedAction) {
// dismissed
console.log("Sharing dismissed")
}
} catch (e) {
console.log(e);
}
EDIT:
What I want to happen is to have the auto generated square / content field (or however it's called) like follows:
https://imgur.com/EalEbmZ
dnndev.me is a web server. As a web server, it notifies facebook of any problems in managing and operating facebook data and also solves any problems.
webSite of dnndev.me
And the fbclid behind the existing parameters is the visitor tracking system ID.
The acronym for fbclid is: "Facebook Click Identifier". It means a
Facebook click identifier.
It's about Facebook clicks.
These are parameters introduced for accurate statistics from this data.
We're also going to exchange data with Google Annalysis and AdSense.
Make more accurate estimates of visitors.
To share Facebook, you can use the following modules to work around it: This solution is contained in the Facebook developer's official document.
$yarn add react-native-fbsdk or npm install --save react-native-fbsdk
$ react-native link react-native-fbsdk
Note For iOS using cocoapods, run:
$ cd ios/ && pod install
Usage
import { ShareDialog } from 'react-native-fbsdk';
let message = `${news.Title}\n${news.Image}\n${news.MessageUrl}`
const shareLinkContent = {
contentType: 'link',
contentUrl: "https://www.nrps.nl/Nieuws/Nieuwsitem.aspx?ID=812",
contentDescription: message,
};
...
this.state = {shareLinkContent: shareLinkContent,};
...
shareLinkWithShareDialog() {
var tmp = this;
ShareDialog.canShow(this.state.shareLinkContent).then(
function(canShow) {
if (canShow) {
return ShareDialog.show(tmp.state.shareLinkContent);
}
}
).then(
function(result) {
if (result.isCancelled) {
alert('Share operation was cancelled');
} else {
alert('Share was successful with postId: '
+ result.postId);
}
},
function(error) {
alert('Share failed with error: ' + error.message);
}
);
}

Microsoft.Office.WebExtension not working when I use the Excel JavaScript API to build an add-in

I'm using the Office JS library to create an Excel add-in, and the Microsoft object is not being recognized. All the other classes from the library seem to to work fine, but when I call dialog.addEventHandler(Microsoft.Office.WebExtension.EventType.DialogMessageReceived,processMessage the Microsoft object is not evaluated properly. This is despite every other object from this library working fine.
I'm following this tutorial https://learn.microsoft.com/en-us/office/dev/add-ins/tutorials/excel-tutorial
I'm using CDN from this link: https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
The method that calls Microsoft.Office.WebExtension fails, and I knew it would because WebStorm tells me its not recognized.
All of the other objects from Office JS work fine though...here's an example of working code:
function sortTable() {
Excel.run(function (context) {
// Queue commands to sort the table by merchant name
var currentWorkbook = context.workbook.worksheets.getActiveWorksheet();
var expensesTable = currentWorkbook.tables.getItem('ExpensesTable');
var sortFields = [
{
key: 1,
ascending: false,
}
];
expensesTable.sort.apply(sortFields);
return context.sync();
}).catch(function (error) {
console.log("Error" + error);
if (error instanceof OfficeExtension.Error) {
console.log("Debug info: " + JSON.stringify(error.debugInfo));
}
});
}
I've review in detail the Office JavaScript API documentation: https://learn.microsoft.com/en-us/office/dev/add-ins/reference/overview/excel-add-ins-reference-overview
I've reviewed that there is an older common API: https://learn.microsoft.com/en-us/javascript/api/office?view=word-js-preview
I have suspected that I need access to this older common API, but the only documentation I've found says that you are just supposed to use the office.js library I've linked above.
Here's the whole function I'm trying to use:
function openDialog() {
//Call the Office Common API that opens a dialog
Office.context.ui.displayDialogAsync(
'https://localhost:3000/popup.html',
{height: 45, width:55},
function (result) {
dialog = result.value;
dialog.addEventHandler(Microsoft.Office.WebExtension.EventType.DialogMessageReceived,processMessage);
}
)
}
It does in fact open a dialog box as the Office.context.ui.displayDialogAsync method works. But as soon as you get to Microsoft.Office.WebExtension.EventType.DialogMessageReceived WebStorm tells me that the element Microsoft is an unresolved reference.
And here's the function it should call if it worked, processMessage. Because it does not get this far, the element does not get updated, and the dialog box does not close. I'm near 100% certain the issue is not with the function below, but I'm not ruling it out yet.
function processMessage(arg) {
console.log("made it inside processMessage")
document.getElementById("user-name").innerHTML = arg.message;
console.log("made ti just before dialog.close")
dialog.close();
}
The full name has been shortened to Office.EventType.DialogMessageReceived. Here's the GitHub issue: https://github.com/OfficeDev/office-js-docs-pr/issues/1710

Insert pictures on Outlook for Mac

I am trying to add pictures in a mail body by adding them to the attachments of the mail item and then adding the sources with the right content id in the html of the mail body.
This is working fine except with Outlook for Mac. In Outlook for Windows and also in the browsers (even safari) the pictures are inserted correctly.
In Outlook for Mac I get blank squares with an error that the file might be moved or removed. When I send the email, the pictures are inserted correctly and the receiver gets a mail with pictures (also looks correct in Sent Items).
This issue only surfaces when composing an email on Outlook for Mac. I am using following code:
Office.context.mailbox.item.addFileAttachmentAsync(uri,
assetName,
{ },
function (asyncResult) {
if (asyncResult.status == "failed") {
console.log("Attach action failed with error: " + asyncResult.error.message);
deferred.reject();
}
else {
console.log("Attach action successfull");
deferred.resolve();
}
});
Have you attempted to do a saveAsync() after adding the file? I know a number of settings are not propagated until an email is sent or saved as a draft. Unfortunately I'm unable to set up a test to confirm what affect this will have but it may be worth a try:
Office.context.mailbox.item.saveAsync(
function callback(result) {
// Process the result
});
If you would like to use inline images as attachments, you will need to specify isInline as true as one of the parameters. This is part of Requirement Set 1.5 which may not be available on your version of Outlook for Mac. Below is a code snippet with an example.
Office.context.mailbox.item.addFileAttachmentAsync
(
"http://i.imgur.com/WJXklif.png",
"cute_bird.png",
{
isInline: true
},
function (asyncResult) {
Office.context.mailbox.item.body.setAsync(
"<p>Here's a cute bird!</p><img src='cid:cute_bird.png'>",
{
"coercionType": "html"
},
function (asyncResult) { }
);
}
);

Cant edit worddocument after opening the addin

Regarding my earlier question “Word addin doesn't work on word online” I have now an addin where I get the header and footer with ooxml, and they are added in the initalizing process Office.initalize = function (reason).
When I open the addin the header and footer is added. When I then try to input anything in the main body its only possible to input on one line. This is only a problem on Word online. Local klient - no problem.
Should also mention that if you open an existing template from OneDrive and then open the addin there is no problems with inputing text in document.
I wonder if there is anyone else that has had this problem or slightly similar, and what solution you came up with? Please look at the earlier question for code: “Word addin doesn't work on word online”
Add 'return' before Word.run
function addHeader() {
return Word.run(function (context) {
var sections = context.document.sections;
context.load(sections, 'body/style');
return context.sync().then(function () {
var header = sections.items[0].getHeader("primary");
var templateHeader = getHeaderFooter('/xml/simrisHeader.xml');
header.insertOoxml(templateHeader, Word.InsertLocation.replace);
return context.sync().then(function () {
console.log("Added a header to the first section.");
});
});
})
.catch(function (error) {
console.log('Error: ' + JSON.stringify(error));
if (error instanceof OfficeExtension.Error) {
console.log('Debug info: ' + JSON.stringify(error.debugInfo));
}
});
}
Use the below style to call addFooter and addHeader:
addFooter().then(function() {
addHeader();
};
You mean that the AddFooter and AddHeader can be successful by calling InsertOoxml API in the initialize method when opening the addin. But the main body of the document can't be edited after opening the addin.
I think there might be something unsupported in the main body just like the cause of the similar question "Word addin doesn't work on word online."
You could provide the doc for me, and then I can verify the root cause.

Categories