Creating a Master Details 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 Master Details App.

The Master Details App displays a list of companies (master) when the App is rendered.  When a company is selected, a list of orders (detail) is rendered below the list of companies.  You can follow along with the article by searching for “Master Details” in the search box of your Presto server.

Part 1 discussed the companies (master) list which introduces the Presto Mashup API, describes the steps to create an App JavaScript class, and demonstrates how to consume Mashup data using jQuery. Part 2 covers the orders (detail) list describing how to bind events to DOM elements, retrieving user requested Mashup data dynamically, and rendering content on demand.

Give your App Behavior with Event Binding

Adding behavior to our App requires that we bind event handlers to DOM elements.  As we saw in part 1, the _bindViewOrdersEvent method gets invoked for each company we display in the companies table.

The companyRow jQuery object representing the company we are displaying is retrieved.  Notice the use of companyIndex. We use a unique index to represent each company we retrieved allowing us to identify DOM elements and attributes associated with the company.

Once we have retrieved the companyRow, we want to attach behavior to it.  The jQuery click method provides a shortcut for binding a handler to the click event type.  The event handler invokes the onClickViewOrders method with the unique index of the row selected.

The interface allows a user to show and hide the order listing for each company.  To achieve this, we first check if the user intends to simply hide the company that is currently displayed.  If so, we hideOrderDetails and bypass any additional logic. Otherwise, we need to retrieve the orders for the selected company and render the results.

Lazily Retrieve Mashup Data for your App

The list of orders for a company are only displayed when requested by the user.  This allows us to lazily retrieve the company orders.  Lazy retrieval means that we only retrieve data when needed thereby avoiding excessive load time and wasted resource utilization.

As we saw in part 1, the jQuery getJSON function makes it simple to consume the CompanyOrders Mashup through the provided REST API.  The following method demonstrates how we can retrieve the orders for a selected company.

Here we utilize a more specific Mashup operation than we saw in part 1. The findCompanyOrdersWhereCompanyIdEquals operation allows us to retrieve orders for a specific company by appending the company's companyId as a URL parameter. If we append companyId=101 we would receive the following JSON result.

Once the AJAX request completes, we need to render the results within the App.

Render App Content On Demand

As we saw in part 1, we first need to provide the HTML shell for the service results we want to display in the App.  Unlike part 1, the companyOrderDetails div element is given the style definition of display:none.  This ensures that the order details will be hidden until a company is selected.

Upon completion of the AJAX request, our callback function passes the array of orders to the _renderCompanyOrdersTable method.

We retrieve the jQuery objects representing the companyOrderDetailsHeader and the companyOrderDetailsTableBody. We then use the jQuery html method to replace the DOM element content with the order details header and the generated company orders table HTML.

We first check if any orders were returned by the AJAX request.  If so, a row is generated for each order associated with the company.  Otherwise, a message is provided to the user indicating that no orders could be found.

As a final step, the _renderCompanyOrdersTable method invokes the jQuery slideToggle method on the companyOrderDetails.  This method reveals the hidden companyOrderDetails by sliding the content down the page.

When the first company is selected, the resulting HTML will be: 

When the Master Details App is viewed in your browser and the first company is selected, the order details are rendered as shown in the following figure.

That concludes part 2 which demonstrated the ease of adding behavior to an App using Presto and jQuery.  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 Master Details App for details.