This topic describes how to register, debug, release, and delete components.
Background
Quick BI custom components have two statuses: Running Status and Hidden Status.
Status
The running status of a custom component varies based on the development mode of the component. You can use the Custom Component console to manage the running status of components. You can choose Open Platform > Custom Components.
Online editing
To be published-The status of just registered, or has been published and the information has been modified, but has not been synchronized to online.
Published-The status of the online running.
Professional Mode
Developing-The state in which the development package is registered but not uploaded.
To be published-The development package is uploaded, or has been published and the information has been adjusted, but has not been synchronized to the online state.
Published-The status of the online running.
You can manage the running status of components on the Custom Components console.
Register a component
After you log on to the Quick BI console.
On the Quick BI homepage, the organization administrator registers the component by following the instructions shown in the following figure.
NoteThe development mode supports online editing and professional mode. You can select a mode based on your business requirements.
For more information, see Mode 1. Online development and Mode 2. Local development.
In the Register Component dialog box, set the following parameters.
Interface parameter description
Parameter
Example
Component name
You can customize the widget name.
Icon
You can upload an image from a local device as the icon of a widget.
NoteThe image resolution must be greater than 60 pixels × 60 pixels and less than 180 pixels × 60 pixels.
The size of the image that you upload cannot exceed 100 KB.
Type
You can add a chart type, chart card menu type, or workbook menu type widget.
Applicable scope
The scope of the widget. You can add custom widget of the chart type to dashboards, dashboards, and workbooks.
Development models
Online editing: Edit and debug on the page, which is suitable for most scenarios.
Professional mode: You can use SDKs for local debugging. This mode is suitable for more professional scenarios.
Debug Address
The address used to debug the custom component.
NoteThe debugging URL is required only in Professional Mode.
Tool
Supports the platform for adding custom components, and supports PC and mobile terminals.
Enable ShadowDOM
When enabled, the component dom enables the ShadowDOM mode.
Default Width and Height
Set the width and height of the custom component.
Dependent third-party libraries
Optional. Enter a Alibaba Cloud Content Delivery Network address to improve the performance of the component.
Region ID
Add comments to the custom component.
Click OK.
You can view the newly registered component on the Add-ons page.
Edit components.
In the Add-ons section, click the
icon. 
In the Modify Component dialog box, modify the parameters.
Online editing
You can modify the widget name and icon. For more information about the parameters, see Manage custom widgets.
Professional Mode
This example describes how to upload a development package.
For more information about other interface parameters, see Manage custom components.
Click OK.
After the modification is completed, the component enters the state to be published. In the professional mode, the development can export the component package by executing the npm run pack in the seed project.
component-debugging
You can follow the instructions in the following figure to debug components.
In Online Edit, you can use the following debugging environments:
Online development environment-The component source code can be edited online, and other configurations are configured in the package to be published.
Environment to be published-Component resources are read from the package to be published. Other configurations use the configuration to be published.
Online environment-Component resources are read from published packages. Other configurations use published configurations.
In Professional Mode, you can debug components in one of the following modes:
Local debugging: Component resources are obtained from local services. This method is suitable for local development after component registration.
To-be-released package debugging: Component resources are obtained from the to-be-released package and are suitable for previewing before being released.
Release package debugging: Component resources are obtained from online and used to view hidden components online.
In local debugging, make sure that the component local service has been started.
In debugging mode, custom components of a dashboard are displayed in the menu bar. That is, the hidden state of the components becomes invalid.
In debugging mode, dashboards can be saved but cannot be published.
In the Debug widget dialog box, select the Debug Scope, Workspace, and dashboard that you want to debug, and then click Debug. The dashboard appears. For more information, see Debug a widget.
Display /hide component
Indicates whether custom widgets can be created in a dashboard. The two types of custom widgets are:
Hide: Added widgets cannot be displayed in the menu bar of the dashboard, nor can they be switched to charts. However, previously saved charts can be displayed.
Display: The added widget can be displayed in the menu bar of the dashboard. You can also switch between charts.
On the dashboard, the portal of the widget is displayed or hidden.
If you modify the display status of a widget, the widget does not enter the Pending Release state.
If the component is in the Developing state, the component is always displayed.
Publish a widget
Online editing
On the Add-ons page, find the Pending component and click the Publish icon to publish the component.
In the Publish widget dialog box, confirm the changes and click Confirm.
The component enters the Published state.
You can click View Code Comparison to view the code changes.
Professional Mode
Before you publish a component, make sure that you have uploaded the development package. For more information, see Upload the development package.
On the Add-ons page, find the Pending component and click the Publish icon to publish the component.
In the Publish widget dialog box, confirm the changes and click Confirm.
The component enters the Published state.
Deletes a component.
On the Add-ons page, find the add-on and click the Delete icon to delete the add-on.
After a component is deleted, the following impacts occur:
You cannot add a chart based on this custom component.
If the custom widget is saved in the previous chart, the widget cannot be displayed, and the chart metadata is abnormal or deleted is displayed.
