Components basics

Components are the fundamental building blocks that constitute your application's user interface. These modular elements allow you to construct rich and dynamic interfaces by combining various functionalities and visual elements.

Locating Components

Components are located in the Components tab on the left side panel. Components are systematically organized into distinct categories, simplifying the search and selection process:

Containers: Components that encapsulate other components and manage their placement.

Simple: Components that display scalar or native data, images, and facilitate user actions

List: Components that iterate over datasources and manage user interactions with this data.

Custom Components: These are external React components that have been imported into Qodly by the user.

Adding Components

Incorporating components into your webform is a straightforward process that involves drag-and-drop functionality. Simply select a component and place it onto your working area or canvas.

You have the flexibility to drop components directly onto the webform itself, as well as within other components that accept nested elements. This versatility allows you to construct complex layouts and hierarchies by combining different components within one another.

Uploading Custom Components

Qodly Studio provides a dedicated upload button in the Component bar, allowing users to upload Custom Components.

Tooltip

When you select a component on the canvas, a contextual tooltip becomes available, offering a variety of actions that can be performed on the chosen component. These actions provide you with the tools to efficiently manage and manipulate your webform's design. Here's a breakdown of the actions available in the tooltip:

Essential Options

Option	Description
Move	Reposition the selected component on the canvas.
Select Parent Component	Select the parent component of the current selection.
Delete Component	Remove the selected component from the canvas. As an alternative solution, you can use the shortcut Alt + Shift + Delete (⌥ + ⇧ + Delete for Mac).
Export Styles	Export the overridden CSS properties to a new CSS class.
Open Events Panel	Binding events to the selected component.

More Options

Option	Description
Copy	Make a copy of the selected component. As an alternative solution, you can use the shortcut Alt + C (⌥ + C for Mac)
Cut	Cuts the selected component so you can paste it elsewhere. As an alternative solution, you can use the shortcut Alt + X (⌥ + X for Mac)
Paste	Paste the copied component directly into your webform. As an alternative solution, you can use the shortcut Alt + V (⌥ + V for Mac)
Paste into	Paste the copied component into another component. As an alternative solution, you can use the shortcut Alt + ⇧ + V (⌥ + ⇧ + V for Mac)
Duplicate	Duplicate the selected component in the same parent component. As an alternative solution, you can use the shortcut Alt + D (⌥ + D for Mac)
Save as craft	Save the component, its child components, and their styles as a reusable component. As an alternative solution, you can use the shortcut Alt + K (⌥ + K for Mac)
Copy content	Copy content. As an alternative solution, you can use the shortcut Alt + ⇧ + C (⌥ + ⇧ + C for Mac)
Clear styles	Clear the styles of the selected component (resets the overridden CSS properties). As an alternative solution, you can use the shortcut Alt + J (⌥ + J for Mac)
Clear content	Clear content within the selected component. As an alternative solution, you can use the shortcut Alt + E (⌥ + E for Mac)

Data Formatting

Your webforms can incorporate datasource attributes with data types such as string, number, date, time, or duration. When these attributes are presented within components, you have the option to choose their display format in the Properties section.

info

Formatting options may vary based on the specific data type of the attribute and the type of component being used.

• For Text (string):


• UPPERCASE: Converts all characters to uppercase.
• lowercase: Converts all characters to lowercase.
• Capitalize: Capitalizes the first letter of the text.
• Capitalize Each Word: Capitalizes the first letter of each word.

• For Number:


• 0: Standard numerical format.
• 0%: Displays the number as a percentage.
• #,##0: Adds thousands separators to the number.
• #,##0.00: Adds thousands separators and displays two decimal places.

Refer to the Review guidelines for customizing number formats.

• For Date:


• Date short: Displays the date in a short format.
• Date long: Displays the date in a long format.
• Date abbreviated: Displays the date with abbreviated month name.
• ISO date GMT: Displays the date in ISO 8601 format with GMT time zone.
• UTC String: Displays the date in a UTC format.

Qodly supports a wide range of customized date formats. For a comprehensive list of available patterns, refer to the Date and Time Formats page.

• For Duration:
• Simple: 14:40:30
• Without seconds: 14:40
• Distance: about 15 hours
• Distance with Suffix: in about 15 hours
• Strict Distance: 15 hours
• Strict Distance with Suffix: in 15 hours
Note: Examples with duration 52 830 000 ms.

Qodly supports a wide range of customized time formats. For a comprehensive list of available time patterns, refer to the Date and Time Formats page.

Data Integration

This section serves as a fundamental introduction to the integration of data sources with components. It's essential to note that each component has its own dedicated section on its respective page, including the following subsections:

• Data Binding: This step configures the connection between a component and a data source, determining where the component retrieves its data.

• Data Display: After binding data, this section guides you in visually presenting data within the component, including configuring its appearance and additional components.

• Dynamic Attribute Display: This section explains how a component can automatically display attributes of a selected data source, offering detailed information without extra interactions.

• Server-Side Interaction: This section explains obtaining user selections in a server-side context when a datasource is bound to a component, enabling content retrieval and use.

note

Please note that the following subsections (Data Binding, Data Display, Dynamic Attribute Display, and Server-Side Interaction) may or may not be applicable to all components. Their presence or absence depends on the specific component's functionality and use case.