Options List

The Options List feature enables you to display options as a list in your mobile application.

Supported Platforms

This feature is supported in the following platforms:

iOS
Android

Installation

Execute the following command in your Cordova project directory:

cordova plugin add cordova-plugin-listpicker

Usage

Assume that there is a "List Options" button in your mobile application. The following is a sample code snippet that you can use in the listener JS file to invoke the options list when the button is clicked.

/* The following function displays an options list for the user to choose from the available options.
*  Here, CFEC.CLICK is the Canvas event that can be used to capture the button clicked action.
*  LIST_POPUP is the form item ID for the "LIST OPTIONS" button.
*/
this.fm.registerHandler(CFEC.CLICK, "LIST_POPUP", 
                        function (fm, event, fieldName, value) 
						{
            				var config = 
							{
                				title: "Select a Loan",
								items: 
								[{
                        			text: "Personal Loan",
									value: "personal loan"
                    			 },
								 {
                        			text: "Home Loan",
									value: "home loan"
                    			 },
								 {
                        			text: "Four-wheeler Loan",
									value: "fourwheeler loan"
                    			 },
								 {
                        			text: "Gold Loan",
									value: "gold loan"
                    			 },
                    			 {
                        			text: "Two-wheeler Loan",
									value: "twowheeler loan"
                    			 }],
								
								selectedValue: "fourwheeler loan",
								doneButtonLabel: "Done",
								cancelButtonLabel: "Cancel"
            				};
            				canvas.env.listPicker.showPicker(config, ListPickerSuccess, ListPickerError);
});

// The following function is called when a value from the options list is successfully selected.
function ListPickerSuccess(item) 
{
    showAlert("You have selected " + item);
}

// The following function is called when a value from the options list is not selected.
function ListPickerError(err) 
{
    showAlert("You have cancelled");
}