<< Click to Display Table of Contents >> Current:  Script  Component Script

Many times, users want to dynamically modify the properties of a component through a script and bind data sources. The script runs before the component is executed. By changing an attribute, you can hide a part.

A script is defined for the component. When the component is refreshed, the script is run. The script of the component is the same as the script on the dashboard. It has functions that are supported on the top scope and on the scope of the dashboard, objects, and constants.

In fact, the components on any dashboard can be accessed through scripts. However, scripts that modify other components through scripts on a component are not recommended and may cause confusion in the dependencies.

 

❖Open method

Select the component and select the script in the Setting of the right panel to open the component's script dialog. As shown below.

➢For Example: Select the Pivot Click the script in the right panel => Settings. The result is the dialog box as shown in the figure below. The script folder corresponding to the pivot is expanded. The folders of other components are closed. The user can enter the script.

 

❖basic concept

This section describes the basic concepts used by the script.

•Access component properties

You can access a component by its name. For example, "Table1" is the name of a table component. For example, Table1.width = 100.

If there are spaces or other special characters in the component name, you need to enclose the name in quotes and access it as a property of dashboard. This dashboard is a reference to the current dashboard. For example, db["Table1"].width = 100. This sentence is equivalent to the above script, which is to modify the width of Table1.

•Scope

In Yonghong Z-Suite's scripting environment, it contains multiple levels of scope. For the objects in the dashboard, there are several levels of scope:

oTop scope

oDashboard scope

oComponent scope

When a symbol is used in a script, it first checks its scope. If not found inside the component, check the scope of the dashboard and finally the top scope. This means that when accessing attributes, it is also possible not to take component names.

For example, you need to set the height of Table1 to 200 pixels. You can select this component, open its script dialog, and write height = 200 directly in the script dialog. If you add a script to the dashboard, you can only access it by the component name: Table1.height = 200. The two methods for adding scripts are equivalent, and they all modify the height of Table1.

•Script execution order

A dashboard has many components, each of which can introduce scripts, and it is also possible to access the properties of other scripts in a component's script. The final execution of the script is controlled by the execution timing. If you modify the same attribute, which script was last triggered, the final effect is affected by it. For example, the background color of Table2 is modified on Table1, and its own background color is modified on Table2. The final result depends on whether Table1 is executed later or Table2 is executed later. If Table2 is executed last, the modified background color in Table2 is displayed.

The following rules are the criteria used to judge the execution order of scripts in the life cycle of a dashboard:

oThe script that was run at load was the first to execute. This script is defined on the dashboard.

oThe user is required to input parameters through the input box.

oThe query data of all components is executed.

oThe script on the component is executed.

If at the dashboard level, the script is defined in the script "On Change".

oWhen there is any change on the dashboard, the script that was set to run at the time of the change is executed.

oFinally, execute the script on the component.

•The level of the script

The properties of the component can be accessed through a script and the method can be called. You can modify the different levels of content of a component.

For example for a chart component:

1.Modify the display of the chart by modifying the properties, formatting, hyperlinks and other scripts. The data binding at this time is not modified.

2.By modifying the script of axes, markers, legends, and other information, adding fields, you can modify the binding information. This will affect the output of the data. Change the city field to the country field. The data is completely different.

3.Modify the data and drawing information by directly modifying the data and the script of the BChart and other information. At this point, there is no need for binding information on the component to draw a graph. The difference with 2 is that 2 needs to have bindings and generate data through bindings. And 3 can directly execute a query and put back the query result as the data of the chart. This usage restricts the interactive behavior of the chart and is mostly used for table rendering. For example, all the grids in a column are displayed by charts, and the sales trend lines in each dimension are drawn.

 

❖Modify the properties of the component

All components have some common attributes, such as foreground color, background color, height and width, position, visible, available, font, font size, and so on. When you define properties for a component in the editing area, you can refer to the object's properties through the tree list.

•Application examples

1. There is a table component as shown in the figure below.

2. Open the script dialog for the table component, and enter the script:

var loc=new Locator(["PRODUCT"],CELL,DETAIL);// Select PRODUCT column

var color=new Color(java.awt.Color.red);// Set color

Table1.setBackground(loc,color);// Add a background color to the PRODUCT column

3. The operation result is shown in the following figure.