Develop Reference

In Google App Maker, how do you cause a Multi Select Widget to select all options by default?

Background
Google App Maker has a Multi Select Widget which allows the user to select several options from a list.
Current State
By default, all options are unselected and the user must manually select all desired options.
Desired State
I would like to programatically cause all options to be selected so that the user can manually deselect all undesired options.
What I've Tried
App Maker Documentation:
The Multi Select Widget documentation provides information about how to bind options and values, but does not provide an option for pre-selecting these options.
Javascript onAttach Event and onDataLoad Event:
I attempted to run Javascript to programatically select the options but think this is where I'm coming undone.
The options in my Multi Select Widget are bound to #datasources.Suppliers.items..Supplier_Name and all options are displayed in the widget correctly.
I can successfully hard-code the options to be programatically selected, e.g.:
var optionsToBeProgramaticallySelected = ["Option1", "Option2", "Option3"];
widget.values = optionsToBeProgramaticallySelected;
... however, I do not want to hard-code the values to be selected because these will change over time. Therefore, I attempted to programatically create an array of all options and use that as the list of options to be programatically selected. However, I was not able to successfully return the array for use. The code I used to attempt this is:
var listOfAllPossibleOptions = app.datasources.Suppliers.items.concat();
widget.values = listOfAllPossibleOptions;
Question
How can I cause my Multi Select Widget to select all options?

Perhaps try querying the Suppliers datasource (on the server side), getting the results into an array.
Your client side function (multi select widget is passed on as parameter):
function querySuppliers(MultiSelectWidget){
google.script.run
.withFailureHandler(function() {
alert("Unable to query suppliers");
})
.withSuccessHandler(function(result) {//this is the return value from server side
MultiSelectWidget.values = result;
})
.querySuppliers();
}
Your server side function:
function querySuppliers(){
var suppliersDS = app.models.Suppliers.newQuery();//new query to datasource
var suppliers = suppliersDS.run();//run the query
var returnArray = [];//array to store suppliers
for (i=0; i<suppliers.length; i++) {//traverse through suppliers to grab names
returnArray.push(suppliers[i].Supplier_Name);
}
return returnArray;
}

Filtering options on Business Process flow OptionSetValue step

I have a method that allows me to filter out certain options from an OptionSetValue field.
It works fine on a form field, but when that field is in the header, for a business process flow, it "works" as in, through debugging I see the options being cleared and re-added (only the ones that should be there), but once the form is rendered, all the options are visible...
Here's the method:
FilterOptionSetValues: function (fieldName, visibleOptions) {
var ctrl = Xrm.Page.getControl(fieldName);
var allOptions = ctrl.getOptions();
//clear current options
ctrl.clearOptions();
//loop through all options of optionset and if one is found in config element, add it.
for (var x = 0; x <= allOptions.length - 1; x++) {
if (visibleOptions.availableOptions.indexOf(parseInt(allOptions[x].value)) > -1) {
ctrl.addOption(allOptions[x]);
}
}
}
And here's how I call it:
FilterOptionSetValues('header_process_new_my_optionset_field', { stage: 1, availableOptions: [300000002, 300000003, 300000004] });
This code is called either in the form load event and the OnChange event of another fields (salesstage).
Is there something I'm missing? Seems like MS's own javascript is undoing my work here...
EDIT: When I put an OnChange listener on header_process_new_my_optionset_field, nothing happens when I change the value of that field in the header business process flow, but an onChange listener on new_my_optionset_field will be triggered by a change on that field either on the form or the header business process flow.
But running the logic above only on the field new_my_optionset_field doesn't do the filtering for that same field up there in the business process flow.

By doing a console.log of the name of all the form's controls (Xrm.Page.ui.getControls().getAll()), I found that there is an instance of the control for that attribute on each stage of the process, followed by 1, 2, 3 and so on. The same field is present on all stage of the business flow.
So I changed the code above for:
var control = Xrm.Page.getControl(fieldName);
var allOptions = control.getAttribute().getOptions();
//clear current options
control.clearOptions();
//below, same as above...
And called it for all as such:
FilterOptionSetValues('header_process_new_my_optionset_field', { stage: 1, availableOptions: [300000002, 300000003, 300000004] });
FilterOptionSetValues('header_process_new_my_optionset_field1', { stage: 1, availableOptions: [300000002, 300000003, 300000004] });
FilterOptionSetValues('header_process_new_my_optionset_field2', { stage: 1, availableOptions: [300000002, 300000003, 300000004] });
//and so on...
It was working at first, but only filtering the options in the first stage of the flow, which wasn't the active stage when testing so it gave the impression of not working...

Each time you change the current BPF stage (not selected, but actually go to the next stage) it forces a CRM save. This is probably refreshing your Option Sets. Add an Xrm.Page.data.process.addOnStageChange event handler, and then run your filter in that.

Selection across pages in EXT JS 3.x

We are using EXT-JS 3.x. To select records from pages, used the method selectRecords(). Now, I can select records when I navigate the pages. But the problem is, on clicking the submit button all the selected records across pages should be visible. But below line of code grid.getSelectionModel().getSelections()
returns the selected records in the current page.
Whether there are any options available to get all the selected records?

Don't know if It can be great for you, but I can suggest you to use a new column in the store to indicate if the row is selected or not. This column will be a boolean. You can set it value with listeners rowselect and rowdeselect.
On submit you will be able to query the store to get only the records with the correct indicator value.
For example:
var myStore = new Ext.data.JsonStore({
fields: [{name:"col1", type:"string"}, {name:"INDICATOR", type:"'boolean'"}]
});
var myGrid = new Ext.grid.GridPanel({
store: store,
columns: [...//Don't put the INDICATOR here
sm: new Ext.grid.RowSelectionModel({singleSelect: false}),
....
listeners: {
rowselect: (e,index, record){
record.data["INDICATOR"] = true;
},
rowdeselect: (e,index, record){
record.data["INDICATOR"] = false;
},
....
}
});
On submit
var mySelection = myStore.query("INDICATOR", true);
I hope I give you a great example and it's not to complicated.
I haven't test my code so maybe you will have to correct it a little bit.
Good luck!

How to reload grid by providing different url's to grid

I want to reload my grid on checking of different radio buttons,but with the new urls which i want to provide to grid to give different different columns inside grid..
this is my radio button where i want to give different url to my grid.
{
boxLabel: ' 1', name: 'rb-horiz-3', inputValue: 1,
listeners: {
check: function(){
//what i write here to
// reload grid with different url ....
}}
}
this is my grid..
{
xtype:'grid',
store:new Ext.data.JsonStore({
id:'store_id',
root:'result',
totalProperty:'total',
fields:[
{name:'rank'},
{name:'pg'},
],
baseParams:{start:0,limit:20},
url:'pgrouting!getGridData.action',//this i want to change on checking of radio button...
autoLoad:true,
method:'POST'}

As #MMT said in the comment, set the url of the bound proxy to an new url and then perform a load of the store.
check: function(){
var url = http://example.com/data; // set the specific url
// what you need here is a reference to your grid or store
var store = grid.getStore(); // get the store from the grid
var proxy = store.getProxy(); // get the proxy from the store
proxy.setUrl(url); // change the url of the proxy
store.load(); // load the new data
}}
What you need in the check listener is a reference to either the grid or the store of the grid.

How do you save a Checkbox State in localStorage

I'm designing a web app for Document Managers, and there is a 'settings' page, where the user sees a pair of checkboxes formatted to look like the iphone toggle buttons. they work and all, but whenever the user leaves the website or refreshes the page the state of those buttons is reset back to the default. is there a way to save the state of them using localStorage or do i need to use cookies? EDIT in the JavaScript file (code shown below) there are two functions, one called saveSettings and the other loadSettings, but if i have to do it all in one function then please tell me. END OF EDIT any help at all would be greatly appreciates. so far i have;
localStorage.CheckboxName = $('#CheckboxName').val();
to save the checkbox to localStorage and;
$('#CheckboxName').val(localStorage.CheckboxName);
but it won't save. Am i doing something wrong?
EDIT
here's the HTML code of the two checkboxes;
<li style = 'color: #FFFFFF;'>Notifications<span class = 'toggle'><input type = 'checkbox' class = 'toggle' name = 'notifications' id = 'notifications' /></span></li>
<li style = 'color: #FFFFFF;'>Preview<span class = 'toggle'><input type = 'checkbox' class = 'toggle' name = 'preview' id = 'preview' checked = "true" /></span></li>
END OF EDIT
Any help would be amazing, thanks in advance x

I'm not sure, but I've always believed that it was like this :
window.localStorage.setItem('CheckboxName', $('#CheckboxName').val());
$('#CheckboxName').val(window.localStorage.getItem('CheckboxName'));

You could try the following
$("#CheckboxName").is(':checked')?'checked':'not' and save the output, seems to be what is suggested here:
How to use local storage to retain checkbox states for filtering items

To store an Item just remember that the store only holds strings.
Eg.
var val = $('#CheckboxName').val();
window.localStorage.setItem(key, JSON.stringify(val));
So when you read the value back you need to deserialize the string.
var str = window.localStorage.getItem(key);
var obj = $.parseJSON(str);
Or you could just do string comparison whatever suites your needs better in your case what I would do is store an object of id value pairs in one storage key and deserialize them all to work with proper object
Eg.
var val = {
CheckboxName1: true,
CheckboxName2: false,
CheckboxName3: false, // ect....
};
window.localStorage.setItem(key, JSON.stringify(val));