Customize the LightSwitch HTMLClient Application UI.

Rating Stars uses in LightSwitch htmlclient application.

As Karol Zadora-Przylecki has written a article to customize the UI of the LightSwitch application. He has explained a very well in the his article how to use stars for rating in LightSwtich. This is such a nice article. It helps me a lot. 

I wanted to use the same method in LightSwitch htmlclient. I have searched so much over internet but I was not able to find out the solution. Then I have decided to write own custom control to modify this. With the help of Karol Zadora-Przylecki's article finally I have successfully create a js file to implement this in LS htmlclient. 

Here are the few steps that you have to follow. These are as below.

Step 1: Create a new folder "CustomImages" under Content folder of Htmlclient project and copy two images under this folder. One of them should be field and second one should be blank (as shown in the below screenshots).

 
Step 2: Download a javascript file form the below link, copy this under Script folder and add as a reference in default.htm file.
           Download javascript

Step 3: Add the below css class under user-customization.css file.

/* Rating stars styles */

.RatingDivContainer{

    margin:4px;

}

.RatingImgStyle{

    margin-right:6px;

    height:16px;

    width:16px;

}

Step 4: Now convert the rating field into Custom Control. On the render function of this custom control add the below line of code. 

SetRating(element, contentItem, 5);

In above line number 5 stands how many stars you want to show in the application. You can increase and decrease this number as per your requirement. 

Step 5: Hit on the F5 and rating starts will be showing.