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.

Procedure

  1. Go to Data Management module icon Data Management > Schema Builder.
  2. Click New data object.
  3. In the Schema name field, enter a meaningful name for the schema.
  4. 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:
    • 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.
  5. Add an input type by dragging it from the Basic components panel on the right into a selected place within the schema.
  6. To edit an element (layout or input type):
    1. Click the element.
    2. Click Pencil icon.
    3. 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.
    4. Confirm the changes by clicking Apply.
  7. To see a preview of the schema, click Eye icon above the schema panel.
    To close the preview, click the icon again.
  8. Continue adding elements until your schema is complete.
  9. To delete an element, click the element and click Trash bin icon.
  10. To duplicate an element, click the element and click Duplicated element icon.
  11. To move an element, click and hold Crossed arrows icon and drag the element.
  12. When the schema is complete and you are sure it does not require any modifications, click Save.
    Important: Once saved, a schema cannot be edited later.

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.

Validation tab

Property name Available in Description
Required Text input, Number, Checkbox 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 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
😕

We are sorry to hear that

Thank you for helping improve out documentation. If you need help or have any questions, please consider contacting support.

😉

Awesome!

Thank you for helping improve out documentation. If you need help or have any questions, please consider contacting support.