Attributes and Attribute IDs

What is an Attribute?

An attribute represents a specific piece of data associated with an entity in Data Modeler. It defines the type of information an entity holds, such as text, numbers, images, or colors.

Example:

Consider an entity called Employee with the following attributes:

{
"Decimal Tech" :[
  {
    "EmployeeID": "E001",
    "Name": "John Doe",
    "Age": 30,
    "Profession": "Software Engineer"
  },
  {
    "EmployeeID": "E002",
    "Name": "Jane Smith",
    "Age": 28,
    "Profession": "Data Scientist"
  }
]
}

Here, EmployeeID, Name, Age, and Profession are attributes. Each attribute holds a distinct type of data.

What is an Attribute ID?

An Attribute ID is the identifier used to link UI elements in vDesigner to data stored in an entity. In vDesigner, the attribute name itself serves as the Attribute ID. This ensures that UI components dynamically fetch and display the correct data without requiring manual mapping.

Example:

In the above example, “EmployeeID“, “Name“, “Age“, and “Profession” are Attribute IDs.

Instead of using a system-generated ID, vDesigner directly uses the attribute name as the Attribute ID.

There are two types of Attribute IDs based on their usage context:

1. List Attribute ID

A List Attribute ID is used to bind an attribute from an entity to UI elements within a List Element. This enables dynamic data retrieval from the linked entity.
When users drop elements such as form controls, text elements, or media elements into a List, they can bind these elements using the List Attribute ID property.
Example Use Case:

A developer wants to display a list of employees with their names and professions dynamically. They configure a List component in vDesigner and set its input value property to fetch data from the Employee entity.

Inside the List, they place two Text elements (T1 and T2):

T1 (Text Box 1) → Attribute ID = Name
T2 (Text Box 2) → Attribute ID = Profession

Since vDesigner recognizes the attribute name as the Attribute ID, the List dynamically displays:

Name	Profession
John Doe	Software Engineer

2. Background Attribute ID

A Background Attribute ID is used to dynamically set background properties (images or colors) for Row, Column, Card, and Stack layouts within a List component.
Example Use Case

A developer wants each Card in a List to have a different background (image or color). They assign the Background Attribute ID as follows:

jsonCopyEdit[
  { "name": "Card 1", "background": "image-url-1.png" },
  { "name": "Card 2", "background": "#FF573366" }
]

When the List renders, each card dynamically displays the corresponding background. If a Background Attribute ID is defined, it overrides any static background set in the Style settings.

How to Use It – Steps

Step 1: Define an Entity

Create an entity with an array of objects and attributes in Data Modeler.

jsonCopyEdit[
  {
    "EmployeeID": "E001",
    "Name": "John Doe",
    "Age": 30,
    "Profession": "Software Engineer"
  },
  {
    "EmployeeID": "E002",
    "Name": "Jane Smith",
    "Age": 28,
    "Profession": "Data Analyst"
  }
]

Step 2: Link the Entity to the Data Modeler

Connect the entity to Data Modeler, ensuring that it is available for use in vDesigner.

Step 3: Drag a List Element into vDesigner

Navigate to the vDesigner layout page.
Drag and drop a List component onto the canvas.

Step 4: Set the List’s Input Value Property

In the List properties, link the Input Value Property to the entity (e.g., Employee).
The List is now bound to the Employee entity and will display data dynamically from that entity only.

Step 5: Add UI Elements and Assign Attribute IDs

Drag two Text elements (T1 and T2) into the List.
Assign their List Attribute IDs based on the attribute names:
- T1 → List Attribute ID: Name
  - Type Name as the list attribute ID for text box T1.
- T2 → List Attribute ID: Profession
  - Type Profession as the list attribute ID for text box T2.

Now, the List dynamically displays the employee names and professions.

Step 6: Save and Commit

Save and commit the design

Was this article helpful?

YesNo

Vahana Academy