Managing Advanced Pages

Setting Watermarks for Advanced Pages

You can add watermarks to mark ownership, status, and details on advanced pages. Keep it minimal for a clean look.

1. Log in to the application designer by referring to Logging In to the Application Designer.
2. In the navigation pane, choose Page.
3. Move the cursor to of the corresponding advanced page, and choose Settings.
4. On the Watermarks tab page, set parameters by referring to Table 1 and click Save.
   Figure 1 Watermarking
   
   Figure 2 Effect
   

   Table 1 Parameters for adding a watermark

   Parameter	Description
   Watermark	Whether to enable the watermark function for the page.
   Re-render	Enable this function when you need to set a full-page watermark.
   Content	Sets the watermark content.
   Length	Length of the watermark rectangle.
   Width	Width of the watermark rectangle.
   Position of X Axis	Horizontal start position of a single watermark on the page. This parameter can be set only when Re-render is disabled.
   Position of Y Axis	Vertical start position of a single watermark on the page. This parameter can be set only when Re-render is disabled.
   Color	Watermark font color.
   Size	Watermark font size.
   Rotation Angle	Watermark rotation angle. The value ranges from -180 to 180, indicating that the watermark is rotated 180 degrees counterclockwise or clockwise.
   Opacity	Transparency of the watermark.

Setting Basic Information About Advanced Pages

You can modify the basic information, such as name, path name, and title of advanced pages.

1. Log in to the application designer by referring to Logging In to the Application Designer.
2. In the navigation pane, choose Page.
3. Move the cursor to of the corresponding advanced page, and choose Settings.
4. On the Basic Settings tab page, modify parameters and click Save.

   Table 2 Parameters for setting basic information on an advanced page

   Parameter	Description
   Name	Advanced page name, that is, the name set when the advanced page is created. You can change the name as required. The naming requirements are as follows: Value: 1–100 characters. Start with a letter and can contain letters, digits, and underscores (_). Consecutive underscore (_) is not allowed.
   URL Name	The path name should match the advanced page name and can be modified. The naming requirements are as follows: Value: 1–100 characters. Start with a letter and can contain letters, digits, and underscores (_).
   Title	Advanced page title, that is, the label set when the advanced page is created. You can change the name as required.
   Description	Description of the advanced page.
   Keywords	This parameter is used to interact with APIs.
   Stretch	Select this parameter to expand the advanced page width to 100%, ensuring full browser or device visibility. The widget content width will automatically adjust to fit the container. This parameter is deselected by default.
   Zoom & Move	Indicates whether a widget can be zoomed in or out or dragged on a released advanced page. This parameter is deselected by default.
   Customizable	Indicates whether the advanced page can be imported from the dependent application in the add-on application. This parameter is deselected by default.
   Browser Cache Expiry (Day)	Interval for refreshing the browser cache, in days.

Publishing an Advanced Page As a Template

After an advanced page is developed, you can publish the page as a template. After the advanced page is released as a template, the developer himself, developers of Huawei ID registered with Huawei Cloud Astro Zero, and other Huawei Cloud Astro Zero developers under the HUAWEI ID can directly use the template to create advanced pages.

1. Log in to the application designer by referring to Logging In to the Application Designer.
2. In the navigation pane, choose Page.
3. Click the corresponding advanced page. The advanced page design page is displayed.
4. Click . The page for publishing a page template is displayed.
5. Enter a name and description.
   Figure 3 Publishing as a page template
   

   Table 3 Parameters for publishing a page template

   Parameter	Description
   Name	Name of the template to be published. The value can contain letters, digits, underscores (_), and hyphens (-).
   Description	Description of the template. Value: 1–255 characters.

6. Click Publish.
   After an advanced page is published as a template, you can create a page based on this template and manage this page template.

   • Create an advanced page based on the advanced page template.
     You can create an advanced page based on an existing template.

     Figure 4 Selecting a template to create an advanced page
     
   • Preview or delete an advanced page template.

     On the Astro Zero environment configuration page, choose Maintenance > Global Elements > Page Assets > Page Templates to preview or delete templates. For details, see Managing Page Templates.

Cloning an Advanced Page

You can clone an advanced page to an application. For example, if application A contains advanced pages with similar functions, you can clone one advanced page to make a new one. This allows you to editing the clone without starting the creation process over.

1. Log in to the application designer by referring to Logging In to the Application Designer.
2. In the navigation pane, choose Page.
3. Move the cursor to of the corresponding advanced page, and choose Clone.
4. Complete the configuration and click Confirm.

   After the clone is successful, the cloned advanced page is displayed.

Deleting an Advanced Page

If an advanced page in an application is no longer used, you can delete it from the application to prevent it from occupying the resource quota of the account.

1. Log in to the application designer by referring to Logging In to the Application Designer.
2. In the navigation pane, choose Page.
3. Move the cursor to of the corresponding advanced page, and choose Delete.
4. In the displayed dialog box, click Confirm. Then the advanced page is deleted.

Managing Page-level Data Sources and Global state

You can configure events and actions for interactions between page widgets. For a large number of widgets, managing these individually can be complex. To simplify, apply a global state that updates data across all page widgets automatically.

Advanced pages offer a global state feature that facilitates data sharing among page widgets. This centralized mechanism ensures widget state changes are consistent and follow predefined rules. The global state serves as a common data pool accessible to all page widgets, regardless of their position. It is designed as a private entity, ensuring data integrity and security. To modify the global state, use the this.$mstore.dispatch method within the JavaScript file of any widget.

NOTE:

Question: When is the global state necessary?

Answer: Use the global state when page widgets require frequent interaction with each other. It simplifies the coordination of state across all widgets on the page.

1. Log in to the application designer by referring to Logging In to the Application Designer.
2. In the navigation pane, choose Page.
3. Click the corresponding page to go to the advanced page development page.
4. In the upper right corner of the page, click to define the global state.

   Use JavaScript to define the global state. TypeScript is not supported. MStore is the name of the global state structure. With one global state instance per page, it enables easy retrieval of the current state snapshot for widget debugging. The global state structure consists of the following parts:

   • state: Sets the initial data for all page widgets, serving as the starting point for the shared state.
   • mutations: The only way to change the state is by committing a mutation. Each mutation must be defined to map state changes to views. Mutations are synchronous and receive the entire object as a payload.
   • actions: Handle state data changes, linking state with mutation. Actions can include asynchronous operations and are typically used for status binding, widget interaction, and service calling.

5. In the JavaScript file of a page widget, use the preset this.$mstore.dispatch () method to modify state data.