New Adaptive Dashboard Plugin(Open Test)

1. Version

Note 1: This plugin only optimizes the design and presentation effect of PC templates for dashboards, and does not apply to cpt templates and frm mobile templates.

Note 2: This plugin has been adapted to official plugins, but it is not supported to be used in combination with third-party plugins. Chart(old version) plugins are not supported.

2. Application scenario

The dashboard is previewed on the PC, and the adaptive template is enabled to automatically adapt to browsers with different screen resolutions to display the results in accordance with the design.

3. Function introduction

• The new widget UI effect is adopted, the scroll bar style is optimized, and the visual experience of PC display of dashboard is improved.

• The report block design ruler for dashboards uses "pixel" units to align the design units inside and outside the report block.

• When designing templates, the body size (the design area of the dashboard) is fixed at 1:1 to the size of the component, which is no longer affected by the computer resolution.

• Design and preview should be as "what you see in the design is what you get in the presentation" as possible. The text newlines and truncations you see in the design of the template are the same as the newlines and truncations you see in the presentation, making it easy to debug the template to the best effect.

• PC Preview and developPreview are available. DevelopPreview displays the template in a fixed width/height ratio. The width/height ratio is not affected by the browser resolution. In developPreview mode, you can check whether the template is truncated or scroll bars occur.

• Built-in dashboard export function. By default, the dashboard is exported according to the specified width and height. You can customize the width and height to export templates.

• Parameter panel can manually enter the design height, and realize the zoom effect when preview.

• When the template is mounted on the decision platform for new adaptive preview, a suffix needs to be added to the URL. The suffix corresponding to the "PC side preview" method is &op=form_adaptive: the suffix corresponding to the "developer preview" method is &op=developer_preview.

• Custom picture is not supported for component borders in  component style.

1. Install the plugin

Click to download the plugin: Please contact technical support or other sail software personnel to obtain the plugin during open test.

Note 1: Please be aware of the risk that plugin may have minor problems during open test. However, because the new dashboard adopts new logic, the risk problem will not affect the original dashboard template and other functional modules;

Note 2: New reports show piece of logic decision statements are redesigned, when the template report block, there is a lot of new dashboard showing loading performance is better than the old decision statements, when the template report block is small, the new dashboard showing loading performance is lower than the old decision statements, statements of much more special template will be obvious difference, please be aware of this issue before trying the plugin.

Designer plugin installation method reference: Plugin Management

Server installation plugin method reference: Server plugin management

2. Template overall adaptive settings

Select Template > PC Adaptive Attr. The PC Adaptive Attr panel is displayed. As shown in the figure below:

The global configuration mode is the same as the original one. Refer to: Template Adaptive Attributes.

Note 1: The settings take effect for all templates.

Note 2: In both absolute layout and adaptive layout, the adaptive attribute of the template can be set here. The layout method does not affect the adaptive attribute.

Note 3: In the new and old operation interfaces, the modification of global configuration does not affect each other.

Logical description:

Adaptive attributes settings	Type	Effect	Description
Report Zoom Mode	Bidirectional adaptive (default)		The template fills the browser window size in both directions, rendering the content in one page at different screen resolutions.
	Horizontal adaptive		The template is scaled to the width and height of the browser window in the landscape. If a single page is not fully displayed at different screen resolutions, a scroll bar is displayed in the vertical direction.
	No adaptive		The template is displayed in the browser window as is based on the design resolution. If a single page is not fully displayed at different screen resolutions, a vertical or horizontal scroll bar is displayed.
Font	Adaptive (default)		The font size is scaled to match the scale of the template. Note: The font adaptive attributes settings apply to all component fonts in the template
	No adaptive		Fonts are displayed as they were designed.

3. Set the content display mode of the report block

After the report block enters the editing state, the "boundary dashed line" of the report block size is displayed. The scope of the report block content in the form is the content in the boundary dashed line, as shown in the figure below:

Note: When the cells outside the boundary dotted line have content (including content and format), horizontal or vertical scroll bar will appear. You can select the area outside the boundary dotted line and right-click Clear > All.

Select Report Block in the upper right corner. "The content is displayed" in Attributes. You can adjust the display effect of report block in report block. As shown in the figure below:

Logical description:

Settings items	Effect	Description
Don't automatically adjust (default)		In preview, the contents of the report block are output as is. Note: Vertical or horizontal scroll bars appear when the contents of a report block exceed the size of the report block.
The width of the block covered statements		The content of the report block is horizontally spread over the width and height of the report block. A vertical scroll bar may appear. Note: After selecting this item, if the font adaptor is enabled, the font scale of the report block may be inconsistent with the overall size.
The bidirectional block covered statements		The contents of the report block overlay the width and height of the report block in both directions. Note: After selecting this item, if the font adaptor is enabled, the font scale of the report block may be inconsistent with the overall size.

Other notes:

1) Cancel the display of "row number" and "column number" of the report block in the form under the old design mode.

2) Report block design ruler adopts "pixel" unit.

3) Under "Absolute layout", the body size (that is, the dashboard design area) is 1:1 to the component size.

4) Cells are not supported to automatically adjust the row height and column width according to the content.

4. Parameters pane settings

Drag the "Parameters Pane" into the dashboard to set the height of the parameters pane, as shown in the figure below:

Note: When a widget is added to the parameters pane, if the position of the widget at the bottom is greater than "Design Height" on the parameters pane, "Design Height" cannot be modified. You are advised to set a specific "Design Height" before adding widets.

5. Preview methods

After the plugin is installed, PC Preview and developPreview are added.

1) PC Preview

Function: According to the adaptive attribute configuration in the template, the preview mode of the final display effect is presented.

2) developPreview

Function: This preview mode checks for truncation or scroll bars and adjusts the template based on the preview effect.

Effect	Description	Application scenario
	Default is font adaptive, template width and height fixed scale effect. At different screen resolutions, the templates remain in their original proportions.	In this mode, you can view the actual display effect of the template if the report block cells contain formulas, references, or extensions. Note: White space will appear when the screen resolution and template resolution ratio are different.

Note 1: The developPreview effect is fixed to make up for the shortcoming that what you see is what you get in the designer. The preview method is not affected by the Template >PC Adaptive Attr.

Note 2: When there is no truncation or scrollbar in developer preview mode, there is no truncation or scrollbar in PC Preview when font adaptive and report bidirectional adaptive are enabled.

6. Multi-tab lazy loading and preloading logic

If there are many Tab blocks in the dashboard or a large number of add-ons in Tab blocks, all Tab blocks will be loaded at the first time if the template is loaded for the first time, which takes a long time to load the template for the first time.

In order to reduce the first loading time of multi-Tab templates for dashboards, plugin 1.9.8 added lazy loading and preloading logic. The details are as follows:

Note: Lazy loading and preloading are adaptive default logic for the new dashboard, and the front-end configuration switch is not provided, so the plugin is enabled immediately after installation.

Compatibility description:

• This function is implemented in the plugin. After installing the plugin, the lazy loading logic in the old dashboard will not be affected.

• This plugin is valid for server projects only. The remote environment takes effect if the plugin installed in the environment has this latest logic when it is designed remotely. If only the local plug-in has this logic but not the remote environment, lazy loading and preloading logic will not take effect during remote design preview.

The animation when loaded looks like this:

In order to make it easier for you to convert an old template to a new adaptive template, we provide the function of converting old and new dashboards. The operation steps are as follows:

Step 1: Open an old dashboard, and the old dashboard operation interface will be opened by default.

Step 2: Click the "Switch to new version" in the toolbar at the top of the designer to switch to the new dashboard.

Step 3: In the pop-up box, select whether to switch and click "Yes" button to complete the conversion of the old template to the new adaptive template.

Note 1: Open the old template and uninstall the plugin after switching to the new dashboard. The body size will change. Uninstalling the plugin after switching to the old dashboard does not change the body size.

Note 2: After you open the old template and switch to the new dashboard, the old template will be automatically backed up in the same directory.

Note 3: The settings of global configuration on the new and old dashboard operation interfaces are independent of each other.

By default, the exported content uses the width and height of the template design. You can customize the width and height of the exported content.

Note: To solve the problem that the export effect is too different from the actual effect of the report when the decision report is exported directly or by mail, the export effect has been optimized in version 2.0.0.

1. The URL is directly exported after suffixes are added

After the URL of the report preview, enter &export_format=pdf&width=1920&height=1080. By assigning a format to the export_format parameter, the URL can be exported directly.

Note: Other operations such as renaming are the same as before. See the reference: URL Export.

2. Export the dashboard with reference

See the document: Export Dashboard Plugin (Section III). The steps of adding URL suffixes need to be adjusted as follows:

Old: add &op=export&format=excel&sessionID=xx to the URL suffix

New: add &export_format=excel&sessionID=xx to the URL suffix

Note 1: Other steps of this method are consistent with the help document.

Note 2: This approach also allows custom width and height export, as described in IV.1 above.

3. Click button to export dashboard with parameters by JS

See the reference: Export Dashboard Plugin, adding click event to button needs to be adjusted, and the changes are as follows:

Modify before:

var REPORT_URL = '${servletURL}?viewlet=doc/frm/example.frm&op=export&format=excel&sessionID=' + aaa;window.location = encodeURI(REPORT_URL);

Modify after:

var REPORT_URL = '${servletURL}?viewlet=doc/frm/example.frm&op=form_adaptive&export_format=excel&sessionID=' + aaa;window.location = encodeURI(REPORT_URL);

Note 1: Other steps of this method are consistent with the help document.

Note 2: This approach also allows custom width and height export, as described in IV.1 above.

In some scenarios, you need to add the parameter op=form_adaptive, indicating a new adaptive adjustment.

1) When using a web iframe

2) Add hyperlink - Web report

1. Design report

1) Select body in the component management office in the upper right corner of the template, and set Layout Type to Adaptive Layout in the Attribute below.

2) For all report blocks in the template, the default value of "The content is displayed" in the Attribute is "Don't automatically adjust".

3) On the page that is displayed, choose Template >PC Adaptive Attr, uncheck Use Global Config, set Font to Adaptive, and report scale method to Bidirectional Adaptive.

4) Use "PC Preview" to view the display effect of the template.

2. Preview effect

3. Download template

Click to download the completed template: New_Adaptive.frm