I’m struggling to understand the hierarchy when binding data in WeWeb. Specifically, I’m confused about when to use the pencil (design tab) bindings versus the “fine-tuning” icon (with two vertical lines and dots).
For example, in a Kanban board, if I want to display a lead’s contact card inside each Kanban column, I’m unsure where to bind the data—whether to the card, the container, or the text elements inside the card.
What do the different color data code snippets mean? For example, xano seems to be blue, the page content seems to be green and sometimes I see purple.
I am also having a really hard time showing one lead per card (in a kanban board) I can only get all the leads to show at once in a single card.
If I could wrap my head around this data binding concept, I would be the happiest man on the planet.
I am willing to pay someone to get on a screen sharing call to show me these concepts. I am available for that literally anytime.
Could someone clarify when to bind data in the pencil design tab versus the fine-tuning settings? and when to bind to the container vs the text. Any guidance would be greatly appreciated!"
Difference between the Design tab and the Settings tab.
Practically speaking, there is no real difference between the two. Think of these tabs as a way to arrange or divide certain properties of an element. Built-in elements will have their properties already placed in one tab or the other. The WeWeb team tries to always place visual properties of an element in the Design tab and logic-related or functional ones in the Settings tab. When you create your own components, you can place any property in whichever tab you like.
Where to bind the data—whether to the card, the container, or the text elements inside the card?
This will depend on how your data is structured. For your Kanban example, let’s imagine you have an array of cards like this:
[
{
"title": "Design Homepage",
"description": "Create the layout and design for the homepage, including header, footer, and main sections.",
"due_date": 1740144000,
"status": "To Do"
},
{
"title": "Implement Login System",
"description": "Develop the user authentication system with login and signup forms.",
"due_date": 1740748800,
"status": "To Do"
},
{
"title": "Write API Documentation",
"description": "Document the endpoints and structure for the new API integration.",
"due_date": 1741353600,
"status": "In Progress"
},
{
"title": "Bug Fixes for User Profile",
"description": "Fix bugs related to user profile settings and profile picture uploads.",
"due_date": 1741958400,
"status": "Completed"
}
]
In this example, you should map the entire array to the element that contains the cards, such as the column. This will make the column display a card for each element in the array. Then, you can select one card and map each value to an element, such as the title, description, and more.
What do the different color data code snippets mean?
Xano is blue because it is a collection.
Variables and page content are green.
Elements from a looped array are purple.
It’s just a way to visually differentiate them.
Please let me know if this helped you! Wishing you the best for your project!
