JavaScript Functions for List Items
Sort a List
Description:
Sorts the content of the item that is passed to the function. The function supports Dropdown, Select One and Select Many. The function will overwrite the options of the item that is passed to it. If the item has a selected value then that value will still be selected after the list is sorted.
Usage Notes
1. Copy the code to the Settings...Events...onStart section of your application.
2. There are several different ways in which you could use this function. If the form item already contains the items you could add the function call to the onShow event of the list item you want to sort:
app.getSharedData().sortList(item);
In the case of an item where its choices are populated by a service call you may want to sort the list after the items are populated. An example of this would be to setup a listener for when the service call is completed and then call this function passing in the UI reference to the list you want to sort, for example:
app.getSharedData().sortList(form.getPage('P_NewPage').F_DropDown);
**Note: If you are using 8.5 and you are loading your list choices using a service that calls another Forms Experience Builder Application then you can use the OrderBy input parameter to sort the list choices rather then using this JavaScript function.
If you are calling a service where the orderBy parameter is not available then it is best to call this service after the service completes by creating an onCallFinished listener, place the following code in the onLoad event of the form:
var srv = form.getServiceConfiguration('SC_theService'); srv.connectEvent("onCallFinished", function(success) { if(success) { //change the F_DropDown to the ID of the object that you want to sort app.getSharedData().sortList(form.getPage('P_NewPage').F_DropDown, "title"); } }); Function: //theItem - The UI object for the list item //sortBy - Valid values are "title" or "value" app.getSharedData().sortList = function(theItem,sortBy) { if(typeof theItem === "undefined") { return; } if(sortBy === null) { sortBy = "title"; } //store the current value var value = theItem.getBOAttr().getValue(); //sort the list var options = theItem.getOptions(); if(options !== null) { options.sort(function(a,b) { return get(a, sortBy).localeCompare(get(b, sortBy)); }); theItem.setOptions(options); //reset back to the current value theItem.getBOAttr().getValue(value); } }
Remove Duplicates From List
Description:
This function will remove any duplicate options found the current set of options.
Usage Notes:
1. Copy the code to the Settings...Events...onStart section of your application.
2. Then you need to decide where and when to call the function. In the case of a service call you would want to call it when the service completes. Which might look something like this:
var service = form.getServiceConfiguration("SC_ServiceThatReturnsList"); service.connectEvent('onCallFinished', function(success) { if(success) { var cList = form.getPage('P_thePage').F_DropDown2.getOptions(); var nList = app.getSharedData().removeDuplicatesFromList(cList); form.getPage('P_thePage').F_DropDown2.setOptions(nList); } });
I would place this listener into the onLoad event of the form. This technique works for dropdowns, check and radio lists.
If you wanted to do this for a table you would have to change the process slightly.
Function:
app.getSharedData().removeDuplicatesFromList = function(theList) { var newList = new Array(); //loop through the current list for(var j=0; j<theList.length;j++) { var curItem = get(theList, j); var itemFound = false; //loop through the newList checking to see if the item is there for(var k=0; k<newList.length;k++) { if(get(curItem, 'title') === get(get(newList, k), 'title')) { itemFound = true; break; } } if(!itemFound) { newList.push(curItem); } } return newList; }
Remove Blank Options From List
Description:
Returns a new List that does not contain the blank value. Supports Select One, Select Many and Dropdown objects.
Usage Notes:
1. Copy the code to the Settings...Events...onStart section of your application.
2. In the onShow event of the list object that you want to change call the function by doing something like:
//get the dropdown options var c_opts = form.getPage('P_NewPage').F_DropDown.getOptions(); var n_opts = app.getSharedData().removeBlankFromList(opts); form.getPage('P_NewPage').F_DropDown.setOptions(n_opts);
This gets the existing list options, passes it to the function which returns a new list. That new list is then set into the list object.
Function:
// theList - the List item from which to remove blank options app.getSharedData().removeBlankFromList = function(theList) { //check all options for a blank value and remove it... var newList = new Array(); //loop through the current list for(var j=0; j<theList.length;j++) { var curItem = get(theList, j); if(curItem !== "") { newList.push(curItem); } } return newList; }
Randomize List Choices
Usage:
1. Copy the function in to the Application...onStart event.
2. In the event where you want to trigger the function place the code:
app.getSharedData().randomList(page.F_DropDown); app.getSharedData().randomList(form.getPage("P_NewPage1").F_DropDown);
Example:
Function:
// Returns a random number between the numbers specified. */ app.getSharedData().randomFromInterval = function(from,to) { return Math.floor(Math.random()*(to-from+1)+from); } // Randomizes the selections of the specified list item. app.getSharedData().randomList = function(theItem) { //store the current value var value = theItem.getBOAttr().getValue(); //set up the arrays var arrOptions = theItem.getOptions(); var tmpOptions = theItem.getOptions(); var newOptions = new Array(); //Randomise the list if(arrOptions !== null) { for ( var i = 0; i < arrOptions.length; i++ ) { //the random number should be between 0 and the length of the array var j = app.getSharedData().randomFromInterval(0,tmpOptions.length-1); var temp = get(tmpOptions, j); //assign the item to the new array newOptions.push(temp); //remove the item from the temp array tmpOptions.splice(j, 1); } //Set the options back theItem.setOptions(newOptions); //reset back to the current value theItem.getBOAttr().getValue(value); } }
Get Dropdown Title
Description:
When you are using an ID for the saved value of a drop down and you need to get at the actual title.
Usage Notes:
1. Copy the code to the Settings...Events...onStart section of your application.
Then to use it you would call it in the onItemChange of the dropdown:
var selectedItemTitle = app.getSharedData().getDropdownItemTitle(item, BOA.getValue());
Then you can do whatever you want with the selectedItemTitle, like set it into another field:
BO.F_SingleLine.setValue(selectedItemTitle);
Function:
app.getSharedData().getDropdownItemTitle = function(theList, compareValue) { var opts = theList.getOptions(); var retVal = ""; //loop all the items and return if you find the compareValue for(var i=0;i<opts.length;i++) { var theItemBO = theList.getBOAttr(); var theItemTitle = get(get(opts,i), 'title'); var theItemValue = get(get(opts,i), 'value'); if(theItemValue === theItemBO.getValue()) { retVal = theItemTitle; break; } } return retVal; }
Invalidate Field Based on Length
Description:
Function that can be used to check the content of a field and set it to invalid if it exceeds a specified length.
Usage Notes:
- Place the function in the Settings...Events
- Use the function in the onLiveItemChange event of the field you want to validate and change parameters as desired:
app.getSharedData().fieldLengthValidation(item, 3, 'Field will only accept 3 characters or less');
Function:
// theItem - the UI object of the item to validate // theLength - the max length of the field, if exceeded the field will be set to invalid // theMsg - The text to render if the length is exceeded. app.getSharedData().fieldLengthValidation = function (theItem, theLength, theMsg) { var dval = theItem.getDisplayValue(); if(dval.length > theLength) { theItem.getBOAttr().setValid(false, theMsg); } else { theItem.getBOAttr().setValid(true, ''); }
Remove Item From List
Descripton:
Removes the blank option from the list even if it is not the first, will also remove any duplicate blank options.
Function:
// theList - the List item from which to remove blank options app.getSharedData().removeItemFromList = function(theList, theVal) { //check all options for a blank value and remove it... var newList = new Array(); //loop through the current list for(var j=0; j<theList.length;j++) { debugger; var curItem = get(theList, j); if(get(curItem, 'title') !== theVal) { newList.push(curItem); } } return newList; } }
Remove Items From List
Description:
Removes the options from the list that are found in the omitNames data passed to it.
Function
// theList - the List item from which to remove blank options // omitNames - string of items to omit from the list app.getSharedData().removeItemsFromList = function(theList, omitNames) { //check all options for a blank value and remove it... var newList = new Array(); //loop through the current list for(var j=0; j<theList.length;j++) { debugger; var curItem = get(theList, j); if(typeof omitNames !== "undefined" && omitNames.indexOf(get(curItem, 'title')) === -1) { newList.push(curItem); } } return newList; }
Get Checklist Title
Description:
Returns the displayed title of the checklist selection. You pass it the value.
Usage:
Then to use it you would call it in the onItemChange of the dropdown:
var selectedItemTitle = app.getSharedData().getCheckListItemTitles(item, BOA.getValue());
Then you can do whatever you want with the selectedItemTitle, like set it into another field:
B
O.F_SingleLine.setValue(selectedItemTitle);
Function:
app.getSharedData().getCheckListItemTitles = function(theList, compareValue) { //split the compareValue into all the selected item var selChecks = compareValue.split("__#__"); //for each one, get the title from the list and create a new concatenation var opts = theList.getOptions(); var retVal = ""; for(var h=0;h<selChecks.length;h++) { var v = get(selChecks, h); //loop all the items and return if you find the compareValue for(var i=0;i<opts.length;i++) { var theItemTitle = get(get(opts,i), 'title'); var theItemValue = get(get(opts,i), 'value'); if(theItemValue === v) { if (retVal !== "") { retVal += "__#__"; } retVal += theItemTitle; break; } } } return retVal; }