Develop Reference

Office-JS API: Fetching filtered data from table

I am trying to figure out a way to fetch only the filtered values from a table if a filter is active in Office-JS API.
Right now the only way I have figured to fetch all the table data is from the table range values property:
var table = tables.getItemAt(0);
var tableRange = table.getRange();
tableRange.load("values");
ctx.sync().then(function () {
// This returns all the values from the table, and not only the visible data
var values = tableRange.values;
});
Any ideas on how I can proceed to fetch only the visible values from the table if a filter is active?
From previous experience with Office Interop I have achieved the same by looping through the different Areas of the table range, but I am unable to find the equivalent to Areas in Office-JS.

The upcoming next wave of features as part of Excel JS APIs 1.3 will include a new object "RangeView" that allows you to read only the visible values off the Range object.
Here's a link to the open spec on GitHub - https://github.com/OfficeDev/office-js-docs/tree/ExcelJs_1.3_OpenSpec/excel.
Note that this isn't available just yet, but will be in the near future.
Usage for your case off a table would look like this:
var table = tables.getItemAt(0);
var visibleView = table.getRange().getVisibleView();
ctx.load(visibleView);
ctx.sync().then(function () {
var values = visibleView.values;
});

One way to get only filtered data is through the Binding.getDataAsync method, which takes a filterType parameter.
Office.select("bindings#myTableBinding1").getDataAsync({
coercionType: "table",
filterType: "onlyVisible"
},function(asyncResult){
var values = (asyncResult.value.rows);
});
This code assumes you have already created a binding to the table. If not, you can run the following code first, which uses the table name to call Bindings.addFromNamedItemAsync:
Office.context.document.bindings.addFromNamedItemAsync("Table1","table",{
id: "myTableBinding1"
},function(asyncResult){
// handle errors and call code sample #1
});
Note that the solution above is supported as far back as Excel 2013 because it uses the shared APIs. The Excel-specific API set doesn't yet have the capability to return only unfiltered data.
-Michael Saunders, PM for Office add-ins

Reading SharePoint Taxonomy Term Store and getDefaultLabel(lcid)

My App reads the SharePoint Term Store and need to get the label associated with the user's language. I get the user's language and lcid, and then I read all the terms under a certain node in the taxonomy using this code:
... some code to get the Term Store, then Term Group, then Term Set, and finally startTerm
var tsTerms = startTerm.get_terms();
context.load(tsTerms);
context.executeQueryAsync(
function () {
var termsEnum = tsTerms.getEnumerator();
while (termsEnum.moveNext()) {
var currentTerm = termsEnum.get_current();
var termName = currentTerm.get_name();
var userLabel = currentTerm.getDefaultLabel(lcid);
var userLabelValue = userLabel.get_value();
console.log ("Label=", userLabel, userLabelValue)
... more code ...
In the while loop, I can get all the attributes of the term I need, except for the label. In other samples I found on the web, to get the default label, my userLabel object would be loaded in the context, then another context.executeQueryAsync is called. All that makes sense, but this would induce a lot of calls to the SharePoint server.
But, when I write to the console the userLabel object, is shows as type SP.Result, and when I open it, I see the label I want under the m_value. So there should be no need to go to the server again. However, the userLabelValue is returned as a 0 - obviously, the get_value() does not work. In MSDN documentation, a SP.Result object type is for internal use only. Is there any way to extract the data that it stores?
I have attached a picture of the console with the object expanded, where we clearly see the m_value = "Contrat", which is the label I need to get to.

Use SP.Taxonomy.Term.getDefaultLabel Method to get the default Label for this Term based on the LCID:
function getTermDefaultValue(termId,lcid,success,failure)
{
var context = SP.ClientContext.get_current();
var taxSession = SP.Taxonomy.TaxonomySession.getTaxonomySession(context);
var termDefaultValue = taxSession.getTerm(termId).getDefaultLabel(lcid);
context.executeQueryAsync(function() {
success(termDefaultValue);
},
failure);
}
Note: SP.Taxonomy.Term.getDefaultLabel method expects locale identifier
(LCID) for the label.
Usage
var layoutsRoot = _spPageContextInfo.webAbsoluteUrl + '/_layouts/15/';
$.getScript(layoutsRoot + 'sp.taxonomy.js',
function () {
var termId = 'dff82ab5-6b7a-4406-9d20-40a8973967dd';
getTermDefaultValue(termId,1033,printLabelInfo,printError);
});
function printLabelInfo(label)
{
console.log(String.format('Default Label: {0}',label.get_value()));
}
function printError(sender,args){
console.log(args.get_message());
}

I was facing the same problem and found a solution. Instead of using getDefaultLabel(lcid), use this:
termSet.getTerm(Termid).getAllLabels(lcid).itemAt(0).get_value();
This, in my opinion, does the same as 'getDefaultLabel' but it works. It may cause a little bit more load than the other function but this one works for me

I'm getting a "newItem() was not passed an identity for the new item" error while trying to add a new item to a JSON store

I've seen other posts in this site regarding the same issue and I've tried the solutions given. I've also visited the links that may offer a solution but I'm still stuck with the same error.
I'm using DOJO and something as simple as this won't even work
myStore.newItem({id: 'test', otherfield: 'otherinfohere'});
myStore.save();
Supposedly the "newItem() was not passed an identity for the new item" error appears when you haven't provided an identifier for the new item, which i have.
The whole purpose of this (Just in case anyone can provide a good idea or has done something similar before) is that i want to create a data grid that shows info from a particular store. The problem is, that in that store all the items may not have the same structure. For instance:
I may have a store that looks like this
{identifier: 'id',
label: 'name',
items: [
{ id:'1', name:'Ecuador', capital:'Quito' },
{ id:'2', name:'Egypt', capital:'Cairo' },
{ id:'3', name:'El Salvador', capital:'San Salvador' , additionalField: 'otherinfohere'},
{ abbr:'gq', name:'Equatorial Guinea', capital:'Malabo', additionalField: 'otherinfohere'},
]}
This is possible because I'm the one constructing the store in a Spring Controller (I'm also using the Spring Framework) from information I have locally stored in a Berkeley DB. So what i need is a data grid with a dynamic layout because I don't want blank spaces to show in the view in the rows with lesser amount of fields, and i need to show all the info in the store at the same time, but i don't know how to do this.
I thought of doing it by creating a simple layout of only 1 field. In it I would load data from a store i create dynamically at runtime. The data in the store would be composed of HTML combined with the values coming from the original store so I could obtain something like this, which is inside an attribute of a JavaScript Object and let the browser parse it for me:
<div><span>id: originalID </span>....</div>
This of course is a simple example, the html layout i'm looking for is far more complicated, but i think that passing it as a string to an object might do the trick.
The problem is that i don't even know if that idea will work because i get that error whenever i try to add values to my secondary store.
rdb.modules.monitor.historicStore.fetch({onComplete: function(items, request){
for (var i = 0; i < items.length; i++){
var item = items[i];
var obj = new Object();
obj.id = rdb.modules.monitor.historicStore.getValue(item, "id");;
var html = "<div><span>";
html += rdb.modules.monitor.historicStore.getValue(item, "sql");
html += "</span></div>";
obj.html = html;
myStore.store.newItem(obj);
}
}});
In this context "historicStore" refers to the JSON store that has the values that i need to convert and add to "myStore" after i added some HTML.
I hope you got the main idea of what I'm trying to do. If anyone can help me we either of these problems i would really appreciate it. Thanks in advance

For the issue regarding store:-
"id" is mandatory for a store, if it is going to be used for a grid(datagrid, EnhancedGrid, etc. whatever). The items are handled only on basis of "id" attribute by the grid data structures.
Usually, id can be a loop variable/ auto incrementation, to avoid any cases like you have said. Before adding the store to the grid, ensure that all items have the id attribute. You can write a function which will loop through each item and check for this, else add an auto-incrementing value for the id attribute of that item.

How to bind Knockout.js to existing table grid?

I'm a newbie to Knockout.js. I implemented the Knockout.js by loading data from ajax source and use foreach loop to create a table of the data. The tutorial i followed is here
http://www.dotnetcurry.com/ShowArticle.aspx?ID=933
My issue here is, due to the nature of my application, I find that the first load is better served from the server side using a grid component and I only want Knockout.js to take care of "Add" row, "Update" a row and "delete" a row.
My question is,
1) how do I replace the "first" load and populate the lookupCollection :ko.observableArray() in the article with the default data in the html table?
2) Related to #1. If the first load, the table layout with data is constructed from the server side, then how do I bind "foreach" to the grid so "add" can be performed on lookupCollection?
Thanks and again, I'm a newbie, I must be missing some key concepts here.

One way would be to pass your initial data into your view model. Since you are using asp.net it would look something like this:
//Dump raw data into javascript variable
var data = #Html.Raw(ViewBag.Data);
function ViewModel(data) {
var self = this;
//Unpack raw data
self.lookupCollection = ko.observableArray(data.lookupCollection);
}
//initialize view model
var viewModel = new ViewModel(data);
ko.applyBindings(viewModel);

Backbone, correct way of saving data into a model?

I have two ways of saving data (into a rest API), it works Ok in both ways but I was wondering which one is the way to go.
1st way:
// here serializeObject just converts form inputs into a serialized object
var inputs_data = this.ui.form.serializeObject();
// here in 3rd param from extend is the same as this.model.unset('logged');
var data = _.extend(this.model.toJSON(), inputs_data ,{logged: undefined});
// here I save and the data goes Ok!
this.model.save(data);
2nd way:
// here i serialize the object the same as above
var inputs_data = this.ui.form.serializeObject();
// here i exclude 3rd parameter
var data = _.extend(this.model.toJSON(), inputs_data);
// set data with model.set instead of model.save
this.model.set(data);
// remove unwanted attributes
this.model.unset('logged',{silent:true});
// finnaly just save
this.model.save(data);
So far I am using the 1st way, so I do not know if the app goes bigger it will bring any problems because of this.

I would go this way. You don't have to pass all attributes to model's save method, only the attributes that need to be changed (http://backbonejs.org/#Model-save)
var inputs_data = this.ui.form.serializeObject();
// remove unwanted attributes
delete inputs_data.logged;
// finally just save
this.model.save(inputs_data);

If I were you I would use either Backbone.StickIt to synchronise an existing model with the form or use Backbone.Syphon to do something similar to what you are doing above.