> For the complete documentation index, see [llms.txt](https://readme.directual.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://readme.directual.com/api-integrations/other-integrations/interface-builders/integration-with-bubble.io/displaying-data-on-bubble-from-directual.com.md).

# Displaying Data from Directual on Bubble

## Prepare Directual (structure and API endpoints)

For example, let's create a structure called "tasks" with the following fields: id, name, and task.

Go to the database and click "New Data Structure". Insert the name and sysname as "tasks" and then click "Save and go".

On the page for this structure, click "Configure to field" and create two fields: "name" and "task".

![](/files/-Maid_8L45YXUtAFBtIk)

Next, go to the **API** section and create a new endpoint, with the ability to read **id, name, task.** 

{% hint style="info" %}
Note: Set up a new security layer, and remove all conditions in the layer. The default condition, "not empty," means that the API layer requires only authenticated users.
{% endhint %}

![Example API Endpoint for reading tasks.](/files/-Malvv1MB4F7fdNU-hzC)

Click on "Endpoint respond preview" and, after saving, copy the API Endpoint URL for use in Bubble.

![](/files/-MalwFN8BDiLvK2SUGfS)

![Respond preview: copy URL to buffer](/files/-MalwQtoFgosmpxjxE31)

## Prepare Bubble

Go to "Plugins" -> "API Connector" and click "Add another call". Create a new API endpoint proxy like this:

![](/files/-MalwqAJEs5lvKa1-p4q)

## Creating view on Bubble

Add a button called "Load data"

Add "Repeating Group"

 

![](/files/-Malxb4kQwW6NHgxiaWt)

![](/files/-MalxpBjJRzF3B4f-TWU)

Move "Visual Element"->Text to "Repeating group"

Setting Repeating group

![](/files/-Maly_sPu8s2u399g_Cd)

![](/files/-MalyhAtV1Ygy-aPCtCj)

![](/files/-Malyjl2_L1XxgweUHlB)

![](/files/-MalypyCnJwuGZaRr9AW)

![](/files/-MalysbFvi9pl5Fsu_q1)