JS Set Dynamic Background and Dynamic Borders

1.1 Requirement

In the designer, only static images in png or jpg format can be inserted. How can we insert a GIF image?

1.2 Solution

You can set dynamic background through JS and set dynamic borders using the function WEBIMAGE().

In this section, you will learn how to add GIF dynamic background to a decision-making report.

2.1 Have an image ready

Have a GIF image ready, put the GIF image in the folder %FR_HOME%\webapps\webroot\help\picture and name it as 1.gif, as shown below:

2.2 Add an After Initialization event

Select File>New Decision-Making Report, choose [body] in the widget list and add an After Initialization event, as shown below:

Input the JS code:

setTimeout(function() {
       $('.content-container').css({
              'background': 'url(/webroot/help/picture/1.gif)no-repeat',
              'background-size': '100% 100%'
       });
}, 1000);

Note

Note1: The image should be put on the server and the URL address should be the exact address of the image.

Note2: Please delete any space after the copied code, or there will be a syntax error

2.3 Preview the template

Save the template and the preview effect is shown as below:

In this section, you will learn how to add GIF dynamic background to a regular report.

3.1 Have an image ready

Have a GIF image ready as the background and as in Example 1, put the GIF image in the folder %FR_HOME%\webapps\webroot\help\picture and name it as 1.gif.

3.2 Add a Load End event

Select File>New Regular Report, choose Template> Web Attributes>Pagination Preview, add a Load End event, as shown below:

Input the JS code:

setTimeout(function() {
    $('.content-container').css({'background': 'url(/webroot/help/picture/1.gif)no-repeat','background-size':'100% 100%'});
}, 1000);

3.3 Preview the template

Save the template and click Pagination Preview. The preview effect is shown as below:

In this section, you will learn how to display dynamic borders in a decision-making report.

4.1 Create a new template

1) Create a new decision-making report, set the layout type of body as Absolute Layout and the scaling mode as Area Fit, as shown below:

4.2 Add dynamic borders

1) Drag a report block into the template, click [Edit] and call the image using the formula webimage in the cell. In this way, the gif image is added to the report block.

For example:=WEBIMAGE("http://localhost:8075/webroot/help/picture/2.gif"), as shown below:

2) Set left and right indentations as 0, as shown below:

3) Then superimpose it around the components which need borders (in this case, Module 1 and Module 2). In this way, dynamic borders will be displayed.

4.3 Preview the template

Save and preview the template. The preview effect is shown as below:

5.1 Set dynamic background for a decision-making report

5.2 Set dynamic background for a regular report

5.3 Set dynamic borders

6.1 Templates

Set Dynamic Background and Set Dynamic Borders_1.frm

Set Dynamic Background and Set Dynamic Borders_2.cpt

Set Dynamic Background and Set Dynamic Borders_3.frm

6.2 Background image in GIF format