Skip to main content

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 qodlysources 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 Page 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 Page 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 Page's design. Here's a breakdown of the actions available in the tooltip:

    Essential Options

    OptionDescription
    MoveReposition the selected component on the canvas.
    Select Parent ComponentSelect the parent component of the current selection.
    Delete ComponentRemove the selected component from the canvas. As an alternative solution, you can use the shortcut Alt + Shift + Delete (⌥ + ⇧ + Delete for Mac).
    Export StylesExport the overridden CSS properties to a new CSS class.
    Open Events PanelBinding events to the selected component.

    More Options

    OptionDescription
    CopyMake a copy of the selected component. As an alternative solution, you can use the shortcut Alt + C (⌥ + C for Mac)
    CutCuts the selected component so you can paste it elsewhere. As an alternative solution, you can use the shortcut Alt + X (⌥ + X for Mac)
    PastePaste the copied component directly into your Page. As an alternative solution, you can use the shortcut Alt + V (⌥ + V for Mac)
    Paste intoPaste the copied component into another component. As an alternative solution, you can use the shortcut Alt + ⇧ + V (⌥ + ⇧ + V for Mac)
    DuplicateDuplicate the selected component in the same parent component. As an alternative solution, you can use the shortcut Alt + D (⌥ + D for Mac)
    Save as craftSave 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 contentCopy content. As an alternative solution, you can use the shortcut Alt + ⇧ + C (⌥ + ⇧ + C for Mac)
    Clear stylesClear 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 contentClear content within the selected component. As an alternative solution, you can use the shortcut Alt + E (⌥ + E for Mac)

    Data Formatting

    Your Pages can incorporate Qodly Source 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 Qodly 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 Qodly 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 Qodly Source, offering detailed information without extra interactions.

    • Server-Side Interaction: This section explains obtaining user selections in a server-side context when a Qodly Source 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.