We Keep Coding

JavaScript function being blocked by office addin

I have an outlook add-in that I have created. In this add-in I am trying to make a button pull some data from a website using APIs.
I was able to do this on with a local test but when I put the code into my add-in nothing happens. It gives an error in the console that says Tracking Prevention blocked access to storage for https://appsforoffice.microsoft.com/lib/1/hosted/en-us/outlook_strings.js. but when I commented out my javascript code, that error still came up. So I don't know why my code is being blocked.
Picture of problem:
On my local computer it works no problem:
Here is my code:
javascript:
function freshdesktickets() {
Office.onReady((info) => {
// window.parent.location.reload()
const url = "https://alloysystems.freshdesk.com/api/v2/tickets";
fetch(url, {
method: "GET",
withCredentials: true,
headers: {
// needed to base64 encode my key with ":x" at the end of the api key then I used that for the authorization header.
"authorization": "Basic YOUWILLNEVERGETMYAPIKEYLOL"
}
})
.then(resp => resp.json())
.then(data => {let text = "";
const output = document.querySelector('span.ms-font-m');
for (let i = 0; i < data.length; i++) {
let text = "Subject: " + JSON.stringify(data[i].subject) + "<br>"+
"CC Emails: " + JSON.stringify(data[i].cc_emails).replace("[]","No Emails are CC'd").replace("[","").replace("]","") + "<br>" +
"Ticket Creation Date: " + JSON.stringify(data[i].created_at) + "<br>" +
"Ticket Status: " + JSON.stringify(data[i].status).replace("2", "Open").replace("3", "Pending").replace("4", "Resolved").replace("5", "Closed").replace("6", "Waiting On Customer") ;
let pre = document.createElement('pre');
pre.innerHTML = text;
pre.style.cssText += 'font-size:24px;font-weight:bold;'
output.appendChild(pre);
console.log(pre)
}
})})
}
HTML:
<div class="ms-PanelExample">
<script src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/js/fabric.min.js"></script>
<button style="margin:1px;" id="get-freshdesk" class="ms-Button ms-Button--primary">
<span class="ms-Button-label">Freshdesk Tickets</span>
</button>
<div class="ms-Panel ms-Panel--xxl">
<button class="ms-Panel-closeButton ms-PanelAction-close">
<i class="ms-Panel-closeIcon ms-Icon ms-Icon--Cancel"></i>
</button>
<div class="ms-Panel-contentInner">
<p class="ms-Panel-headerText">Freshdesk Integration</p>
<div class="ms-Panel-content">
<span class="ms-font-m">Latest Ticket information</span>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var PanelExamples = document.getElementsByClassName("ms-PanelExample");
for (var i = 0; i < PanelExamples.length; i++) {
(function() {
var PanelExampleButton = PanelExamples[i].querySelector(".ms-Button");
var PanelExamplePanel = PanelExamples[i].querySelector(".ms-Panel");
PanelExampleButton.addEventListener("click", function(i) {
new fabric['Panel'](PanelExamplePanel);
});
}());
}
</script>
Result from console:
Tracking Prevention blocked access to storage for https://appsforoffice.microsoft.com/lib/1/hosted/en-us/outlook_strings.js.
### yet it displays the pre information in the console below because I added console.log(pre)
I also tried adding the domains of where the api gets its data but I am still getting the error. I added it to the edge's exclusion list and I also added it to the manifest xml.
code that was added to the manifest xml to ensure that the api's domain is allow to get some data:
<!-- Domains that will be allowed when navigating. For example, if you use ShowTaskpane and then have an href link, navigation will only be allowed if the domain is on this list. -->
<AppDomains>
<AppDomain>https://freshdesk.com</AppDomain>
<AppDomain>https://alloysystems.freshdesk.com</AppDomain>
<AppDomain>AppDomain3</AppDomain>
</AppDomains>
<!--End Basic Settings. -->

I think I figured out the answer. The problem is that I added the javascript to my existing office apps javascript which has Office.onReady((info) => at the top of the script. If I add my javascript to the existing office apps javascript it will fail.
So I made a new javascript file and added that to the html. In the new file I used the javascript code above, then I simply added the script to the head tag and it started working.

Javascript redirect using windows.locaton.href OR windows.locaton.replace is not working. Error: window not defined

I have looked at all of the questions around windows.locaton.href and windows.locaton.replace not working, but still can't figure out why this redirect is not working in JavaScript. There are two JS functions I am calling when a button is clicked with submit.
<input type="submit"
onclick="NotifyUserOfNewBudgets('#Field1');redirect2MainLookup('#primaryFilename');"
class="SaveChangeButton" value="Create New Budget">
The two functions are defined in Javascript as:
<script>
function NotifyUserOfNewBudgets(val) {
alert("New Budget will be saved. NewVal=" + val);
var ireturn;
document.getElementById("NewBudgetID").value = val;
document.getElementById("formMode").value = "Update";
}
function redirect2MainLookup(primaryFilename) {
var loc = window.location.pathname;
var host = document.location.host;
var dir = loc.substring(0, loc.lastIndexOf('/'));
//Replace the word Edit with blank so this redirects correctly
var newdir = dir.replace("NewBudget", "");
var newpath = host + newdir + primaryFilename;
alert('newpath location = http://' + newpath);
try {
windows.locaton.href = "http://" + newpath;
//window.location.replace('http://' + newpath);
} catch (err) { alert("Error: " + err);}
}
</script>
The error I get in the try()catch() is windows is not defined and then is stays on the same page. I get the same error using windows.locaton.replace() too. I have lots of pages doing redirects, can't figure out why this one fails.

You have a number of spelling mistakes. window is the object you are looking to reference. location is the property you are looking to access. Right now, you are using windows.locaton. windows is not a thing, nor is locaton. Keep an eye on undefined errors, they can tell you a lot about the state of your code.

Validation of java script for random photo script

On W3C Validation this gives error img not acceptable here? any ideas:
<script type="text/javascript" language="JavaScript">
NumberOfImagesToRotate = 9;
FirstPart = '<img src="header';
LastPart = '.jpg" height="161" width="697" alt="header photo"/>';
function printImage() {
var r = Math.ceil(Math.random() * NumberOfImagesToRotate);
document.write(FirstPart + r + LastPart);
}
</script>

The error it's giving you is "No DOCTYPE found" because it's running it as HTML syntax. This, is obviously not a huge deal since you're running JavaScript Also, " The language attribute on the script element is obsolete. You can safely omit it." is another error so remove language="JavaScript" because it is obsolete now.

JavaScript talking to Flash via ExternalInterface

I have been trying to put together a proof of concept of JavaScript talking to Flash. I am using JQuery and Flash CS5, ActionScript 3.
I am not a Flash developer so apologies for the code, if I can prove this works the Flash will be given to someone who knows what they are doing.
The Actionscript is on a layer in the timeline in the first frame, with a couple of elements in the root movie:
output = new TextField();
output.y = -200;
output.x = -200;
output.width = 450;
output.height = 325;
output.multiline = true;
output.wordWrap = true;
output.border = true;
output.text = "Initializing...\n";
root.bgClip.addChild(output);
try{
Security.allowDomain("*");
flash.external.ExternalInterface.marshallExceptions = true;
output.appendText("External Interface Available? " + ExternalInterface.available + "\n");
output.appendText("External Interface ObjectId: " + ExternalInterface.objectID + "\n");
flash.external.ExternalInterface.addCallback("getMenuItems", returnMenuItems);
flash.external.ExternalInterface.addCallback("changeText", changeText);
flash.external.ExternalInterface.addCallback("changeBgColour", changeBgColour);
flash.external.ExternalInterface.call("populateMenu", returnMenuItems());
} catch (error:SecurityError) {
output.appendText("Security Error: " + error.message + "\n");
} catch (error:Error) {
output.appendText("Error: " + error.message + "\n");
}
function returnMenuItems():String{
return "[{\"menu option\": \"javascript:callFlash('changeBgColour','4CB9E4')\"}]";
}
function changeText(t:String){
root.textClip.text = t;
}
function changeBgColour(colour:String) {
var c:ColorTransform = root.bgClip.transform.colorTransform;
c.color = uint(colour);
root.bgClip.transform.colorTransform = c;
}
The JavaScript and HTML are:
function populateMenu(message){
$("#options").changeType("Options", $.parseJSON(message));
$("#options").addMenuActions();
}
function callFlash(methodToCall, param){
alert("method: " + methodToCall + ", param: " + param);
if(param == undefined){
$("#AJC")[methodToCall]();
}else{
$("#AJC")[methodToCall](param);
}
}
var flashvars = {};
var params = {allowScriptAccess: "always"};
var attributes = {name: "AJC"};
swfobject.embedSWF("http://192.168.184.128/ActionscriptJavascriptCommunication.swf", "AJC", "600", "400", "9", "", flashvars, params, attributes);
and
<body>
<div id="wrapper">
<div id="topBar" class="top-bar"></div>
<div id="flashContainer">
<div id="AJC">Loading Flash...</div>
</div>
<ul class="dropdown" id="games"></ul>
<ul class="dropdown" id="options"></ul>
</div>
</body>
Now I know the ActionScript is awful, the reason it looks like it does is because I have read a lot of threads about possible issues to do with contacting Flash from JavaScript (hence the allow security domain * and adding a debug text box etc).
The JavaScript I am using is within a script tag in the head. The changeType and addMenuActions are just JQuery methods I have added. These are just JavaScript methods that have been tested independently but do work.
You'll notice that the last line of my try catch in the ActionScript is:
flash.external.ExternalInterface.call("populateMenu", returnMenuItems());
This does work, it populate my menu with the text sent from Flash. The only thing that doesn't work is trying to call the methods exposed using the addCallback function.
I get the alert which says:
method: changeBgColour, param: 4CB9E4
but an error saying:
Error: $("#AJC")[methodToCall] is not a function
Source File: http://192.168.184.128/test.html#
Line: 88
I set up a local VM to run Apache, which relates to the 192.168.184.128, I wondering if this was the issue, I have seen a couple of threads mention that trying to communicate with flash locally won't work, which is why I set up the VM with apache?
Any ideas? I know people have got this working, it is very frustrating.
Thanks.

Simple mistake: jQuery's factory method produces jQuery.init object, which acts very similar to an array. You need to call the method on the actual DOM element, which is the first member in the "array".
$('#AJC')[0][methodToCall]
If you had security issues, you wouldn't be able to communicate between Flash and JavaScript at all.

The problem is in the way you are accessing your flash object. SwfObject has a built-in function that take care of that, it works great across all browsers:
function callFlash(methodToCall, param)
{
var obj = swfobject.getObjectById("AJC");
if(param == undefined){
$(obj)[methodToCall]();
}else{
$(obj)[methodToCall](param);
}
}
I havent tested the code above, but I guess it should work!

Try catch error in Javascript pass the error statment into Google Analytics

I have a Toogle function that uses to show/hide a div bloack to end users. However, some users said the IE generate an error when they clicks on this link. I am wondering whether I can use try catch statement in JavaScript to catach the error the users got and send to Googel Analytics.
If Yes, How I can do that. I have google analytcis set up in our site.
For instance, I have a div section call dynamic phone number.
<div id = "cs_DynamicForm">
"Phone number..."
<div>
When users click on Phone us link, i am able to track it in google.
<a onclick="javascript: pageTracker._trackPageview('/Contact/UK/phone');" id="phoneNumberToggle" class="more-info-link" href=" javascript:void(0);">Phone us</a>
In the back end, my toggle function works, like that
_dynamicPhoneNumber: function(type, arg)
{
var phoneNumber = document.getElementById("cs_DynamicForm");
var vis =phoneNumber.style;
//alert(vis);
if(vis.display==''&&phoneNumber.offsetWidth!=undefined&&phoneNumber.offsetHeight!=undefined)
vis.display = (phoneNumber.offsetWidth!=0&&phoneNumber.offsetHeight!=0)?'block':'none';
vis.display = (vis.display==''||vis.display=='block')?'none':'block';
}
If i have to rewrite this function, i think it will look likes that:
try{
var phoneNumber = document.getElementById("cs_DynamicForm");
var vis =phoneNumber.style;
//alert(vis);
if(vis.display==''&&phoneNumber.offsetWidth!=undefined&&phoneNumber.offsetHeight!=undefined)
vis.display = (phoneNumber.offsetWidth!=0&&phoneNumber.offsetHeight!=0)?'block':'none';
vis.display = (vis.display==''||vis.display=='block')?'none':'block';
}
catch (e)
{
var errorMsg=e.message;
if (typeof (e.number) != "undefined") {
document.write ("<br />");
document.write ("The error code: <b>" + e.number + "</b>");
}
if (typeof (e.lineNumber) != "undefined") {
document.write ("<br />");
document.write ("The error occurred at line: <b>" + e.lineNumber + "</b>");
}
//And send the errorMsg to google analytics. how I should do that
}
Any helps,
Cheers,
Qing

first catch the error simply like:
try {
tes.ting = 123;
}
catch(e) {
errors.push(e);
}
then push it to Google
_gaq.push(['_trackEvent', 'Testing', 'Error', errors.toString()]);

You can use the trackEvent as has been pointed here - but I believe the easiest way is to use trackPage, as you did for the other pages.
I use something like this:
try {
...
} catch (e)
{
pageTracker._trackPageview('/errors/'+e.toString());
}
You can replace 'errors/' with whatever makes sense to you ('virtual-errors-list/' for example).
In addition, consider adding the error tracking to window.onerror handler:
window.onerror = function(errorMsg, url, lineNumber){
pageTracker._trackPageview('/errors/'+errorMsg);
}