Datasources
Datasources are integral to Qodly's architectural design, simplifying the development of web applications. They act as data connectors, serving as references that automatically activate events upon data changes. These datasources can be linked to webform components, providing an intuitive way to display and manage data within your application.
Understanding Datasources
Components and Datasources
Components are UI elements that can be bound to datasources, allowing them to display attributes from these datasources. When a datasource changes, the component automatically reflects the updated data. For instance, if a function returns a datasource as a result, any changes to that datasource will be immediately reflected in the associated component.
Events and Datasources
You can also attach events to datasources, triggering specific actions when these datasources are updated in the web browser. Please refer to Datasource Events for more details.
Datasource Types
Catalog Datasources
Catalog datasources (also known as ORDA datasources), serve as references to entities and entity selections that originate from the server and are based on the data model.
These datasources optimize data exchange by selectively requesting only the attributes displayed by the component from the server and then making them available in the browser.
Scalar Datasources
Scalar datasources, on the other hand, are confined to the browser's local environment. They can be generated directly within the browser and subsequently transmitted to the server during a function call. Scalar datasources are versatile and can take on various data types, including String, Number, Boolean, Date, Object, or Collection.
It's crucial to emphasize that Scalar datasources do not originate from the Data model and, consequently, do not possess persistence.
Datasource Scopes
Webform Datasources
Webform Datasources are scoped to the webform where they are defined. They can only be used within that specific webform.
Shared Datasources
Shared Datasources, on the other hand, are scoped to the entire application and can be utilized in multiple webforms within the same project.
By default, when you create a datasource without specifying a namespace, you define a webform datasource.
Shared functions
Shared functions are also accessible when Entity and Entity Selection serve as shared datasources, making them available for use in multiple webforms within the same project.
Determining the Scope of Datasources
When selecting a component bound to a datasource, the Properties panel provides information about whether the datasource is shared:
If the tag reads webform, it signifies a local datasource visible only within the current webform.
On the other hand, if there is a tag with a specific name, it implies that you have passed a shared datasource belonging to a namespace.
When configuring a function event, the Contextual panel indicates whether the function is shared.
Creating a datasource
Within the Webform Editor, the Datasources section conveniently organizes available datasources. This section includes:
- A Search area for filtering the datasource list.
- The Catalog, containing:
- Dataclasses from your application. Here, you can designate entities or entity selections from your Datastore, which will be handled by the server as datasources.
- Functions defined at the datastore level and within each dataclass.
- This Webform: Datasources exclusive to the current webform.
- Namespaces: Shared datasources organized by namespaces. You can create a namespace by clicking the
+icon or when defining a shared datasource.
From the Catalog
To create Webform or Shared datasources directly from the Catalog, follow these steps:
- In the Datasources section, choose Catalog > Data Classes.
- Click the
+icon next to a defined Dataclass. - Enter the name of the datasource.
- Select the datasource type, either through
Entity selectionorEntity, to establish an ORDA data source. Afterward, proceed to configure its settings, including initial values, page size, and depth. - To create a shared datasource, specify a
Namespace, for a webform (non-shared) datasource, leave the field empty.
Specifying a namespace places the datasource in the Namespaces section, while without a namespace, it is situated in the This Webform section.
From This Webform
To create Webform datasources, follow these steps:
- Click the
+icon in the header of the This Webform section. - Enter the name of the datasource.
- Choose the datasource type and configure its initial value according to the selected type.
For Entity Selection or Entity types, make sure to also configure additional settings such as Dataclass, page size, or depth for the ORDA data source.
From a Namespace (shared datasource)
To create Shared datasources, follow these steps:
- Click the
+icon next to a defined Namespace.
If you haven't created a Namespace yet or want to create an additional one, click the+icon in the header of the Namespaces section to establish one before proceeding to create a shared datasource within it. - Enter the name of the datasource.
- Choose the datasource type and configure its initial value according to the selected type.
For Entity Selection or Entity types, make sure to also configure additional settings such as Dataclass, page size, or depth for the ORDA data source.
Standalone Entity vs Entity from ES
- Entities from Entity Selection Datasource: These entities originate from an entity selection datasource, particularly advantageous in situations necessitating navigation and bulk actions.
- Independently Created Standalone Entities: These entities have no affiliation with entity selections. They exist in isolation and are well-suited for the management of individual entities that do not require inclusion in larger selections. Standalone entities are typically managed on a one-to-one basis.
entity selection datasource Name that appears after the child entity datasource, such as products.
Editing a datasource
Edit icon located next to the datasource name:
Contextual panel. To alter an editable property, simply click on the "Edit" icon situated on the right side of the property.
Renaming a datasource
You can easily rename a datasource from the contextual panel. In doing so, Qodly Studio will automatically update references to the renamed datasource:
Within components bound to the datasource.
In other datasources where the renamed datasource serves as the origin.
Please note that when renaming a shared datasource, only opened web forms can have their references renamed.
Tracking Datasource Usage
Toggle the option by clicking the icon, then hover over a datasource to highlight its location in your webform.
Deleting Datasources
Deleting a Datasource
To delete a Datasource, click the delete button 
next to its name in the Data Sources list. If you confirm the dialog box, the datasource is deleted and its references in webforms are removed.
Removing Unused Datasources
An unused datasource refers to any local datasource that is defined but not utilized in any section of the webform.
Click on the Delete Unused Elements button 
located in the Data Sources's header to cleanse your webform of unnecessary local datasource.
Deleting a Namespace
To delete a namespace, click the delete button next to its name in the Namespaces list. The delete button is only available if the namespace is empty.
Binding a Datasource to a Component
Binding a datasource to a component can be accomplished through several methods:
Dragging and dropping it from the Data Sources section onto a component.
Selecting a component and entering the name of the datasource in the Properties panel > Data Access > DataSource.
For efficiency, if you drag and drop an Entity Selection attribute onto a Select Box or Matrix component, the $This.attributeName binding is automatically established:
For images, the binding is automatically displayed in the Data Access panel:
Iterative components
Iterative components enable you to work with data by iterating through it. These components provide the flexibility to select individual items from the data as independent datasources.
The following components fall into the category of iterative components: Datatable, Matrix, and Select Box.
Iterative components can be bound to two types of datasources:
- DataSource: This is the primary data source used for iterating through data. Its attributes are bound to the component, allowing you to display and work with the iterative data. Typically, this data source represents an entity selection or a array.
- Selected Element: This secondary data source is used to retrieve the currently selected item within the iterative component. In most cases, it represents an entity or a array element.
Capturing Function Results in a Datasource
You can capture the results of a function call and store them in a datasource. For example, you can configure an event that calls a function and then captures the outcome, saving it in a datasource.