Customizing the Toolbar Position Through JS

Version

Expected Effect

The report toolbar is left-aligned by default, and you can center the toolbar or align the toolbar to the right. The following figure shows the preview effect of CPT reports.

Implementation Method

You can change the position of the toolbar by adding a JS event.

For details about JS APIs related to the toolbar, see Toolbar API.

Template Design

Open the built-in template LineForm1.cpt in the %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Form\LineForm path.

Event Addition

Choose Template > Web Attribute > Pagination Preview Setting, set Following Settings to Set for This Template Separately, and add a Loading Start event, as shown in the following figure.

The JS code to center the toolbar is as follows:

_g().getToolbar().toolBarFloat('center');

The JS code to align the toolbar to the left is as follows:

_g().getToolbar().toolBarFloat('left');

The JS code to align the toolbar to the right is as follows:

_g().getToolbar().toolBarFloat('right');

Effect Display

Save the template and click Pagination Preview. The following figure shows the effect.

Note:

The effect cannot be previewed on mobile terminals.