How Do I Drag and Drop Data Models onto the Canvas?

267 views

Welcome to this knowledge base article on efficiently using the drag-and-drop functionality for data models in the Employee Training application. In this guide, we will walk you through the process of seamlessly adding data models to the canvas, helping you streamline your workflow and enhance productivity. Whether designing a new module or modifying an existing one, mastering this feature will enable you to quickly organize and visualize data structures within the application.

Let’s get started!

1. Click on the desired Component

Once on the Component Page, you will see a designated space or canvas where you can easily drag and drop data models.
This intuitive interface allows you to seamlessly add the necessary data models to your component.

Click on the desired Component

2. Enable View Code and Expanded View

To explore the structure and configuration of the component, use the options:
1. Click “View Code” – This opens the Template section, allowing you to view and modify the underlying HTML code structure of the component.
2. Click “Expanded View” – This displays the widget structure placed on the component canvas, giving a detailed view of its hierarchy.

Enable View Code and Expanded View

3. Click “Models” Tab

To begin, click on the ‘Models’ tab.
This will display a list of available data models for the selected component.

Click 'Models' Tab

4. Drag and Drop Data Model

Now, simply drag and drop the desired data model onto the canvas.
This action will automatically perform data mapping or binding with Magic xpa.
Additionally, you will see its corresponding HTML code reflected in the Template section.

Drag and Drop Data Model

5. Input

Here are a few examples of dragging and dropping data models onto the canvas.
These models are specific to the selected component and will seamlessly integrate with the application.

Input

6. CheckBox

For CheckBox.

CheckBox

7. Configure Widget

To utilize features such as Drag and Drop for Data Models, you may need to verify whether the data model you wish to drop onto the canvas has a Widget assigned to it.
Ensuring the correct control type is set will allow for a seamless drag-and-drop experience within your application.

Configure Widget

8. Click on the Widget “Button”

Select the Widget Button to proceed.

Click on Widget 'Button'

9. Check xpa Control Type

Here, you can check that the Button Widget is mapped to the Button XPA control.

Check xpa Control Type

This guide covered how to drag and drop data models onto the canvas, allowing for easy integration of elements into your project.