# Understanding the components panel

In the ***component panel,*** following tabs are visible:

![](/files/-MAesgl0AoHtn8AAiXKj)

| **Tab**        | **Description**                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Tree**       | <p>You can view the skeletal (tree) structure of all the components added to the page, as per hierarchy.</p><p><em>By default, <strong>page</strong> is the first component that is visible in the tree. All other components are added only to the page.</em></p>                                                                                                                                                                                                                                                                                                                                |
| **Properties** | <p>You can view and edit the properties of the components added. As per their functionality, you can change their properties to suit the UI of your application.<br>For example, for a Card Header, you can select an icon and the background color, whereas for a Slide Toggle component, you can set the component position.</p><p><em>The properties under the <strong>Standard</strong> section are common to all the components. Refer to</em> <a href="/pages/-MHWbdwnlpYX050w6vQz"><em><strong>Understanding the standard properties of components</strong></em> </a><em>section.</em></p> |
| **Components** | You can view and add the components available under the selected component.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| **DS**         | <p>You can view the attributes of the table added to the data source linked to the datastore. You can also select and add the attributes to certain components.</p><p><em>If a data source is not linked to the datastore, you can view the list of all existing data sources.</em></p>                                                                                                                                                                                                                                                                                                           |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.cloudio.io/creating-pages/working-with-pages/working-with-page-components/understanding-the-components-panel.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.