# Add Collections To UI

Agregar colección a la interfaz de usuario es una función en las funciones de [elementos](https://docs.apphive.io/reference/funciones/elements) que permite crear listas de elementos y modificar utilizando los registros en los datos de la [base de datos.](https://docs.apphive.io/reference/funciones/elements/add-collections-to-ui)

![](/files/-M-jvDRgKfs5n_UM6XKR)

### 📥 Entry vars (Variables de entrada) <a href="#entry-vars" id="entry-vars"></a>

* **Enable horizontal:** puede seleccionar para ver su lista de forma horizontal
* **List data:** seleccione la salida para recuperar la lista.
* **List instructions.**
* **Modify element:** abre un modificador en los elementos de tu lista.
* **List reverse:** cambiar el orden de los elementos de la lista.
* **Scroll inverted:** cambiar la dirección del desplazamiento en la lista.

### 👉 Ejemplo. <a href="#examples" id="examples"></a>

![](/files/-M2o_6Wzritf0NvDECMS)

**Utilice el elemento de la base de datos**.

1. Activate the [get database data](/apphive-documentacion/reference/funciones/cloud-database/get-database-data.md) and open database path.
2. Add a collection "Driver list"
3. Add fields "address, name, phone number, photo and plates"
4. Push the button view data
5. Press the button Add to add a record to "Driver list".

#### Add a collection to UI.

1. Add a collection to UI in the callback of the get [database data](/apphive-documentacion/reference/base-de-datos.md) when data obtained.
2. Select the previous output get database data in the list data.
3. Click on the button [modify elements](/apphive-documentacion/reference/funciones/elements/modify-control.md).
4. Select a container with elements to modify.
5. Click on list data and select the element to modify.
6. Select a control property to change like text.
7. Open the list context and write the name of the element to show in the database.

![Reload the page to check the modified elements in your list.](/files/-M2oayHKbGUWjDB5peH7)


---

# 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.apphive.io/apphive-documentacion/reference/funciones/elements/add-collections-to-ui.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.
