Creating a Dynamic Form App (Part 2)

Presto makes it easy to create applications that utilize enterprise data and services. This 2-part article discusses how to create a simple enterprise App using Presto Mashups and jQuery.  The example that will be covered throughout the article is the Dynamic Form App.

The Dynamic Form App provides a form that allows a user to create records for any Mashup.  The App dynamically generates a form for creating records based on Mashup service meta-data.  The App allows the user to input data for a new record into the generated form and submit that data to the Mashup create operation.  You can follow along with the article by searching for “Dynamic Form” in the search box of your Presto server.

This article is divided into 2 parts.  Part 1 discusses retrieving Mashup service meta-data that can be used to dynamically generate a user interface for the Mashup. Part 2 will cover how to use this meta-data to render a dynamically generated create form and submit that data to a Mashup create operation.

Displaying a Dynamic Form using Mashup Meta-Data

Once we have the meta-data necessary to understand the create operation, we can generate the create form.

First, we generate the form for creating a new record.  The following HTML provides the shell for the create form we want to display in the App.

We can then use the createOperationInputs we retrieved in part 1 to dynamically generate the form inputs.

The app.rootElement allows us to retrieve a jQuery object representing the createNewTableBody DOM element.  When an App is rendered, it is surrounded by a <div> that serves as the root DOM element of the App content.  The app.rootElement provides an easy way to retrieve that element.  In this way, we scope all selector operations and content manipulation to the App thereby avoiding unintended name collisions.

We then append the inputs to the table body using the createOperationInputs.

In part 1we saw that the normalized service data (NSD) contains a label and a name for each operation input.  The _generateDynamicInputs method iterates through the create operation inputs using the jQuery.each function.  A label and an input field are rendered for each input.  Notice that the input includes a CSS class representing the input type.  This enables the use of the jQuery Validation plugin which will be discuss in a later section.  The following represents the HTML that is generated for the Add Sample Employee Mashup.

When creating a new record with the Dynamic Form App in your browser, the HTML is rendered as follows.

Give Your App Behavior With Event Binding

The create and delete forms we defined in part 2 were each defined with a button that submits the form data.  Once we have rendered the create and update forms and the results table, we bind events to these buttons.

A jQuery object is retrieved for the form and we bind a submitHandler function using the validate jQuery function.  This validate function ensures that the form is validated prior to submitting.  The jQuery Validation plugin looks for a CSS class on each input representing the validation to perform.  A CSS class of date would enforce a date validation while a CSS class of number would enforce a decimal number validation.  In part 2 when we generated the inputs for each form, we set the input type as a class to ensure appropriate validation.  To use the jQuery Validation plugin simply include the following  requirement in the App specification.

The onSubmitNew method is invoked when the form submits and is determined to be valid.  The form is submitted by our createNew button which is defined as type="submit".

The data input by the user is retrieved from the createForm.  The createOperationInputs identify the HTML input elements with the user's input data.

For each input we retrieve the value from the form using the jQuery val method.  The input.name identifies the HTML input element and provides the name of the associated create operation input.  This allows us to initialize our inputData object with key-value pairs that match the expected inputs of our create operation.  Once the input data has been initialized, we invoke the _requestCreateOperation with the initialized inputData.

Here we simply invoke the _requestPostOperation method with the createOperationName and the inputData we retrieved.   Once the create operation completes, the provided onComplete function is invoked.  This functions simply alerts the user of the record creation and clears the input values using the jQuery :input selector.  Now let's see how a POST operation is requested with jQuery. 

Modifying Mashup Data with jQuery

So far we have only performed GET requests to Mashup operations.  While GET requests allow us to read data from our Mashup, if we want to modify data through the create, update, and delete operations we need to issue a POST request.  This is simple using the jQuery ajax function.

Initially we create the URL for the operation we intend to request.  When performing the create operation for the Add Sample Employee Mashup the requestUrl will be initialized as:

We then invoke the jQuery ajax function with the requestUrl and our inputData specifying the type of request as POST. This will initiate an AJAX request to our Mashup operation and will send our inputData as the message body of the POST. Notice that we provide the inputData object without any processing.  jQuery handles this processing which simplifies our request logic.  The onComplete attribute provides a closure that is called if the AJAX request completes successfully.

This concludes part 2 which demonstrated how to use service meta-data to render a dynamically generated create form and submit that data to a Mashup create operation.  The completed App can now be included in any HTML page, iGoogle, or even Sharepoint by using the provided Presto App embedding capabilites.  Simply check out the “Embed” toolbar when accessing the Dynamic Form App for details.