JS Dynamic star rating

1.1 Problem

In the report application, we may use graphics to display the effects such as scoring. In data entry reports, how to achieve the dynamic star scoring effect?

1.2 Solution

We can use the relationship between the tables, rows, columns, and cells of the report page, and together with events such as mouse movement, sliding out, and clicking.

2.1 Prepare the picture

First of all, we need to prepare the star pictures of selected and unselected effect, as shown below:

Selected: 

Unselected: 

Download the picture, create a new iamge folder in the %FR_HOME%\webapps\webroot\help\picture; and place the picture in the folder %FR_HOME%\webapps\webroot\help\picture\image.

2.2 Design the template

Create a new workbook, the template style is as follows, and the cells are all set to center aligned.

Among them, B2-F2 is the scoring area, and G2 shows the score.

2.3 Modify the cell style and shape of the scoring area

In order to display the status of no rating when the cell is initialized, we add a background image for the B2:F2 cell, namely staroff.png, as shown in Figure 1:

Set the formula form of cell B2:F2, enter the formula "", as shown in Figure 2:

2.4 Data entry attributes

Click [template]-[template web attributes]-[data entry settings] to add a loading end event to the template, as shown below:

$("td[row=1]").mouseover(function(){
	//row=1 means the second row
	var $td=$(this);
	var col=parseInt($td.attr('col'));
	if(col>0&&col<6){
		for(var i=1;i<=col;i++){
		$("td[row=1][col="+i+"]").css('background',"url(/webroot/help/picture/image/staron.png) no-repeat 50% 50%");
		};		
		for(var i=col+1;i<6;i++){
		$("td[row=1][col="+i+"]").css('background',"url(/webroot/help/picture/image/staroff.png) no-repeat 50% 50%");
		};			
	}
}).mouseout(function(){
	var $td=$(this);
	var col=parseInt($td.attr('col'));
	if(col>0&&col<6){
	    for(var i=1;i<6;i++){
		$("td[row=1][col="+i+"]").css('background',"url(/webroot/help/picture/image/staroff.png) no-repeat 50% 50%");
		};			
	var score=contentPane.curLGP.getCellValue('G2')*1;
	if(score>=1){
		for(var i=1;i<=score;i++){
		   $("td[row=1][col="+i+"]").css('background',"url(/webroot/help/picture/image/staron.png) no-repeat 50% 50%");
		};
	}
	}
}).click(function(){
	var $td=$(this);
	var col=parseInt($td.attr('col'));
	if(col>0&&col<6){
	var score=parseInt($td.attr('cv'));
	contentPane.setCellValue('G2',null,score);
	}
})
Show Code

2.5 Preview effect

Save the template and click [Data entry preview]:

Dynamic star rating.cpt