Creating schemas
Schemas are flexible templates that allow you to store any kind of data. For example, they can be used to provide data layouts for custom nodes in the automation module.
Creating a schema
- Go to
Data Management > Schema Builder. - Click New data object.
- In the Schema name field, enter a meaningful name for the schema.
- If you want to add a graphical layout to your schema, drag it from the Layout section on the right and drop it onto the schema panel.
Tip:
- Layouts are not required.
- You can mix different graphical layouts in a single schema. You can also nest layouts in layouts.
- When adding elements to a table, you can add many elements in a single cell. Make sure you drag and drop elements to the correct row.
- Add an input type by dragging it from the Basic components panel on the right into a selected place within the schema.
- To edit an element (layout or input type):
- Click the element.
- Click
. - In the panel that opens, edit the element’s properties.
Each element type has different properties. Follow the instructions on-screen to modify them. See input type properties and layout properties. - Confirm the changes by clicking Apply.
- To see a preview of the schema, click
above the schema panel.
To close the preview, click the icon again. - Continue adding elements until your schema is complete.
- If an element is highlighted red, edit it by adding a unique
Field ID.
You can set any ID. It should only contain upper/lowercase letters, digits, and underscores (_). - To delete an element, click the element and click
. - To duplicate an element, click the element and click
. - To move an element, click and hold
and drag the element. - When the schema is complete, click Save.
Input type properties
Below is a reference for component properties, divided by tabs.
Design tab
| Property name | Available in | Description |
|---|---|---|
| Field ID | All | This field is only available for modification when another element with the same ID exists in the schema. You must change the value in one of the fields to be unique. |
| Label | All | Field label displayed in the form UI. You can hide the label by selecting the Hide label checkbox. |
| Title | Button | The text on the button |
| Theme | Button | The graphical theme of the button |
| Size | Button | The size of the button |
| Placeholder | Text input, Number | Placeholder text displayed until the user fills in a value |
| Description | All | The description appears under the field. |
| Tooltip | All | Tooltip text is displayed when the user hovers over the information icon (the icon is a default element of the UI). |
| Tab index | All | Tab index defines the order of field display when the user uses the TAB key to navigate the form. |
| Initial focus | All | If this is selected, the field becomes the initially focused element when the form is opened. |
Data tab
| Property name | Available in | Description |
|---|---|---|
| Decimal places | Number | The number of digits to display after the decimal separator |
| Default value | Switch | Defines if the toggle is on or off by default when the form is displayed |
| Default value | Radio | Defines which option is selected by default when the form is displayed |
| Data source values | Radio, Checkbox, Select | Add new options by clicking Add value. Each option has a user visible Label and a Value that defines the <value> HTML attribute of the option. |
| Type of relation; Relation to; Displayed field | Relation | See Schema relations. |
Validation tab
| Property name | Available in | Description |
|---|---|---|
| Required | Text input, Number, Checkbox, Relation | When this is selected, the field must be filled in before the form can be submitted. |
| Unique | Text input, Number, Select | When this is selected, the form cannot be sent if it contains the same data that was sent before. |
| Minimum length | Text input | The minimum number of characters in the entered value |
| Maximum length | Text input | The maximum number of characters in the entered value |
| Minimum value | Number | The minimum value |
| Maximum value | Number | The maximum value |
| Regex | Text input, Number | A regular expression that the entered value must match |
| Error message | Text input, Number, Checkbox, Select, Relation | The message to display if a validation error occurs |
Layout tab
These properties affect the graphical layout of the form in the Synerise UI.
| Property name | Available in | Description |
|---|---|---|
| Margin Top | All | The top margin of the element |
| Margin Right | All | The right margin of the element |
| Margin Bottom | All | The bottom margin of the element |
| Margin Left | All | The left margin of the element |
Layout properties
These properties define the properties of column and table layouts that can be used within the schema to organize data fields.
Design tab
| Property name | Available in | Description |
|---|---|---|
| Custom CSS Class | Column Component, Table Component | CSS class of the container |
| Columns properties | Column Component | Add more columns by clicking Add column. You can define the width (as a percentage) of each column. |
| Column gap | Column Component | Defines the gap (in px) between columns. |
| Number of rows | Table Component | The number of rows |
| Number of columns | Table Component | The number of columns |
| Striped | Table Component | Defines if the table is striped (every second row has a colored background for better readability). |
| Bordered | Table Component | Defines if the table has borders. |
| Hover | Table Component | Defines if rows are highlighted when hovered. |
| Condensed | Table Component | Condenses the size of the table. |
Layout tab
These properties affect the graphical layout of the form in the Synerise UI.
| Property name | Available in | Description |
|---|---|---|
| Margin Top | All | The top margin of the element |
| Margin Right | All | The right margin of the element |
| Margin Bottom | All | The bottom margin of the element |
| Margin Left | All | The left margin of the element |
