Post
Ask Question

How to Customize LightSwitch HTML Client UI, a Quick Overview

If you have worked on LightSwitch HTML Client projects then you might know how to customize the UIs, in other words how to apply our own CSS styles by avoiding the default jQuery Mobile styles.

If you are new to the LightSwitch HTML Client then this is article is for you. Yes, in this article we will explain how to avoid the LightSwitch HTML Client's default style (using jQuery Mobile).

Before proceeding with an example, let us see how jQuery Mobile works.

What JQuery Mobile is

JQuery Mobile is the easiest way to build sites and apps that are accessible on all popular smartphone, tablet and desktop devices; see jquerymobile.com.

Yes, it is a unified user interface system built on the JQuery and JQuery UI foundation. This includes a navigation system that is based on Ajax for smooth page navigation. And it also has a set of touch-friendly widgets.

How JQuery Mobile works

To enable JQuery Mobile, we need to include the JQuery and JQuery mobile js files in your HTML page.

<!DOCTYPE html>
    <html>
    <head>
        <title>My Page</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    </head>
    <body>
        <div data-role="page">
            <div data-role="header">
                <h1>My Title</h1>
            </div>
            <div data-role="content">
                <p>Hello world</p>
            </div>
        </div>
       
    </body>
 </html>


In the preceding markup, we have included the JQuery and JQuery mobile js files along with a jQuery mobile CSS file.

To enable the HTML page to support all the smart devices and desktops, just add a meta tag with content of "width=device-width, initial-scale=1" with the name "viewport" in the HTML head part as shown below

<meta name="viewport" content="width=device-width, initial-scale=1">

In JQuery Mobile, the "data-role" attribute plays a vital role. JQuery Mobile parses the HTML based on the data-role attributes of the tags.

The data-role="page" is used on the HTML element (mostly a div) that makes the element a HTML page and the data-role="header" renders as the header and data-role="content" says it's a content holder as shown below.

<div data-role="page">
     <div data-role="header">
        <h1>My Title</h1>
    </div>
    <div data-role="content">
          <p>Hello world</p>
    </div>
</div>


Based on the data-role attribute, the JQuery Mobile framework will parse and apply the styles to the corresponding elements.

For more details on JQuery Mobile, please have a look at the JQuery Mobile site.

JM* = jQuery Mobile.

Customizing HTML Client UI

If you want to apply your own CSS classes on the elements then you need to turn off the JM*. To turn off the JM*, just replace the data-role value to none or empty string to the elements you want to apply your custom CSSs.

Example 1: If you want to apply you own CSS class to your text box and then just create a custom control as shown below

custom control

Set the data for the custom control.

data for the custom control

Then click on the Edit Render Code link to add the JavaScript code to render the normal text box.

Edit Render Code

The StudentId_render event will look like the following one.

myapp.AddEditStudent.Id_render = function (element, contentItem) {
  var $normalTextbox = $('<input value="some text" />');
    $normalTextbox.attr("data-role", "none");
    $(element).append($normalTextbox);

};

In the render event, we are setting the data-role attribute to the "none" string. So that the JM* will not apply/process the JM* CSS on the element.

render event

Here you can see the difference between a normal TextBox (#1) and JM* TextBox (#2). The JM* now avoids styling up the element because we have set the data-role="none".

Note: You can't apply custom CSS classes programmatically to native LightSwitch controls by completely negotiating the JM* framework CSS.

Example 2: Let say we want to set the background color for only alternative nodes. For this example, we shall use the Student list as our target element. So let us go to the post render event of Student as shown below.

post render event

Since we will change the various background colors, we need to edit the row template of the student item. In this row template event place the code given below:

var count = 0;
myapp.BrowseStudent.RowTemplate_postRender = function (element, contentItem) {
    // Write code here.
    var $element = $(element).parent(); // li item;
    if (count % 2 == 0) {
        $element.css({ background: 'red' });
    } else {
        $element.css({ background: 'green' });
    }
    count++;
};


Here, for every row, we are checking the count values for odd/even values and setting the background color based on the count value.

Output

 Output


Similar Articles