The Properties Pane

The Properties pane (the vertical tab along the right-most edge of your browser) displays the properties of a component that is currently selected on the canvas or in Code view and can be used to set metadata attributes such as ID, display name, and description. It also provides various properties to customize a component's layout, style, and behavior.

Component properties are organized in tabs in the Properties pane and can vary depending on the component. For example, here's the Properties pane of an input text component, showing the General, Data, Events, and All tabs; some components such as a table or list view collection component have an additional Quick Starts tab:

Description of the illustration component-properties-pane.png

Here's an overview of what you can do in the different tabs:

Component Properties	Description
General	Contains the most important properties of the selected component, such as layout and style. The slot value of a component inside a parent component's slot also shows here. Select the sub-component added to a slot (for example, a button's icon) and change its slot value to move it from the startIcon slot to the endIcon slot. This way, you can modify the slots of dropped components without accessing the HTML code. The slot used by the sub-component is also visible in the sub-component's All tab and can be modified there (for example, to bind it to a variable).
Data	Contains properties that are expected to be bound to data. The General tab and All tab also contain properties that can be bound to variables and expressions.
Events	Used to bind a component’s events to trigger action chains that define its behavior (for example, to open a URL when a button is clicked). See Start an Action Chain From a Component.
All	Contains more advanced component properties and shows all properties, including custom properties. Custom properties are those not defined in component metadata, for example, data-* attributes, and can be added by clicking + next to General Attributes.
Quick Starts	Contains a list of Quick Start wizards available for the component. When you add a collection component such as a table or list, this tab contains a list of wizards to help you add some actions that are typically associated with the component, such as mapping the collection to data and adding Create and Detail pages.

You can toggle Properties to hide or show the Properties pane.