Spice Up Your HTML Client UI With Code (Rohit Agrawal)

Often we wish to personalize the HTML Client in order to either add extra functionality or to give a screen more personal and snazzy look. In this post I will walk you through some ways we can add JQuery mobile controls, add HTML code and even make css changes through code.

We will be going through the following scenarios:

• Add a subtitle to a screen with the help of IE debugger
• Edit a selected list item’s property value directly from the Browse screen.
• Edit background color of a list item depending upon the list item’s property value.
• Apply CSS properties through code.
• Add a filter bar for listview through code.

For the following application, I have created an entity called Rooms with two properties – ‘RoomNumber’ of type String and ‘IsAvailable’ of type Boolean. I also added a ‘BrowseRooms’ screen which shows a list of Rooms and an ‘AddEditRoom’ screen that lets me add new rooms.

1. Add a subtitle to a screen with the help of Internet Explorer debugger

Note: I am using Internet Explorer 10 in the following example

Start debugging the application by pressing F5 in Visual Studio. After the browser launches, to start debugging press F12 to open the “Developer Tools”. Then click the arrow to ‘select element by click’ as shown in the screenshot below.

Now, slide the mouse cursor over to title area on Browse Rooms screen and click the left mouse button. Notice that the ‘msls-title-area’ Div tag would be highlighted on developer tool window.

Now that we know that ‘msls-title-area’ is the div class that we want to add text to, let’s stop debugging and open the BrowseRooms screen in the designer. Click on ‘Room List’ Tab control and then click on ‘Edit PostRender Code’ on the property sheet window.

Copy the following code in RoomList_PostRender function:

myapp.BrowseRooms.RoomList_postRender = function (element, contentItem) {// Write code here.$(element).closest("[data-role='page']").find(".msls-title-area").append("
My Hotel Application
");
};

Note: In the above code we start with a JQuery selector, find the closest ancestor in the DOM tree that has the data role of ‘page’, then find the child with the class ‘msls-title-area’, and then append a div tag. Instead of specifying color and font size explicitly within the div tag, you can specify a style sheet as well.

This is how the page looks like after these changes.

2. Edit a selected list item’s property value directly from the Browse screen

Open ‘BrowseRooms’ screen and change control type of Rooms list from Summary to ColumnsLayout

Add new button to each list item. Let’s call it ‘ChangeAvailability’.

Right click on the ChangeAvailability screen method and then click on ‘Edit Execute Code’

Copy the following code in ChangeAvailability_execute method:

myapp.BrowseRooms.ChangeAvailability_execute = function (screen) {// Write code here.
    //Change the value of IsAvailablescreen.Rooms.selectedItem.IsAvailable = !(screen.Rooms.selectedItem.IsAvailable);//Save all changesmyapp.activeDataWorkspace.ApplicationData.saveChanges();
};

This is how the page looks like after these changes.

3. Edit background color of a list item depending upon the list item’s property value

On ‘BrowseRooms’ screen, click ‘Edit PostRender Code’ for Room – Columns Layout

Copy the following code in postRender function:

myapp.BrowseRooms.RowTemplate_postRender = function (element, contentItem) {// Write code here.var entity = contentItem.value;//If IsAvailable is true then the color of List row would be green
    //If IsAvailable is false then the color of List row would be redfunction refresh() {var color = "#F5858B";if (entity.IsAvailable) {
            color = "#85F5B4";
        }
        $(element).closest("li").css("background", color);
    }
    refresh();//Add a change event listener to IsAvailable property entity.addChangeListener("IsAvailable", refresh);
};

This is how the page looks like after these changes.

4. Apply CSS properties through code

On ‘BrowseRooms’ screen designer, select ‘Room Number’ and click ‘Edit PostRender Code’

In RoomNumber_postRender method, copy the following code:

myapp.BrowseRooms.RoomNumber_postRender = function (element, contentItem) {// Write code here.$(element).css("font-family", "Times, serif");
    $(element).css("font-size", "24px");
    $(element).css("font-style", "italic");
    $(element).css("font-weight", "bold");
};

Note: The code shown above will only change the css properties for RoomNumber control on BrowseRooms screen. Visit the following link to see - Add Custom Theme.

This is how the page looks like after these changes.

5. Add a filter bar for listview through code

Select List – Rooms and click on ‘Edit PostRender Code’

Type in the following code in Room_postRender function:

myapp.BrowseRooms.Room_postRender = function (element, contentItem) {// Write code here.
    // Set data-filter equals true for the listView$(element).find("ul").attr("data-filter", true);//Enter 'Search Rooms...' as placeholder for filter$(element).find("ul").attr("data-filter-placeholder", "Search Rooms...");
};

Note: The filter shown above, filters data on the UI level. So it can be used for entities that will have paging disabled. To add filter on DB level, see ‘How to create a search screen’

This is how the BrowseRooms screen would look like:

Conclusion

LightSwitch provides ability to make full use of HTML, JavaScript and many third party libraries. With slight modifications through code it is possible to add personal touch to any application.

Visit the following links to learn more about HTML and Browser objects:

· HTML References

· Cascading Style Sheets

· Document Object Model (DOM)

Reference

To learn more about jQuery mobile controls, see jQuery.mobile

- Rohit Agrawal, SDET, LightSwitch Team