Option List - Using JSON Object to store Option List Data

Note: Updated Nov. 20, 2013 to follow format of the External App Template functions and to comply with v12.0.062 feature to eliminate cross site scripting vulnerabilities.

This is a simple example of how you can use a JSON object to store structured data in a field in your application form.

Let's say you want to allow your users to store and retrieve values that can be used in an html drop-down list.

You can retrieve the stored data and parse it to build your option list in html like this

<select>

 <option value="153.2">Accounts Payable</option>

 <option value="888.4">Accounts Receivable</option>

 <option value="146.6">Petty Cash</option>

</select>

This means that we need to store both values in a format that can be easily parsed.  JSON is the best format to do this.  For example. a JSON representation might be the following and stored as a string in a field on your application form:

{"data":[{"option":"Accounts Payable","value":"153.2"},

        {"option":"Accounts Receivable","value":"888.4"},

        {"option":"Petty Cash","value":"146.6"}

       ]

}

You can then retrieve the data from your form field and parse it in javscript.  I use jQuery and if my drop-down list is in

<select ID= "EX_Options"></select>, the function I use would look like this when I pass the returned value from the retrieved field to the BuildOptionList function.

   function BuildOptionList(){

       // Add leading Option

       $('#EX_Options').append('<option value="Select">Select Item</option>');

       // Parse the retrieved data

       showStoredData(FixHTML(StoreField1.data));

       var StoreField1Options=$.parseJSON(FixHTML(StoreField1.data));

       var StoreField1Array = StoreField1Options.data;

       $.each(StoreField1Array, function(i,item){

           $('#EX_Options').append('<option value="' + item.value + '">' + item.option + '</option>')

        });

       // Add closing option

       $('#EX_Options').append('<option value="' + newEntryText + '">' + newEntryText + '</option>')

   }

Upload the Source Code

For this application, we can run it in an iFrame delivered from our Internet Services (or any web server)

As we did with the Calculator application

1. Download OptionList.html.zip and expand it to extract the OptionList.html file

2. Upload this file to your ExtAppSource folder as described in the Calculator document in this section.

Installing the Application

1. Follow the instructions in the Installing External Apps section to create a new external application document.

2. Name your application Option List (or any other name you choose)

3. Set the dimensions to

4. Add the names of the groups to which you wish the application to be made available.

6. Click the image at the right to open it in a new window, then save as icon.png and attach it to the form

7. In the body of the document, paste the following html snippet.

NOTE: If you are running FCWS with an SSL certificate, recent changes to both Chrome and Firefox require that your web server hosting your external application also have an SSL certificate installed.

<iframe width = "100%" height = "100%" src="https://www.yourserver.com/ExtAppSource/OptionList.html"></iframe>