Implementing Image Display and URL Redirection with the Banner Widget on Advanced Pages

Expected Results

The banner widget on an advanced page is used to automatically switch between multiple images. You can also add a hyperlink to an image, so you can click the image to go to the specified website.

Implementation Methods

1. Create a low-code application.
   1. Apply for a free trial or purchase a commercial instance by referring to Authorization of Users for Huawei Cloud Astro Zero Usage and Instance Purchases.
   2. After the instance is purchased, click Access Homepage on Homepage. The application development page is displayed.
   3. In the navigation pane, choose Applications. On the displayed page, click Low-Code or .

      When you create an application for the first time, create a namespace as prompted. Once it is created, you cannot change or delete it, so check the details carefully. Use your company or team's abbreviation for the namespace.

   4. In the displayed dialog box, choose Standard Applications and click Confirm.
   5. Enter a label and name of the application, and click the confirm button. The application designer is displayed.
      Figure 1 Creating a blank application
      

      Table 1 Parameters for creating a blank application

      Parameter	Description	Example
      Label	The label for the new application; Max. 80 characters. A label uniquely identifies an application in the system and cannot be modified after creation.	My first application
      Name	Name of the new application. After you enter the label value and click the text box of this parameter, the system automatically generates an application name and adds Namespace__ before the name. Naming rules: Max. characters: 31, including the prefix namespace. To prevent duplicate data names among different tenants, each tenant must define a unique namespace when first creating an application. A tenant can only create one namespace, and once it is created, it cannot be modified. Start with a letter and use only letters, digits, and underscores (_). Do not end with an underscore (_).	A

2. In the navigation pane, choose Page, and click + next to Advanced Page.
3. Click and drag the banner widget to the canvas on the right.
   Figure 2 Dragging the banner widget
   

4. Right-click the banner widget and choose Setting from the shortcut menu.
5. Click Config Banner and set the direction and image playback interval as required.
   Figure 3 Setting the banner widget
   
   Figure 4 Config Banner
   

6. Add an image and set the URL redirection.
   1. Right-click the banner widget again, choose Setting from the shortcut menu, and select Manage Images.
      Figure 5 Selecting Manage Images
      
   2. Click Add, select the desired image, and click Save.
   3. Select the added image and click next to the link in Image Settings on the right.
   4. Set the redirection URL and click Confirm.
      Figure 6 Adding a link
      

7. Click Confirm to return to the advanced page.
8. Click to save the advanced page settings. After the page settings are saved, click to release the page.
9. After the release is successful, click to preview.