We Keep Coding

(JavaScript API 1.3 for Office) Set Value of Custom Properties

My client has decided to migrate to Office 2016 and porting portions of a business process to that client requires us to offer a replacement to the Document Information Panel, which is no longer available. The Backstage file information area isn't considered a sufficient user experience for the users in question, so we're endeavoring to replace the DIP with a Task Pane app.
This example: https://www.youtube.com/watch?v=LVGqpns0oT8&feature=share shows that the idea is, at least in theory, possible. We considered buying this app but can't find sufficient information to do so.
So we set about attempting to replicate the functionality we need in the DIP. It appears that we can successfully set Document Properties of standard types, such as strings, which looks something like this:
Word.context.run(function(context){
var properties = context.document.properties;
context.load(properties):
return context.sync().then(function(){
properties.title = properties.title + " Additional Title Text"; // once the sync goes off, this works.
return context.sync();
});
});
However, when we try to update an Document Property that's, for example, a Managed Metadata property defined by a SharePoint content type, the value in the proxy object loads and remains changed, but it seems to break its relationship to the actual document property. The code below demonstrates:
Word.context.run(function(context){
var properties = context.document.properties;
var customProperties = properties.customProperties;
context.load(properties):
context.load(customProperties);
return context.sync().then(function(){
var managedMetadataProperty = customProperties.getItem('MngdMetadata');
properties.title = properties.title + " Additional Title Text"; // once the sync goes off, this works.
context.load(managedMetadataProperty);
return context.sync().then(function(){
console.log(managedMetadataProperty.value) // let's say this looks like "10;#Label 1|64d2cd3d-57d4-4c23-9603-866d54ee74f1"
managedMetadataProperty.value = "11;#Label 2|cc3d57d4-4c23-72d4-3031-238b9100f52g"
return context.sync(); // now the value in the javascript object for managedMetadataProperty is updated, but the value in the document does not change.
});
});
});
The document property Managed Metadata Property never changes in the Word UI, nor does a change push back to the SharePoint. Say we save and close the document after making the update, then re-open it. The Property value has not visibly changed, however when we load the proxy object with 'context.load()', the value that's available reflects the changes we made on last run.
I'm unclear about why this would be. It seems like to circumvent this, I would need to make a call back to SharePoint to update the relevant field, but I don't know how I would instruct Word to refresh with the new information from SharePoint.

That's a great question.
The custom properties API gives you access to some built-in properties as well as custom properties. SP-related properties do NOT follow in this category from the API perspective. (and the same is true in VBA/VSTO/COM) To access those you need to use the CustomXmlParts functionalities. Here is a good example on how to use it in the Javascript API.
Also, FYI, the team is working right now in a feature to enable the DIP again, i don't have concrete dates or commitment, but you might get this functionality again out of the box soon.

Have you tried customPropertyCollectionObject.add(key, value) ?
It will replace existing kvp's in the customPropertiesCollectionObject.
Here is the documentation customPropertiesCollection

Safe way to store data for button clicks

I am trying to find out what the safest way to store data for use when the user clicks on a button.
I know that you can store data in attributes(either the value attribute or a data- attribute) of the button tag like so:
<button type="button" value="1" data-value="1">Click me!</button>
But the problem with this is that the user(probably really only advanced users) can manipulate the value with firebug or some other app and THEN click the button and send over different data. I fully understand that I need to check the input before I try to do anything with the sent data.
I also found out that I could use jQuery's .data() to attach data to dom elements, which seems a bit more useful. I'm not exactly sure how the data is stored, but I assume its harder to manipulate.
What got me really interested in this question was when I was looking through Soundcloud's code in firebug, I saw that none of the "like" buttons had data attached to the buttons. I tried deleting/manipulating elements/data and the buttons still worked. So it got me thinking that they are probably using a similar process to what jquerys data() is doing.
I just want to know if there is a safer way to store data or a way so that the user can't manipulate the data before clicking the button.

Consider this function:
function setupPrivateData(element) {
var private = 1;
element.setPrivate = function ( d ) { private = d; }
element.getPrivate = function ( ) { return private; }
}
When called with some DOM element it will add two methods to it: .setPrivate(val) and .getPrivate().
These are the only methods that will allow you to access and modify that private variable associated with the element.

The user can always manipulate data. Nothing stops an advanced user to access object properties or call a jquery.data() on their own.
Something you could do in vanilla js would be:
var div = document.getElementById("test");
div.something = "hidden value";
div.addEventListener("click", function() {
alert(this.something);
});
<div id="test">click me</div>
The best way would to be a serverside verification if the sent data is valid or not.
Besides that, you could try to wrap your code in an anonymous function to deny the user access to the object:
(function() {
var data = {};
data.something = "test";
})()
But even that fails as soon as the user manipulates your files and adds for instance a debugger statement.

You can obfuscate your javascript but the only validation has to be done on your server. For example, I tried to get the weather from theweathernetwork. They have hidden their API call using multiple files and callbacks. In my opinion, it's just more challenging (funnier) if you want to reverse-engineer their site.
Javascript can't be secure. Never trust user input

If you are logging button clicks, the safest way to keep track is to save and validate on the server side.
For example, when you click a like button on Soundcloud, it makes an HTTP request to Soundcloud's server, records that you clicked the button, and marks it as a favorite. This way, if the same user clicks the button anytime in the future, it can check before incrementing the number of favorites.
The number displayed in the button is also pulled in from the database when the view is rendered.

This is a huge topic, and you have a lot to learn, far too much for a comment here. Anything "stored" in an attribute in the HTML source is absolutely not secure, it can be changed very very easily.
The most common way of dealing with this would be to use a cookie, but even with some effort these can be manipulated.
If security is important, find some way of identifying your users (possibly by IP, but even that isn't fool proof!) and keep the data on your server, linked to a user ID which can be retrieved after the button is clicked.

Setting a new property to PFObject

I have a Parse.com cloud function that sends back a PFObject. In some cases I need to send back values for keys that don't exist in the PFObject. Is that possible?
This is what I tried:
var test = prodAndTitles["products"][0];
test["XOXO"] = "kisses";
prodAndTitles["products"][0] = test;
console.log("XOXO = " + prodAndTitles["products"][0]["XOXO"]);
This prints out kisses as expected.
But back in the app when I try to get the XOXO key it's not there:
NSLog(#"The product's XOXO %#", [self.product objectForKey:#"XOXO"]);
This prints out null.
I also tried changing the product type from PFObject to id, but it doesn't help.
Is there a solution, without going into the datastore class and creating dummy columns?

Here's a complete answer to the problem I faced:
The issue is that none of the notations above works for the Parse.com backbone javascript objects that come from the datastore. This is the notation that does work:
testObject.set('TestProp', 'TestValue');
But this is still only part of the solution. When trying to send the testObject with the newly set property to the client ios app, it causes an error:
Uncaught Tried to save an object with a pointer to a new, unsaved object.
The solution for this is to save the testObject after setting the property:
testObject.save();
This doesn't really make sense because I would have liked to add properties to the testObject and NOT save them to the datastore -- and it's a waste of a database call -- but it seems like Parse won't allow it. Weird.

This is done with setting the correct ACL. The ACL has to be set for the user to be able to read and write. Then you can add new columns. In Cocoa it looks something like this:
PFACL *acl = [PFACL ACL];
[acl setReadAccess:YES forUser:[PFUser currentUser]];
[acl setWriteAccess:YES forUser:[PFUser currentUser]];
[test setACL:acl];

Can we set cursor as a session variable?

I tried to set a cursor as a session variable looks like it is not working.
Anyone has idea about it ??
My Code:
Meteor.call('apiresult',function(e,result)
{
console.log(result);
Session.set("object",result)
});
//getting variable
var abc=Session.get("object");
return abc.skimlinksProductAPI.numFound;
looks like it's not working

Cursors can actually be stored in Session... sometimes. open the leaderboard app and try this in the browser console:
> Session.set('mycursor', Players.find());
undefined
> Session.get('mycursor')
LocalCollection.Cursor {collection: LocalCollection, selector_f: function, sort_f: null, skip: undefined, limit: undefined…}
> Session.get('mycursor').fetch()
[Object, Object, Object, Object, Object]
Now download the code of the leaderboard example app, use the latest Meteor, and do the same thing in the browser console. You might get:
The moral of the story seems to be, don't store cursors in session variables. Store the Minimongo selector and options (sort, fields etc.) instead as objects.

Interesting thought. It would not be required though, because a cursor is already reactive. You can store the cursor in an ordinary variable.
One thing to point out though is you can't send cursors down using Meteor.call, you can send down javascript objects or specify your own EJSON but you couldn't do this with cursors.
So you can store cursors in global variables if you do the .find() locally, but you cant do it on the server then transfer the cursor using Meteor.call
You can use a publish/subscribe function for this instead.

Global variables in JavaScript with multiple files

I have a file called index.php. With script tags, it references index.js.
I also have a file called payment.php. With script tags, it references payment.js.
I need to set a variable called seatSelected in index.js and then use it in payment.js. However, I do not want to reference index.js in payment.php.
I have tried to make a file called globals.js, reference it in index.php before index.js containing the following:
var selectedSeat;
function setSelectedSeat(seat){
selectedSeat = seat;
}
function getSelectedSeat(){
return selectedSeat;
}
And setting the value in index.js with:
setSelectedSeat("test");
Receiving it in payment.js with (referencing globals.ks in payment.php above payment.js):
alert(getSelectedSeat());
But it alerts 'undefined'. Am I doing something wrong? How can I reference this variable without referencing the file it is changed in?

You cannot access variables created from another page.
You could use localStorage with cookies as fallback.
function setSelectedSeat(seat){
if(localStorage) {
localStorage['selectedSeat'] = JSON.stringify(seat);
}
else {
//add code to store seat in cookie
}
}
function getSelectedSeat(){
if(localStorage) {
return JSON.parse(localStorage['selectedSeat']);
}
else {
//add code to retrive seat in cookie
}
}

You are trying to persist the state of variables while transitioning from one page to another and your application seems to have data that would require session expiry, I suggest you use sessionstorage. With help of polyfills you can give sessionstorage support till IE6 browser.
Benefit of using SessionStorage over LocalStorage
Session Storage persists the data only for a particular tab/window and the data is lost when the tab/window is closed.
As the data gets expired automatically you don't need to worry about session expiring.
You can expire your session at your will as well.
The data persists on page refreshes.
But Remember with sessionstorage you can only store strings key-value pattern. And you need to use JSON.stringify and JSON.parse method to store your complex objects in browser memory.
Here you can find a list of polyfills that you can use to provide the support of sessionstorage in non supporting browsers : https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills#web-storage-localstorage-and-sessionstorage
Also you can read the following article to understand sessionstorage and localstorage in a better way: http://diveintohtml5.info/storage.html