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.

BrowseCustomersScreen

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…

8 thoughts on “jQuery Mobile Panel Control with LightSwitch

  1. Alessandro Piane

    Hi Jewel,

    This post is great!! Good!

    So, I would do a thing.
    I developed with LightSwitch Html, and I created the table ‘Gender’ (Female, Male), in an application.
    Is it possible, use the CheckBoxRadio (http://api.jquerymobile.com/checkboxradio/#option-theme) and then associate a value (Female, Male) of ‘Gender’ Table?
    If yes, how can I do? A simple example would be fantastic!!

    Thanks very much, best regards

    Ale

  2. Hi,

    Great. I just had one issue with the panel. When you navigate to the page that holds the Group (panel), the panel opens but if you navigate back to previous page and the navigate to the page with the panel. It won’t open the second time

    On “open” command you have to set the activepage like:

    $.mobile.activePage.find(‘#Group’).panel(‘open’);

    regards
    Sven

  3. Can you have more than one panel. One on the left for menus and one on the right for user profiles.
    Thanks

    • Yes, but I don’t think jQuery Mobile will let you have more than one panel open at the same time.

Comments are closed.