I. Overview
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().
II. Set dynamic background for a decision-making report
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:
III. Set dynamic background for a regular report
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:
IV. Set dynamic borders
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:
V. Preview
5.1 Set dynamic background for a decision-making report
5.2 Set dynamic background for a regular report
5.3 Set dynamic borders
VI. Download templates
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