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

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

Rate This
  • Comments 5

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.

1

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.

2

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.

3

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(
        "<div style='color:#0099FF;font-size:15px;'>My Hotel Application</div>");
};

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.

4

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

1

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

2

3

 

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

4

Copy the following code in ChangeAvailability_execute method:

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

This is how the page looks like after these changes.

5

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

1

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 red
    function 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.

2

4. Apply CSS properties through code

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

1

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.

2

5. Add a filter bar for listview through code

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

1

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:

2

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

Leave a Comment
  • Please add 5 and 3 and type the answer here:
  • Post
  • Great post! Simple bite-sized morsels which I could read in one pass and understand the gist of it right away. Fantastic job! Thanks!

  • Nice article, demonstrating the ability to leverage JQ/JQM to do things that the LightSwitch API lacks (stylistic UI changes in particular).  Other LS bloggers who have been showing neat things along these lines with JQM are found on Jewel Lambert's DotNetLore blog, as well as a dynamic stylizing ability from van der Hagen in MSDN magazine (msdn.microsoft.com/.../dn160191.aspx).  The old tagline from Michael Washington's LS website may soon include "Make them ask, 'Is that an HTML client LightSwitch app?'"

  • So it's possible to change LS look, but you have to use Javascript which is kinda' ugly. :( Thx for the post.

  • Hi Vedran - it's not necessary to use JavaScript to change the look and feel of your app - check out this post from Beth, you can use JQuery Theme Roller:  blogs.msdn.com/.../theming-a-lightswitch-sharepoint-app-with-themeroller.aspx which doesn't involve code.  Let us know what you think!

  • this is very nice article i get very much information from it .Spice Up Your HTML Client UI With Code i like this information this helps me a lot to do my work more easy thanks .........

    www.webdevelopmentseo.com/.../html-forum-f2.html

Page 1 of 1 (5 items)