Drawer

Example

When a user clicks a device, a details panel for the device slides in from the right.

Step 1: Add the component

1. Create a web application. For more information, see Create a web application.

2. In the web application editor, click the component icon on the far left.

3. Above the component list to the left of the canvas, enter Drawer in the search box, and then drag the component onto the canvas.

   For more information about adding components, see Add a component.

   You can also click Drawer.

   After adding a drawer template, the editor enters drawer edit mode. A blue message bar at the top indicates that you can click outside the canvas to exit drawer editing. The canvas displays the content of the selected drawer template, while the right-side panel is for configuring the drawer's style parameters.

(Optional) Step 2: Configure the data source

If you set the data source of a component inside the drawer to Parent Component Data Source, you must first configure a data source for the drawer component.

1. In the Style panel on the right side of the web application editor, click Configure Data Source next to Display Data.

2. In the Data Source Configuration panel, select a data source type and complete the configuration.

   Available data types include Device, API, and Static Data.

3. Click OK.

Step 3: Configure internal components

You can use a drawer template as-is or customize the components inside the drawer.

1. From the component list, drag the required components into the drawer component, and then configure the style of each component.

   For detailed instructions on component configuration, see the topics for each component under Web Visualized Development > Components.

2. Click each component in the drawer to configure its data source.

   How you access the data source configuration page varies by component. For details, see the topics for each component under Web Visualized Development > Components.

   Note

   If you select Parent Component Data Source for a component inside the drawer, it uses the data source configured for the drawer component.

Step 4: Configure style

1. On the Style tab in the panel on the right, configure the display styles for the drawer component.

   Parameter	Description
   Style	Sets the drawer's position, margins, and mask. Note A mask blocks interaction with the rest of the page, which keeps the user's focus on the drawer component.
   Title	Sets the title text and display style for the drawer component.
   Action Button	Sets the button layout, primary button text, secondary button text, and button styles.

2. Adjust the component's position on the page. For more information about general component style settings, see Configure styles.

Step 5: Configure interactions

1. On the Interaction tab in the panel on the right, click Add Interaction, and then set the Event and Action.

   This component supports the On Primary Button Click event. For example, you can configure the Show/Hide action to trigger when the primary button is clicked. This action displays a hidden component with more detailed information.

   For detailed instructions, see Interaction Configuration.

2. Click Preview in the upper-right corner of the page to view and debug the component's data and style.