jQuery Mobile Panel Control with LightSwitch

In an earlier post, I demonstrated how to use trigger(‘create’) with jQuery Mobile and the LightSwitch postRender method in order to render a collapsible content control.

In this post, I’ll show how to use the same approach to create a jQuery Mobile sliding panel control.

You can download a sample project here.

In the sample, I’ve created a simple Entity, Customers. I then created a BrowseCustomers screen with an AddAndEditNew command, along with an AddEditCustomer screen.

In my BrowseCustomers screen, I’ve added a RowsLayout group, named ItemDetailsPanel, with read-only controls to display the details of the selectedItem from the Customers list control.  Also, I’ve added an EditCustomer button and a DeleteCustomer button to this group.

In the postRender method for this RowsLayout control, I have the following code:

function buildPanel(element, contentItem, dataAttributes) {
    setTimeout(function () {
        // jQuery Mobile Panel controls must be a direct child of the ui-page
        var page = $(element).closest('.ui-page');
        var div = $('<div id="' + contentItem.name + '" data-role="panel">');
        div.data(dataAttributes);
        page.prepend(div);
        $(element).appendTo(div);

        // initialize the panel
        div.panel();
    }, 0);
}

myapp.BrowseCustomers.ItemDetailsPanel_postRender = function (element, contentItem) {
    buildPanel(element, contentItem, {
        display: "push",
        position: "right"
    });
};

When the user clicks on a Customer in the list control, we want the panel to slide open.  So I’ve also added an ItemTap action for the Customers List control.  It has the following execute method:

myapp.BrowseCustomers.Customer_ItemTap_execute = function (screen) {
    $('#ItemDetailsPanel').panel('open');
};

One final essential step – install the LightSwitch HTML Client Runtime Update 1 using NuGet (see the instructions here).  Make sure you have updated the paths in the default.htm!

Let’s see the panel control in action…