Widgets Management and Operations Panel

212 views

Dive into the Widget Operations Panel with our comprehensive training guide. This resource is designed to provide you with clear, step-by-step instructions for utilizing the Widget Operations Panel within the SmartUX Component. You’ll learn how to create, navigate, modify, and save widgets seamlessly in the SmartUX Studio. Follow along to master each function and enhance your experience.

1. Navigate to the UX Widgets Section

To access the Widgets Operations Panel, please navigate to the UX Widgets section.

Navigate to UX Widgets Section

2. UX Widgets

Welcome to the UX Widgets section!
At the top of the Widgets pane, you’ll notice a gear icon.
Click on this icon to access the Widgets Operations Panel.

UX Widgets

3. Widget Operations Panel

Welcome to the Widgets Operations Panel.
You can easily create, modify, or delete any widget and manage its properties here.
Additionally, this panel offers a variety of related features, including Widget Groups, Property Groups, Functions, and Actions.
This comprehensive utility is designed for efficient and user-friendly widget management, empowering you to handle all aspects of your widgets with ease.

Widget Operations Panel

4. Input Widget

Let’s take a closer look at the Input Widget.
On the corresponding line for the Input widget, you’ll find icons for modifying and deleting the widget, allowing you to manage it easily.
Upon clicking the widget, you’ll access its details section. Here, you can view and edit the widget’s description according to your needs.
Beneath the description, you’ll find the signature, which serves as a unique identifier for the widget and its properties. This signature will be essential for providing selectors for the properties, which we will cover shortly.
XPA Control Type: This indicates the specific Magic xpa control that this widget is associated with.
Is Container: This property specifies whether the widget functions as a container for other widgets.
Drag and Drop Prohibited: This option becomes available only when the Is Container property is enabled. When a widget acts as a container, this setting allows you to determine which widgets can be dropped inside it and which cannot.

Input Widget

5. Template Section

The template section provides a foundational structure for the widget.
Here, you will find the HTML code that becomes visible in the SmarUX Studio when you enable the ‘View Code’ option.
Initially, the widget does not include any properties.
However, as you begin to apply properties, the corresponding HTML/Angular attributes will be integrated into the widget’s structure, based on the specific selectors assigned to each property.

Template Section

6. Properties Section

In the Properties tab, you will find two main sections: Properties and Property Definition.
The Properties section displays a list of attributes assigned to the selected widget.
Meanwhile, the Property Definition section outlines the structure and specifics of each property.
This includes the property name, the corresponding property group, and details about how each property is defined for the widget.
Additionally, it indicates whether there is an XPA data mapping associated with the property.
Finally, you’ll encounter the Selector section.
If the selector indicates ‘root,’ it signifies that this widget property is applicable to the root HTML tag of the widget.
The Selector determines which HTML tag within the Widget should have the property attributes applied.

Properties Section

7. Hidden Properties

In the Hidden Properties tab, you will find properties or HTML attributes that are concealed from the user interface and can only be accessed in the underlying code.
You have the option to specify which properties you wish to keep hidden, ensuring they are only available within the HTML code.

Hidden Properties

9. Widget Group

In the Widget Group section, you can create new widget groups or modify existing ones.
Widget groups allow users to organize widgets into various categories, effectively grouping similar types of widgets together.

Widget Group

10. Properties

The Properties section is organized into two distinct parts: a list of properties and the details of a selected property.
In the Property Details area, you will find essential information including the property name, type, attribute type, and specific attributes associated with the property.
Here you can also create new properties as per your requirements using the plus icon.
Beneath this information, you will see the assigned widgets.
This indicates all the widgets displayed in this section that utilize this particular property.
You can easily add new properties to your widgets according to your needs by simply clicking the plus icon.

Properties

11. Properties Group

Welcome to the Properties Group.
Here, you can create or modify property groups for your UX Widget property sheet.
Think of this as a way to categorize your properties by assigning them to relevant groups based on their similarities.
This organization makes it easier to manage and navigate through the properties in your widget’s properties sheet.

Properties Group

12. Functions

The Functions section presents a comprehensive list of JavaScript functions specifically designed for Widgets.
Within this section, you have the ability to create new functions or modify existing ones using JavaScript code.
With a fundamental understanding of JavaScript, you’ll find it straightforward to craft functions tailored to your widget requirements.
Here, you will find detailed definitions and the corresponding JavaScript code for each function, along with information about the specific properties these functions are associated with for your widgets.

Functions

13. Actions

The Actions section features predefined actions tailored for a specific widget.
When you click on it within the widget’s properties sheet, the corresponding action is triggered.
To fully leverage this functionality, a basic understanding of JavaScript is beneficial.
One such action, symbolized by ‘synolumnsWithXPA’, automates the creation of a table along with its columns and any associated widgets or controls within those columns.
This process eliminates the need for manual interaction or the tedious drag-and-drop of each individual widget into the table.
Essentially, this functionality streamlines the widget configuration process, allowing you to efficiently set up your canvas with your desired layout and components.

Actions

This guide covers a comprehensive exploration of the Widget Operations Panel, guiding you through various settings and configurations tailored for Employee Training. Master widget properties, hidden features, and associated properties efficiently with these engaging instructions.