Configuring Widgets

In widget settings, you can manage all widgets used in the current project.

Configuring Widgets

Log in to Huawei Cloud Astro Canvas by referring to Logging In to Huawei Cloud Astro Canvas.
On the Projects page, click a project to access.
On the main menu, click the Project Settings tab.
Obtain a project lock by referring to Setting a Project Lock.
In the navigation pane, choose Widgets.
Click Local Debug.

It is inefficient to develop a widget locally and pack and upload it to the public environment before you check the display effect of the widget. These settings enable you to debug widgets online in real time by connecting the local and public environments.
Click Check Upgrade to check whether a new version is available. If yes, click Upgrade All.

You can also click next to a widget to upgrade it.
Toggle on Enable Simulated Data to centrally control the data sources for all widgets in the project.

Widget data can be obtained from mock data or service interfaces. You can choose a mode by enabling or disabling this function.

During the development of frontend pages, bridges are often used to call backend APIs to obtain backend data. In the case where the backend APIs are not ready, you can edit bridges to obtain static data for debugging. However, it will be time-consuming if you edit the bridge of each widget one by one when there are many widgets. This function frees you from the trivial task. You can enable all bridges in the current project to use mock data without changing the bridge settings (meaning that the bridges are still configured to call backend APIs). You can also enable or disable the use of mock data for individual widgets by turning on or off the switch icon in front of each widget in the widget list.

How this function works: The mockData property is added to the bridge code to record whether the use of mock data is enabled for the bridge. The getMockData function is preconfigured in the parent class code of the bridge. You only need to overwrite the getMockData function of a custom bridge to implement the logic for obtaining mock data. When Enable Simulated Data is enabled, the mockData property will record the enablement, and the getMockData function will overwrite the bridge configurations of calling backend APIs and use the mock data instead. When the debugging is complete, you must toggle off Enable Simulated Data.

An example code of the getMockData function:
```
getMockData: function() {
	return new OverlaysDataViewModel();
},
```