Skip to content

Component

Components are the key building blocks in the platform, providing the basis for building applications. They are encapsulated units of functionality that can include data, user interface, business logic, and process automation.

Component Types

  1. Single Component:

  2. Contains the basic object model for storing data.

  3. Includes a UI model with forms and controls.
  4. Has an automation model with dataflows and workflows.
  5. Supports Python scripts for additional behavior customization.

  6. It has unique security options.

  7. Multi-Component:

  8. Combines multiple Components to create complex applications.
  9. It is used to build a single user interface, for example, in mobile applications.

Creating a New Component

  1. Open Studio ('https:///studio').
  2. Go to Applications/Components menu.
  3. Click Add button to create a new component or multi-component.

Basic Component Settings

Parameter Description
Title The name of the component that is displayed to users.
Proxy Mode Determines whether the component will act as a proxy.
Restrict Access Restricts access to the component.
Maker Identifies the creator or owner of the component.
Cron Configuring the start time of a component using Cron.
Run as User Specifies the user on whose behalf it will be executed.
Access Mode Defines the mode of access to the component.
Description A detailed description of the component, its purpose, and functions.
Domains The domains or categories to which the component belongs.

Component Object Model in the Platform

Each component in the platform automatically includes the following fields:

  • 'Id': A unique component identifier.
  • 'creatorSubject': The subject that has created the object.
  • 'updateSubject': The subject that has updated the object.
  • 'createdDate': Date when the object was created.
  • 'updateDate': Date when the object was last updated.

Components can include additional elements, which can belong to one of eleven types: 'string', 'datetime', 'catalog', 'number', 'integer', 'array', 'file', 'boolean', 'time', 'date', 'uri'. Each of these elements has its own settings.

Global settings for all types:

  • 'Name': System name of the property.
  • 'Title': Name of the property to be displayed in the interface.
  • 'Required': Specifies whether the field is required.
  • 'Primary Key': Determines whether a field is a unique identifier.
  • 'Query': Determines whether the field can be used in queries.
  • 'Virtual property': Excludes a field from synchronization processes.

Interface Builder

The platform offers a powerful tool for customizing the user interface for each component – the Interface Builder. It is a visual editor that allows you to create and customize multi-component user interfaces using drag-and-drop features. The Interface Builder is a workspace in the Definition section of the Component Creation Interface.

In this section, you can:

  • Create a multi-screen app interface using an intuitive drag-and-drop editor.
  • Add UI elements from the Basic, Advanced, and Layout categories.
  • Configure the object model for the Workflow and Dataflow of the application.
  • Customize CSS styles for all UI elements.

After you add UI elements to your app's page layout, you can do the following operations:

  • Copy: Copies the current element to the clipboard.
  • Paste: Pastes the copied item into a new location.
  • Move: Changes the position of the element.
  • Properties: Opens the properties panel to configure the element.
  • Preview: Shows the layout in a format that is close to the user's application.
  • Markup Preview: Displays the textual web markup of the page.
  • Delete: Deletes the selected element.
  • Data Field: Allows you to bind an element to a data field (database link).

Web parts module: “Styles” and “JavaScript”

The “Styles” block is designed to describe the CSS styles that are applied to the component, while the “JavaScript” block allows you to establish interaction with the user interface and provide additional functionality using the JavaScript language.

In this way, the Web Parts module enables developers to create more complex and interactive components using different programming languages to describe styles and functionality.

Using "JavaScript"

Example of using JavaScript to implement functionality for creating buttons, pressing which takes a screenshot:

  1. To call JavaScript functions from the 'Web parts' block, it is necessary to use the method context.InvokeInterop(methodName, objects) within Componen script:

````python def capturePage1(): context.InvokeInterop("callScreenshot")

  1. Next, we move to the 'JavaScript' section of the 'Web parts' block and prepare function: ```javascript // Creating a