URL loses its markup in javascript framework (BotUI) - javascript

I'm trying to use the BotUI javascript framework (https://github.com/botui/botui) for my website.
I've got a problem with using URLs, and I think it has to do with the order of the messages. That is, it seems that the URL markup gets removed from a message when another message is shown afterwards.
In other words, if a message contains an URL, and it is the last message shown, then there is no problem (see example 1). But if this message is shown prior to other messages, it loses its URL markup (see example 2).
Example 1 (message maintains its URL)
botui.message.bot( {
content: 'Hi there!'
}).then(function () {
return botui.message.bot( {
content: 'Google [google](http://google.com)'
});
});
Example 2 (message loses its URL markup)
botui.message.bot( {
content: 'Google [google](http://google.com)'
}).then(function () {
return botui.message.bot( {
content: 'Hi there'
});
});

I also had the issue as well. It seems that latest version of Vue.js is causing problem. Switching to the version v2.0.5 solved the issue for me.
https://cdnjs.com/libraries/vue/2.0.5

Related

Issue with adobe_dc_view_sdk pdf file preview

I am testing the adobe document cloud view sdk on https://www.thacherandrye.com/dinner , https://www.thacherandrye.com/the-shed , https://www.thacherandrye.com/brunch
Sometimes, the file preview is not working and all I can get on the screen is a large white space(No errors in the console). Whenever I load the page for the first time, in a browser or incognito window, the file appears on the preview but after reloading or moving to another page with a preview, the file seems to disappear.
I checked for the key being wrong/expired but then it should not have loaded the file even for the first time.
Below is the Javascript code I am using for the api:
$(document).ready(function() {
document.addEventListener("adobe_dc_view_sdk.ready", function(){
var adobeDCView = new AdobeDC.View({ clientId: SOME_KEY, divId: $('#adobeDcViewId{Id}').val() });
adobeDCView.previewFile({
content: { location: { url: $('#hdnUrl{Id}').val() } },
metaData: { fileName: $('#hdnFileName{Id}').val() }
},
{
showDownloadPDF: $('#hdnRestrictDownload{Id}').val() !== 'true',
showPrintPDF: $('#hdnRestrictDownload{Id}').val() !== 'true'
});
});
});
Tech stack: .net framework 4.7.2, jQuery 3.6.0
I tried to help you on our forums, but I don't know if you saw my response. This line worries me:
$('#adobeDcViewId{Id}').val()
The value that needs to be passed to divId needs to be a string, and needs to match the ID of the div element. Also, #adobeDcViewId{Id} doesn't look like a valid CSS selector to me.
Can you try changing this to a hard-coded value of the div on your site?

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.

Retrieve html content of a page several seconds after it's loaded

I'm coding a script in nodejs to automatically retrieve data from an online directory.
Knowing that I had never done this, I chose javascript because it is a language I use every day.
I therefore from the few tips I could find on google use request with cheerios to easily access components of dom of the page.
I found and retrieved all the necessary information, the only missing step is to recover the link to the next page except that the one is generated 4 seconds after loading of page and link contains a hash so that this step Is unavoidable.
What I would like to do is to recover dom of page 4-5 seconds after its loading to be able to recover the link
I looked on the internet, and much advice to use PhantomJS for this manipulation, but I can not get it to work after many attempts with node.
This is my code :
#!/usr/bin/env node
require('babel-register');
import request from 'request'
import cheerio from 'cheerio'
import phantom from 'node-phantom'
phantom.create(function(err,ph) {
return ph.createPage(function(err,page) {
return page.open(url, function(err,status) {
console.log("opened site? ", status);
page.includeJs('http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js', function(err) {
//jQuery Loaded.
//Wait for a bit for AJAX content to load on the page. Here, we are waiting 5 seconds.
setTimeout(function() {
return page.evaluate(function() {
var tt = cheerio.load($this.html())
console.log(tt)
}, function(err,result) {
console.log(result);
ph.exit();
});
}, 5000);
});
});
});
});
but i get this error :
return ph.createPage(function (page) {
^
TypeError: ph.createPage is not a function
Is what I am about to do is the best way to do what I want to do? If not what is the simplest way? If so, where does my error come from?
If You dont have to use phantomjs You can use nightmare to do it.
It is pretty neat library to solve problems like yours, it uses electron as web browser and You can run it with or without showing window (You can also open developer tools like in Google Chrome)
It has only one flaw if You want to run it on server without graphical interface that You must install at least framebuffer.
Nightmare has method like wait(cssSelector) that will wait until some element appears on website.
Your code would be something like:
const Nightmare = require('nightmare');
const nightmare = Nightmare({
show: true, // will show browser window
openDevTools: true // will open dev tools in browser window
});
const url = 'http://hakier.pl';
const selector = '#someElementSelectorWitchWillAppearAfterSomeDelay';
nightmare
.goto(url)
.wait(selector)
.evaluate(selector => {
return {
nextPage: document.querySelector(selector).getAttribute('href')
};
}, selector)
.then(extracted => {
console.log(extracted.nextPage); //Your extracted data from evaluate
});
//this variable will be injected into evaluate callback
//it is required to inject required variables like this,
// because You have different - browser scope inside this
// callback and You will not has access to node.js variables not injected
Happy hacking!

Categories