Wednesday 15 January 2014

How to apply css on display name or Title of the display in LightSwitch Htmlclient?

While working in the lightswitch htmlclient, I gone through Rohit Agarwal’s article Spice Up Your HTML Client UI With Code. By Reading this article we are able to append some text near about the display name of the application. But I have a problem that how we can apply the css on display name?

I want to apply some css effect on title of the display. 
Finally After doing some practice I found the solution of this problem with the help of Spice Up Your HTML Client UI With Code article. Here is the solution step by step. 

Step 1: Go to properties of display's first Row Layout template and click on the Edit PostRender Code link.

Step 2: Its time to write some code.

$(element).closest ("[data-role='page']").find (".id-element").css ('color', 'red');

Concentrate on find function which is very import. Here we are finding the class id-element and then apply the css. Because display is render in span tag and class id-element is applied on this span tag. 

Step 3: Now hit F5, run application, check same display. you will wounder, your css has applied and its working on the display name of display.

Wow ........

Thanks to Mr. Rohit Agarwal