Simulator.Company scripts (1.0.0)

Download OpenAPI specification:Download

Support: support@simulator.company URL: https://simulator.company

get page

json

The request is sent to the corezoid process before the page is loaded. The corezoid process decides whether to display the requested page or to redirect the user to another page. Optionally, data for dynamic injection into the page body can be sent in the response.

Request Body schema: application/json

timeout	number Default: 30
	Array of objects The list of request results

Responses

Request samples

Payload

Content type

application/json

{"timeout": 30,
"ops": [{"conv_id": "{{CONV_ID}}",
"company_id": "{{COMPANY_ID}}",
"type": "create",
"obj": "task",
"data": {"body": {"page": "index",
"context": {"actorId": "111",
"rootActorId": "123",
"appId": "124",
"timeZoneOffset": -120
},
"query": { }
},
"path": "/get",
"sessionData": {"userInfo": {"id": "12",
"nick": "John Doe",
"login": "john.doe@corezod.com"
}
}
}
}
]
}

Response samples

Content type

application/json

Example

{"code": 200,
"data": {"viewModel": {"key": "value"
},
"language": "language"
}
}

send form

json

The request is sent to the Corezoid process when a button is clicked or when interacting with a component which submitOnChange property is set to true. The request's body contains all information about the component that initiated the request and the values of all fields in the current form. The Corezoid process makes decisions regarding changes on the existing page, displaying notifications, or redirecting the user to another page.

Request Body schema: application/json

timeout	number Default: 30
	Array of objects The list of request results

Responses

Request samples

Payload

Content type

application/json

{"timeout": 30,
"ops": [{"conv_id": "{{CONV_ID}}",
"company_id": "{{COMPANY_ID}}",
"type": "create",
"obj": "task",
"data": {"body": {"page": "index",
"query": { },
"context": {"actorId": "111",
"rootActorId": "123",
"appId": "124",
"timeZoneOffset": -120
},
"formId": "logIn",
"sectionId": "credentials",
"buttonId": "submit",
"buttonData": {"action": "submitOnScroll",
"length": 10
},
"data": {"login": "admin",
"password": "qwerty"
}
},
"path": "/send",
"sessionData": {"userInfo": {"id": "12",
"nick": "John Doe",
"login": "john.doe@corezod.com"
}
}
}
}
]
}

Response samples

Page

Description

All content is located on the page. Each page is a folder with a unique name and two files inside: "config" and "locale". The config file is a JSON file with two main properties: "grid" and "forms". In the "grid" property, we can adjust the arrangement of elements on the page. There are two options for placing content: "two_column" and "one_column". In the locale file, we can set up localization for the page.

Two column grid

One column grid

Configuration

	Array of objects (Form)
	object
	Array of objects (notification)
query	object Query string parameters
styleClass	string css class that is defined in 'styles.css'

{"forms": [{"id": "string",
"title": "string",
"styleClass": "my-custom-class",
"visibility": "visible",
"grid": {"type": "one_column",
"components": { },
"styleClass": "my-custom-class"
},
"sections": [{"id": "string",
"type": "body",
"visibility": "visible",
"styleClass": "my-custom-class",
"header": [{"id": "component-1",
"visibility": "visible",
"row": "",
"w": "100",
"styleClass": "my-custom-class",
"class": "label",
"tooltip": "tooltip text",
"value": "Lorem ipsulum",
"align": "left"
}
],
"modalHeader": [{ }
],
"contentLoop": [{"key": "value"
}
],
"content": [{ }
]
}
]
}
],
"grid": {"type": "one_column",
"components": { },
"header": {"class": "string"
},
"sideBar": {"components": {"center": ["id1"
],
"footer": ["id1"
],
"header": ["id1"
]
},
"styleClass": "my-custom-class"
}
},
"notifications": [{"type": "success",
"title": "Error",
"helperText": "api timeout",
"expire": "auto"
}
],
"query": {"key": "value"
},
"styleClass": "my-custom-class"
}

Form

Description

The form is filled with sections, and those, in turn, with components. Forms, sections, and components have the "visibility" property, which allows for flexible layout customization. Forms are used to send a request to Corezoid when a button is clicked, provided all mandatory fields are filled and all fields are checked. Forms also offer the ability to further customize the arrangement of sections using the "grid" property. There are two types: "two_column" and "one_column".

Two column grid

One column grid

Configuration

id	string
title	string
styleClass	string css class that is defined in 'styles.css'
visibility	string Enum: "visible" "hidden" "disabled" Component visibility : visible - component is displayed on the page, can be used hidden - component is not displayed on the page disabled - component is displayed, but cannot be used
	object (grid)
	Array of objects (Container for grouping the components)

{"id": "string",
"title": "string",
"styleClass": "my-custom-class",
"visibility": "visible",
"grid": {"type": "one_column",
"components": { },
"styleClass": "my-custom-class"
},
"sections": [{"id": "string",
"type": "body",
"visibility": "visible",
"styleClass": "my-custom-class",
"header": [{"id": "component-1",
"visibility": "visible",
"row": "",
"w": "100",
"styleClass": "my-custom-class",
"class": "label",
"tooltip": "tooltip text",
"value": "Lorem ipsulum",
"align": "left"
}
],
"modalHeader": [{ }
],
"contentLoop": [{"key": "value"
}
],
"content": [{ }
]
}
]
}

Button

Description

Buttons allow users to take actions and make choices with a single tap.
Buttons communicate the actions that users can perform. They are usually placed throughout your user interface in areas such as:

- Modal windows
- Forms
- Cards

Default button

Default buttons are of high emphasis and are distinguished by their use of elevation and fill. They contain actions that are essential to your app.

Text button

Text buttons are commonly used for less prominent actions, including those found in dialogs and cards. In cards, text buttons assist in maintaining focus on the card's content.

Secondary button

Secondary buttons are of medium emphasis. They represent actions that are significant but not the primary action within an app.

Secondary buttons are of medium emphasis. They represent actions that are significant but not the primary action within an app.

Tertiary button

Tertiary buttons are low-emphasis buttons that represent actions of minimal importance within an app.

They serve as a less prominent option compared to other button types.

Quaternary button

Quaternary buttons are also low-emphasis buttons, designed for actions of even lesser importance in an app.

They serve as a straight alternative to tertiary buttons, providing an even lower level of emphasis in comparison to secondary or text buttons.

Button with context menu

Menus display a list of choices on temporary surfaces. A menu displays a list of choices on a temporary surface. It appears when the user interacts with a button.

Configuration

id required	string Identifier of the component (must be unique within the scope of the form)
visibility	string Default: "visible" Enum: "visible" "hidden" "disabled" Component visibility : visible - component is displayed on the page, can be used hidden - component is not displayed on the page disabled - component is displayed, but cannot be used
row	string Row number. Components with the same row number will be aligned in one row
w	string Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row
styleClass	string css class that is defined in 'styles.css'
class required	string Value: "button" Class of the component
type	string Default: "default" default default text secondary tertiary quaternary
tooltip	string Tooltips display informative text when users hover over an element.
	object extra settings
title	string String with bbcode

Example

{"id": "component-1",
"visibility": "visible",
"row": "",
"w": "100",
"styleClass": "my-custom-class",
"class": "button",
"type": "default",
"tooltip": "tooltip text",
"extra": {"url": "http://127.0.0.1:3000",
"action": "logout",
"icon": "phone",
"rounded": false,
"mobileVisible": false,
"request": {"method": "get",
"url": "http://127.0.0.1:3000"
},
"autoSubmit": {"interval": 10,
"maxCount": 3
},
"options": [{"title": "Option title",
"value": "option-id",
"visibility": "visible"
}
]
},
"title": "Button title"
}

Check

Description

Checkboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.

Configuration

id required	string Identifier of the component (must be unique within the scope of the form)
visibility	string Default: "visible" Enum: "visible" "hidden" "disabled" Component visibility : visible - component is displayed on the page, can be used hidden - component is not displayed on the page disabled - component is displayed, but cannot be used
row	string Row number. Components with the same row number will be aligned in one row
w	string Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row
styleClass	string css class that is defined in 'styles.css'
value	boolean Value of the component
required	boolean Default: false Enum: true false If set to true, this will impact the visibility of the submit button on this form. “Labels” allows the user to display information to other users.
error	boolean Default: false Enum: true false Error flag
errorMsg	string Error message. Will be visible when component's 'error' flag is set to true
helpMsg	string Help message. Will be visible when component's 'error' flag is set to false
submitOnChange	boolean Default: false Enum: true false if true, changes of the element's value will trigger /send request.
class required	string Value: "check" Class of the component
title	string Title text

{"id": "component-1",
"visibility": "visible",
"row": "",
"w": "100",
"styleClass": "my-custom-class",
"value": true,
"required": false,
"error": false,
"errorMsg": "This field contains an error",
"helpMsg": "This information is needed to make our product better",
"submitOnChange": false,
"class": "check",
"title": "Element title"
}

Toggle

Description

Toggle the state of a single setting on or off.

Configuration

id required	string Identifier of the component (must be unique within the scope of the form)
visibility	string Default: "visible" Enum: "visible" "hidden" "disabled" Component visibility : visible - component is displayed on the page, can be used hidden - component is not displayed on the page disabled - component is displayed, but cannot be used
row	string Row number. Components with the same row number will be aligned in one row
w	string Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row
styleClass	string css class that is defined in 'styles.css'
value	boolean Default: false Value of the component
required	boolean Default: false Enum: true false If set to true, this will impact the visibility of the submit button on this form. “Labels” allows the user to display information to other users.
error	boolean Default: false Enum: true false Error flag
errorMsg	string Error message. Will be visible when component's 'error' flag is set to true
helpMsg	string Help message. Will be visible when component's 'error' flag is set to false
submitOnChange	boolean Default: false Enum: true false if true, changes of the element's value will trigger /send request.
class required	string Value: "toggle" Class of the component
title	string Title text
align	string Enum: "left" "right" "center" Horizontal alignement
	object extra settings

{"id": "component-1",
"visibility": "visible",
"row": "",
"w": "100",
"styleClass": "my-custom-class",
"value": false,
"required": false,
"error": false,
"errorMsg": "This field contains an error",
"helpMsg": "This information is needed to make our product better",
"submitOnChange": false,
"class": "toggle",
"title": "Element title",
"align": "left",
"extra": {"size": "medium"
}
}

Slider

Description

Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.

Default slider

The "Default slider" component allows users to make selections from a range of values.

SkillBar slider

The "SkillBar slider" component allows users to show the progress from a range of values. There is no any handles, it`s used only for view.

Configuration

id required	string Identifier of the component (must be unique within the scope of the form)
visibility	string Default: "visible" Enum: "visible" "hidden" "disabled" Component visibility : visible - component is displayed on the page, can be used hidden - component is not displayed on the page disabled - component is displayed, but cannot be used
row	string Row number. Components with the same row number will be aligned in one row
w	string Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row
styleClass	string css class that is defined in 'styles.css'
class required	string Value: "slider" Class of the component
value	string Value of the slider
type	string Default: "default" Enum: "default" "skillBar" Type of the slider
title	string Title text
submitOnChange	boolean Default: false Enum: true false if true, changes of the element's value will trigger /send request.
	object extra settings

{"id": "component-1",
"visibility": "visible",
"row": "",
"w": "100",
"styleClass": "my-custom-class",
"class": "slider",
"value": "0",
"type": "default",
"title": "Element title",
"submitOnChange": false,
"extra": {"min": 0,
"max": 100,
"step": 1,
"measure": "USD",
"dots": false
}
}

Label

Description

Labels allow the user to show information to user.

Configuration

id required	string Identifier of the component (must be unique within the scope of the form)
visibility	string Default: "visible" Enum: "visible" "hidden" "disabled" Component visibility : visible - component is displayed on the page, can be used hidden - component is not displayed on the page disabled - component is displayed, but cannot be used
row	string Row number. Components with the same row number will be aligned in one row
w	string Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row
styleClass	string css class that is defined in 'styles.css'
class required	string Value: "label" Class of the component
tooltip	string Tooltips display informative text when users hover over an element.
value	string String with bbcode
align	string Enum: "left" "right" "center" Horizontal alignement

{"id": "component-1",
"visibility": "visible",
"row": "",
"w": "100",
"styleClass": "my-custom-class",
"class": "label",
"tooltip": "tooltip text",
"value": "Lorem ipsulum",
"align": "left"
}

Divider

Description

A divider is a thin line that groups content in lists and layouts. Dividers separate content into clear groups.

Configuration

id required	string Identifier of the component (must be unique within the scope of the form)
visibility	string Default: "visible" Enum: "visible" "hidden" "disabled" Component visibility : visible - component is displayed on the page, can be used hidden - component is not displayed on the page disabled - component is displayed, but cannot be used
row	string Row number. Components with the same row number will be aligned in one row
w	string Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row
styleClass	string css class that is defined in 'styles.css'
class required	string Value: "divider" Class of the component

{"id": "component-1",
"visibility": "visible",
"row": "",
"w": "100",
"styleClass": "my-custom-class",
"class": "divider"
}

Image

Description

“Image” allows the user to display images to other users.

Configuration

id required	string Identifier of the component (must be unique within the scope of the form)
visibility	string Default: "visible" Enum: "visible" "hidden" "disabled" Component visibility : visible - component is displayed on the page, can be used hidden - component is not displayed on the page disabled - component is displayed, but cannot be used
row	string Row number. Components with the same row number will be aligned in one row
w	string Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row
styleClass	string css class that is defined in 'styles.css'
class required	string Value: "image" Class of the component
value required	string url, or base64
align	string Enum: "left" "right" "center" Horizontal alignement
required	object extra settings

{"id": "component-1",
"visibility": "visible",
"row": "",
"w": "100",
"styleClass": "my-custom-class",
"class": "image",
"value": "https://corezoid.com/logo.png",
"align": "left",
"extra": {"alt": "Logo"
}
}

File

Description

The "File" component allows the user to view a file by clicking a button. After clicking, a modal window will open displaying the file specified in the configuration.

Configuration

id required	string Identifier of the component (must be unique within the scope of the form)
visibility	string Default: "visible" Enum: "visible" "hidden" "disabled" Component visibility : visible - component is displayed on the page, can be used hidden - component is not displayed on the page disabled - component is displayed, but cannot be used
row	string Row number. Components with the same row number will be aligned in one row
w	string Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row
styleClass	string css class that is defined in 'styles.css'
class required	string Value: "file" Class of the component
required	object
align	string Enum: "left" "right" "center" Horizontal alignement
	object extra settings

{"id": "component-1",
"visibility": "visible",
"row": "",
"w": "100",
"styleClass": "my-custom-class",
"class": "file",
"value": {"fileSrc": "https://sim.simulator.company/static/logo.svg",
"fileName": "ADSEFEFJJ12314FGG",
"type": "image/png",
"size": "1024",
"title": "Logo.svg"
},
"align": "left",
"extra": {"preview": false
}
}

Carousel

Description

The "Carousel" component allows the user to display an array of files. When clicking on an icon representing a file, the same modal window as the one triggered by the "File" component will appear, displaying the selected file.

Configuration

id required	string Identifier of the component (must be unique within the scope of the form)
visibility	string Default: "visible" Enum: "visible" "hidden" "disabled" Component visibility : visible - component is displayed on the page, can be used hidden - component is not displayed on the page disabled - component is displayed, but cannot be used
row	string Row number. Components with the same row number will be aligned in one row
w	string Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row
styleClass	string css class that is defined in 'styles.css'
type	string Default: "default" Enum: "default" "preview" Visualization type : default - list of options only preview - the selected option will be displayed in a preview
class required	string Value: "carousel" Class of the component
submitOnChange	boolean Default: false Enum: true false if true, changes of the element's value will trigger /send request.
	object (File object)
required	Array of objects

{"id": "component-1",
"visibility": "visible",
"row": "",
"w": "100",
"styleClass": "my-custom-class",
"type": "default",
"class": "carousel",
"submitOnChange": false,
"value": {"fileSrc": "https://sim.simulator.company/static/logo.svg",
"fileName": "ADSEFEFJJ12314FGG",
"type": "image/png",
"size": "1024",
"title": "Logo.svg"
},
"options": [{"title": "Element title",
"value": {"fileSrc": "https://sim.simulator.company/static/logo.svg",
"fileName": "ADSEFEFJJ12314FGG",
"type": "image/png",
"size": "1024",
"title": "Logo.svg"
}
}
]
}

Copy

Description

The "Copy" icon allows the user to copy information into the clipboard.

Configuration

id required	string Identifier of the component (must be unique within the scope of the form)
visibility	string Default: "visible" Enum: "visible" "hidden" "disabled" Component visibility : visible - component is displayed on the page, can be used hidden - component is not displayed on the page disabled - component is displayed, but cannot be used
row	string Row number. Components with the same row number will be aligned in one row
w	string Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row
styleClass	string css class that is defined in 'styles.css'
title	string This value is used as a title for the copy chip
class required	string Value: "copy" Class of the component
tooltip	string Tooltips display informative text when users hover over an element.
value	string Value that will be copied to the clipboard
align	string Enum: "left" "right" "center" Horizontal alignement
submitOnClick	boolean Enum: true false if true, clicking the copy element will first submit form data to Corezoid, wait for response, then copy the current value to clipboard. If the server response updated the value, the new value will be copied. If false, copies current value immediately without server interaction.
	object extra settings

{"id": "component-1",
"visibility": "visible",
"row": "",
"w": "100",
"styleClass": "my-custom-class",
"title": "ID",
"class": "copy",
"tooltip": "tooltip text",
"value": "LoremIpsulum",
"align": "left",
"submitOnClick": false,
"extra": {"notificationText": "Copied to clipboard"
}
}

Upload

Description

The "Upload" component allows the user to upload files to your app. After clicking, the system file explorer will appear, allowing the user to choose a file to upload.

Configuration

id required	string Identifier of the component (must be unique within the scope of the form)
visibility	string Default: "visible" Enum: "visible" "hidden" "disabled" Component visibility : visible - component is displayed on the page, can be used hidden - component is not displayed on the page disabled - component is displayed, but cannot be used
row	string Row number. Components with the same row number will be aligned in one row
w	string Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row
styleClass	string css class that is defined in 'styles.css'
	object Value of the component
required	boolean Default: false Enum: true false If set to true, this will impact the visibility of the submit button on this form. “Labels” allows the user to display information to other users.
error	boolean Default: false Enum: true false Error flag
errorMsg	string Error message. Will be visible when component's 'error' flag is set to true
helpMsg	string Help message. Will be visible when component's 'error' flag is set to false
submitOnChange	boolean Default: false Enum: true false if true, changes of the element's value will trigger /send request.
class required	string Value: "upload" Class of the component
title	string Title text
align	string Enum: "left" "right" "center" Horizontal alignement
type	string Default: "default" Enum: "default" "webcam" Component type : default - upload component with preview, file will be selected from the hard disk webcam - upload component with preview, screenshot will be made from webcam
required	object extra settings

{"id": "component-1",
"visibility": "visible",
"row": "",
"w": "100",
"styleClass": "my-custom-class",
"value": {"id": 34,
"fileName": "ADSEFEFJJ12314FGG",
"type": "application/pdf",
"size": "1024",
"title": "File.pdf"
},
"required": false,
"error": false,
"errorMsg": "This field contains an error",
"helpMsg": "This information is needed to make our product better",
"submitOnChange": false,
"class": "upload",
"title": "Element title",
"align": "left",
"type": "default",
"extra": {"accept": "image/png,application/pdf",
"minSize": "10",
"maxSize": "1024",
"errorMsgInvalidFileType": "Invalid file type",
"errorMsgMinImageSize": "File is to small",
"errorMsgMaxImageSize": "File is to large",
"api": {"downloadUrl": "https://api.example.com/download",
"uploadUrl": "https://api.example.com/upload",
"auth": "Bearer eyJ1c2VySWQiOjEsIn"
},
"screenshotFormat": "image/png",
"videoConstraints": {"width": 1280,
"height": 720,
"facingMode": "user"
},
"mirrored": false
}
}

Attachment

Description

Attachment allow user to upload multiply files to your app. After click the system file explorer will appear, where user can choose file to upload or use drag&drop

Configuration

id required	string Identifier of the component (must be unique within the scope of the form)
visibility	string Default: "visible" Enum: "visible" "hidden" "disabled" Component visibility : visible - component is displayed on the page, can be used hidden - component is not displayed on the page disabled - component is displayed, but cannot be used
row	string Row number. Components with the same row number will be aligned in one row
w	string Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row
styleClass	string css class that is defined in 'styles.css'
value	any Value of the component
required	boolean Default: false Enum: true false If set to true, this will impact the visibility of the submit button on this form. “Labels” allows the user to display information to other users.
error	boolean Default: false Enum: true false Error flag
errorMsg	string Error message. Will be visible when component's 'error' flag is set to true
helpMsg	string Help message. Will be visible when component's 'error' flag is set to false
submitOnChange	boolean Default: false Enum: true false if true, changes of the element's value will trigger /send request.
class required	string Value: "attachment" Class of the component
required	object extra settings

{"id": "component-1",
"visibility": "visible",
"row": "",
"w": "100",
"styleClass": "my-custom-class",
"value": null,
"required": false,
"error": false,
"errorMsg": "This field contains an error",
"helpMsg": "This information is needed to make our product better",
"submitOnChange": false,
"class": "attachment",
"extra": {"multiple": true,
"label": "Drop files to attach, or",
"browseLinkLabel": "browse",
"accept": "image/png,application/pdf",
"maxFileSize": "1024",
"api": {"downloadUrl": "https://api.example.com/download",
"uploadUrl": "https://api.example.com/upload",
"auth": "Bearer eyJ1c2VySWQiOjEsIn"
}
}
}

Widget

Description

We have integrated with Twilio video and Onfido.

Default widget

The "Widget" component allows the user to use the HTML iframe tag.

Web comments widget

Web comments allow users to add commentaries on a page.

Follow the next steps to enable this feature:

1. Go to Simulator.company
2. Select "Communications"
3. Choose "Comments Widget"
4. Create Comments Widget actor
5. Copy actorId
6. Go to script
7. Insert the actorId into the `ctrlSetting.webComments.{{actorId}}` widget section.

Configuration

id required	string Identifier of the component (must be unique within the scope of the form)
visibility	string Default: "visible" Enum: "visible" "hidden" "disabled" Component visibility : visible - component is displayed on the page, can be used hidden - component is not displayed on the page disabled - component is displayed, but cannot be used
row	string Row number. Components with the same row number will be aligned in one row
w	string Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row
styleClass	string css class that is defined in 'styles.css'
class required	string Value: "widget" Class of the component
type	string Default: "default" default default twilio onfido webComments amazonConnect
submitOnChange	boolean Enum: true false if true, changes of the element's value will trigger /send request.
required	object extra settings

Example

{"id": "component-1",
"visibility": "visible",
"row": "",
"w": "100",
"styleClass": "my-custom-class",
"class": "widget",
"type": "default",
"submitOnChange": false,
"extra": {"widgetUrl": "https://doc.corezoid.com/docs/quick-start",
"allowFullScreen": false,
"allow": "camera; microphone"
}
}

Edit

Description

The "Edit" component allows users to enter and edit text. It enables users to input text within a user interface. Typically, "Edit" components are used in forms and dialogs.

Text edit

The "Text Edit" component allows users to input any strings of text.

Int edit

The "Int Edit" component allows users to input only integer values.

Float edit

The "Float Edit" component allows users to input both integer and floating-point numbers.

Phone edit

The "Phone Edit" component offers users a user-friendly form for inputting phone numbers.

Email edit

he "Email Edit" component includes built-in email validation and will display an error if any mistakes are made while typing an email address.

Password edit

The "Password Edit" component allows users to type a password where each symbol is replaced with an asterisk (*).

Multiline edit

The "multiline" property transforms the text field into a multiline element. You can provide the number of rows in the props.

Color picker edit

The "ColorPicker Edit" component provides users with a convenient color picker interface to choose a color.

Date edit

The "Date Edit" component provides users with a convenient calendar interface to choose a date.

Configuration

id required	string Identifier of the component (must be unique within the scope of the form)
visibility	string Default: "visible" Enum: "visible" "hidden" "disabled" Component visibility : visible - component is displayed on the page, can be used hidden - component is not displayed on the page disabled - component is displayed, but cannot be used
row	string Row number. Components with the same row number will be aligned in one row
w	string Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row
styleClass	string css class that is defined in 'styles.css'
required	boolean Default: false Enum: true false If set to true, this will impact the visibility of the submit button on this form. “Labels” allows the user to display information to other users.
error	boolean Default: false Enum: true false Error flag
errorMsg	string Error message. Will be visible when component's 'error' flag is set to true
helpMsg	string Help message. Will be visible when component's 'error' flag is set to false
submitOnChange	boolean Default: false Enum: true false if true, changes of the element's value will trigger /send request.
class required	string Value: "edit" Class of the component
type	string Default: "text" text text int float phone email password multiline date colorPicker
title	string Title text
autoFocus	boolean Default: false
placeholder	string
	object
mask	string The mask pattern (could only be applied on input), where definitions are: 0 - any digit a - any letter * - any char other chars which is not in custom definitions supposed to be fixed [] - make input optional {} - include fixed part in unmasked value ` - prevent symbols shift back
value	string Value of the component
regexp	string
submitOnEnter	boolean Default: false Enum: true false if true, 'Enter' key will trigger /send request.
	object extra settings

Example

{"id": "component-1",
"visibility": "visible",
"row": "",
"w": "100",
"styleClass": "my-custom-class",
"required": false,
"error": false,
"errorMsg": "This field contains an error",
"helpMsg": "This information is needed to make our product better",
"submitOnChange": false,
"class": "edit",
"type": "text",
"title": "Element title",
"autoFocus": false,
"placeholder": "Enter your name",
"maskOptions": {"placeholderChar": "_",
"lazy": true
},
"mask": "+{38}(000)000-00-00",
"value": "string",
"regexp": ["^a-z"
],
"submitOnEnter": false,
"extra": {"length": 2,
"removeWhitespace": false
}
}

Select

Description

Select components are used for collecting user-provided information from a list of options.

Default select

Menus are positioned under their emitting elements, unless they are located close to the bottom of the viewport.

Autocomplete select

The autocomplete select is a regular text input that is enhanced with a panel of suggested options.

Configuration

id required	string Identifier of the component (must be unique within the scope of the form)
visibility	string Default: "visible" Enum: "visible" "hidden" "disabled" Component visibility : visible - component is displayed on the page, can be used hidden - component is not displayed on the page disabled - component is displayed, but cannot be used
row	string Row number. Components with the same row number will be aligned in one row
w	string Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row
styleClass	string css class that is defined in 'styles.css'
value	string Value of the component
required	boolean Default: false Enum: true false If set to true, this will impact the visibility of the submit button on this form. “Labels” allows the user to display information to other users.
error	boolean Default: false Enum: true false Error flag
errorMsg	string Error message. Will be visible when component's 'error' flag is set to true
helpMsg	string Help message. Will be visible when component's 'error' flag is set to false
submitOnChange	boolean Default: false Enum: true false if true, changes of the element's value will trigger /send request.
class required	string Value: "select" Class of the component
type	string (Type of the select component) Default: "default" default default autocomplete
title	string Title text
tooltip	string Tooltips display informative text when users hover over an element.
autoFocus	boolean Default: false
placeholder	string
resettable	boolean (If true, reset button will be displayed) Default: false
submitOnScroll	boolean (If true, /send request will be triggered on scroll) Default: false
	Array of objects

Example

{"id": "component-1",
"visibility": "visible",
"row": "",
"w": "100",
"styleClass": "my-custom-class",
"value": "option-id",
"required": false,
"error": false,
"errorMsg": "This field contains an error",
"helpMsg": "This information is needed to make our product better",
"submitOnChange": false,
"class": "select",
"type": "default",
"title": "Element title",
"tooltip": "tooltip text",
"autoFocus": false,
"placeholder": "Select your favorite number",
"resettable": false,
"submitOnScroll": false,
"options": [{"title": "Option title",
"value": "option-id",
"visibility": "visible"
}
]
}

Multiselect

Description

The “Multiselect” component can manage multiple selections simultaneously.

Configuration

id required	string Identifier of the component (must be unique within the scope of the form)
visibility	string Default: "visible" Enum: "visible" "hidden" "disabled" Component visibility : visible - component is displayed on the page, can be used hidden - component is not displayed on the page disabled - component is displayed, but cannot be used
row	string Row number. Components with the same row number will be aligned in one row
w	string Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row
styleClass	string css class that is defined in 'styles.css'
	Array of objects Value of the component
required	boolean Default: false Enum: true false If set to true, this will impact the visibility of the submit button on this form. “Labels” allows the user to display information to other users.
error	boolean Default: false Enum: true false Error flag
errorMsg	string Error message. Will be visible when component's 'error' flag is set to true
helpMsg	string Help message. Will be visible when component's 'error' flag is set to false
submitOnChange	boolean Default: false Enum: true false if true, changes of the element's value will trigger /send request.
class required	string Value: "multiselect" Class of the component
title	string Title text
placeholder	string
autoFocus	boolean Default: false
	Array of objects
	object extra settings

{"id": "component-1",
"visibility": "visible",
"row": "",
"w": "100",
"styleClass": "my-custom-class",
"value": [{"value": "option-1",
"title": "option one"
}
],
"required": false,
"error": false,
"errorMsg": "This field contains an error",
"helpMsg": "This information is needed to make our product better",
"submitOnChange": false,
"class": "multiselect",
"title": "Element title",
"placeholder": "Select your favorite numbers",
"autoFocus": false,
"options": [{"title": "Option title",
"value": "option-id",
"visibility": "visible",
"tooltip": "tooltip text"
}
],
"extra": {"length": 2
}
}

Radio

Description

The “Radio” component enables the user to select a single option from a set. Radio buttons are used when the user should be able to view all available options

Configuration

id required	string Identifier of the component (must be unique within the scope of the form)
visibility	string Default: "visible" Enum: "visible" "hidden" "disabled" Component visibility : visible - component is displayed on the page, can be used hidden - component is not displayed on the page disabled - component is displayed, but cannot be used
row	string Row number. Components with the same row number will be aligned in one row
w	string Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row
styleClass	string css class that is defined in 'styles.css'
value	string Value of the component
required	boolean Default: false Enum: true false If set to true, this will impact the visibility of the submit button on this form. “Labels” allows the user to display information to other users.
error	boolean Default: false Enum: true false Error flag
errorMsg	string Error message. Will be visible when component's 'error' flag is set to true
helpMsg	string Help message. Will be visible when component's 'error' flag is set to false
submitOnChange	boolean Default: false Enum: true false if true, changes of the element's value will trigger /send request.
class required	string Value: "radio" Class of the component
	object extra settings
title	string Title text
align	string (alignement) Default: "left" Enum: "left" "right" "center"
	Array of objects

{"id": "component-1",
"visibility": "visible",
"row": "",
"w": "100",
"styleClass": "my-custom-class",
"value": "option-id",
"required": false,
"error": false,
"errorMsg": "This field contains an error",
"helpMsg": "This information is needed to make our product better",
"submitOnChange": false,
"class": "radio",
"extra": {"direction": "column"
},
"title": "Element title",
"align": "left",
"options": [{"title": "Option title",
"value": "option-id",
"visibility": "visible"
}
]
}

Phone

Description

The "Phone Edit" component offers users a user-friendly form for inputting phone numbers.

Configuration

id required	string Identifier of the component (must be unique within the scope of the form)
visibility	string Default: "visible" Enum: "visible" "hidden" "disabled" Component visibility : visible - component is displayed on the page, can be used hidden - component is not displayed on the page disabled - component is displayed, but cannot be used
row	string Row number. Components with the same row number will be aligned in one row
w	string Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row
styleClass	string css class that is defined in 'styles.css'
	object Value of the component
required	boolean Default: false Enum: true false If set to true, this will impact the visibility of the submit button on this form. “Labels” allows the user to display information to other users.
error	boolean Default: false Enum: true false Error flag
errorMsg	string Error message. Will be visible when component's 'error' flag is set to true
helpMsg	string Help message. Will be visible when component's 'error' flag is set to false
submitOnChange	boolean Default: false Enum: true false if true, changes of the element's value will trigger /send request.
class required	string Value: "phone" Class of the component
title	string Title text
	object
regexp	string (Regular expression for validation of the countryCode+number)
	Array of objects
	object extra settings

{"id": "component-1",
"visibility": "visible",
"row": "",
"w": "100",
"styleClass": "my-custom-class",
"value": {"countryCode": "380",
"number": "3567322"
},
"required": false,
"error": false,
"errorMsg": "This field contains an error",
"helpMsg": "This information is needed to make our product better",
"submitOnChange": false,
"class": "phone",
"title": "Element title",
"placeholder": {"countryCode": "380",
"number": "3567322"
},
"regexp": "^[0-9]{9,17}$",
"options": [{"title": "+380",
"value": "380"
}
],
"extra": {"placeholder": {"countryCode": "code",
"number": "number"
}
}
}

Tab

Description

Tabs provide a convenient way to explore and switch between various views. They help organize and facilitate navigation between groups of related content that exist at the same hierarchical level.

Configuration

id required	string Identifier of the component (must be unique within the scope of the form)
visibility	string Default: "visible" Enum: "visible" "hidden" "disabled" Component visibility : visible - component is displayed on the page, can be used hidden - component is not displayed on the page disabled - component is displayed, but cannot be used
row	string Row number. Components with the same row number will be aligned in one row
w	string Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row
styleClass	string css class that is defined in 'styles.css'
class required	string Value: "tab" Class of the component
value	string (Selected tab id)
align	string Enum: "left" "right" "center" Horizontal alignement
	Array of objects
submitOnChange	boolean Enum: true false if true, changes of the element's value will trigger /send request.

{"id": "component-1",
"visibility": "visible",
"row": "",
"w": "100",
"styleClass": "my-custom-class",
"class": "tab",
"value": "first_tab",
"align": "left",
"options": [{"title": "First tab",
"value": "first_tab",
"error": false,
"visibility": "visible",
"styleClass": "my-custom-class"
}
],
"submitOnChange": false
}

Comments

Description

Component comments allow user to show comments with user name, description, text, date of comment and location.

Configuration

id required	string Identifier of the component (must be unique within the scope of the form)
visibility	string Default: "visible" Enum: "visible" "hidden" "disabled" Component visibility : visible - component is displayed on the page, can be used hidden - component is not displayed on the page disabled - component is displayed, but cannot be used
row	string Row number. Components with the same row number will be aligned in one row
w	string Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row
styleClass	string css class that is defined in 'styles.css'
class required	string Value: "comments" Class of the component
placeholder	string (Placeholder text)
	Array of objects (message)

{"id": "component-1",
"visibility": "visible",
"row": "",
"w": "100",
"styleClass": "my-custom-class",
"class": "comments",
"placeholder": "There is no messages yet",
"value": [{"date": "01.01.2021 14:01",
"description": "description",
"location": "location",
"value": "Text 1",
"user": {"name": "John Doe"
}
}
]
}

Table

Description

Tables present datasets in an organized format that can be fully customized. They showcase data in a manner that's easy to scan, so that users can look for patterns and insights. Tables can be seamlessly integrated into primary content, such as modal windows, and may include:

- Corresponding visual representations
- Navigation options
- Tools for querying and manipulating data

Default table

A simple example with no frills.

Radio table

Radio table allows the user to select one row from a table.

Check table

Checkboxes allow the user to select one or more rows from a table.

Group table

Group tables allow the user to group table rows based on common attributes.

Configuration

id required	string Identifier of the component (must be unique within the scope of the form)
visibility	string Default: "visible" Enum: "visible" "hidden" "disabled" Component visibility : visible - component is displayed on the page, can be used hidden - component is not displayed on the page disabled - component is displayed, but cannot be used
row	string Row number. Components with the same row number will be aligned in one row
w	string Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row
styleClass	string css class that is defined in 'styles.css'
class required	any Value: "table"
type	string Default: "default" The type of the table default default radio check group
	Array of objects
	Array of objects (Table row)
submitOnScroll	boolean (If true, /send request will be triggered on scroll) Default: false
	object extra settings

Example

{"id": "component-1",
"visibility": "visible",
"row": "",
"w": "100",
"styleClass": "my-custom-class",
"class": "table",
"type": "default",
"head": [{"value": "firstName",
"title": "First name",
"visibility": "visible",
"styleClass": "my-custom-class",
"isSticky": false
}
],
"body": [{"value": "firtsRow",
"groupValue": "string",
"styleClass": "my-custom-class",
"clickable": true,
"options": [{"value": "firstName",
"title": "John",
"button": {"title": "Edit",
"visibility": "visible",
"extra": {"icon": "phone",
"options": [{"title": "Option title",
"value": "option-id",
"visibility": "visible"
}
]
}
},
"file": {"fileSrc": "https://sim.simulator.company/static/logo.svg",
"fileName": "ADSEFEFJJ12314FGG",
"type": "image/png",
"size": "1024",
"title": "Logo.svg"
},
"check": {"value": false,
"visibility": "visible",
"error": false
},
"copy": {"value": "1234567890",
"title": "Copy",
"tooltip": "CopyTooltip",
"visibility": "visible",
"extra": {"notificationText": "Copied!"
}
},
"styleClass": "my-custom-class"
}
]
}
],
"submitOnScroll": false,
"extra": {"page": "1",
"totalPages": "10",
"rowsPerPage": "10",
"rowsPerPageOptions": ["10",
"20",
"30"
],
"rowsPerPageTitle": "Row per page:",
"rowsPerPageDescr": "1-10 of 100",
"sort": {"value": "firstName",
"order": "desc"
}
}
}

Stepper

Description

The “Stepper” component enables exploring and switching between different views. The Stepper organizes and allows navigation between related groups of content that are located at the same hierarchy level. It provides the same functionality as the “Tab” component, however with another visualization.

Default stepper

Default stepper is used for desktop devices

Mobile stepper

Mobile stepper is used for mobile devices

Example

You want the sidebar stepper to be hidden on mobile devices and the main layout stepper to be visible on mobile devices.

By setting `mobileVisible: false` for the sidebar stepper and `mobileVisible: true` for the main layout stepper, you are configuring the behavior so that the sidebar stepper will be hidden on mobile devices and the main layout stepper will be visible on mobile devices.This setup will result in an auto-closing sidebar stepper (hidden on mobile) and an auto-opening stepper on the main layout (visible on mobile).

Desktop layout

Mobile layout

Configuration

id required	string Identifier of the component (must be unique within the scope of the form)
visibility	string Default: "visible" Enum: "visible" "hidden" "disabled" Component visibility : visible - component is displayed on the page, can be used hidden - component is not displayed on the page disabled - component is displayed, but cannot be used
row	string Row number. Components with the same row number will be aligned in one row
w	string Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row
styleClass	string css class that is defined in 'styles.css'
class required	string Value: "stepper" Class of the component
type	string Default: "default" default default mobile
title	string Title text
value	string value of the component
align	string (alignement) Default: "left" Enum: "left" "right" "center"
	object extra settings
	Array of objects

Example

{"id": "component-1",
"visibility": "visible",
"row": "",
"w": "100",
"styleClass": "my-custom-class",
"class": "stepper",
"type": "default",
"title": "Element title",
"value": "option-id",
"align": "left",
"extra": {"mobileVisible": false
},
"options": [{"title": "Option title",
"value": "option-id",
"visibility": "visible",
"completed": false
}
]
}

Otp

Description

The "OTP" component allows users to input a one-time password (OTP).

Configuration

id required	string Identifier of the component (must be unique within the scope of the form)
visibility	string Default: "visible" Enum: "visible" "hidden" "disabled" Component visibility : visible - component is displayed on the page, can be used hidden - component is not displayed on the page disabled - component is displayed, but cannot be used
row	string Row number. Components with the same row number will be aligned in one row
w	string Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row
styleClass	string css class that is defined in 'styles.css'
	object Value of the component
required	boolean Default: false Enum: true false If set to true, this will impact the visibility of the submit button on this form. “Labels” allows the user to display information to other users.
error	boolean Default: false Enum: true false Error flag
errorMsg	string Error message. Will be visible when component's 'error' flag is set to true
helpMsg	string Help message. Will be visible when component's 'error' flag is set to false
submitOnChange	boolean Default: false Enum: true false if true, changes of the element's value will trigger /send request.
class required	string Value: "otp" Class of the component
type	string Default: "text" Enum: "text" "int" With "int" type sets the keyboard to numeric input mode on mobile devices.
title	string Title text
autoFocus	boolean Default: false
	object extra settings

{"id": "component-1",
"visibility": "visible",
"row": "",
"w": "100",
"styleClass": "my-custom-class",
"value": {"otp-0": "0",
"otp-1": "1",
"otp-2": "2",
"otp-3": "3"
},
"required": false,
"error": false,
"errorMsg": "This field contains an error",
"helpMsg": "This information is needed to make our product better",
"submitOnChange": false,
"class": "otp",
"type": "text",
"title": "Element title",
"autoFocus": false,
"extra": {"length": 4
}
}

Signature

Description

The "Signature" component allows users to create handwritten signatures and submit them as part of a form.

Configuration

id required	string Identifier of the component (must be unique within the scope of the form)
visibility	string Default: "visible" Enum: "visible" "hidden" "disabled" Component visibility : visible - component is displayed on the page, can be used hidden - component is not displayed on the page disabled - component is displayed, but cannot be used
row	string Row number. Components with the same row number will be aligned in one row
w	string Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row
styleClass	string css class that is defined in 'styles.css'
class required	string Value: "signature" Class of the component
	object Value of the component
title	string Title text
	object extra settings
required	boolean Default: false Enum: true false If set to true, this will impact the visibility of the submit button on this form. “Labels” allows the user to display information to other users.
error	boolean Default: false Enum: true false Error flag
errorMsg	string Error message. Will be visible when component's 'error' flag is set to true
helpMsg	string Help message. Will be visible when component's 'error' flag is set to false
submitOnChange	boolean Default: false Enum: true false if true, changes of the element's value will trigger /send request.

{"id": "component-1",
"visibility": "visible",
"row": "",
"w": "100",
"styleClass": "my-custom-class",
"class": "signature",
"value": null,
"title": "Element title",
"extra": {"api": {"url": "https://api.example.com",
"auth": "Bearer eyJ1c2VySWQiOjEsIn"
},
"strokeStyle": {"strokeColor": "#000000",
"strokeWidth": 5,
"lineCap": "round"
},
"clearButtonTitle": "Clear",
"saveButtonTitle": "Save"
},
"required": false,
"error": false,
"errorMsg": "This field contains an error",
"helpMsg": "This information is needed to make our product better",
"submitOnChange": false
}

viewModel

Injection of variable value into the page config: "Your personal discount is {{variableName}} %"

Example

{
  "code":200,
  "viewModel":{ "value": "10" }
}
+
{
  "id":"label",
  "value":"Your personal discount is {{value}} %"
}
=
{
  "id":"label",
  "value":"Your personal discount is 10 %"
}

locale

Page localization is stored separately from the page configurtion

  **Example**

  /locale = common keys for all pages.
  /pages/index/locale = keys for "index" page only.

  this two objects will be merged together, and all keys founded in page config for 'index' page will be replaced with values.

  ```javascript
  {
    "code":200,
    "viewModel":{ "localeKey": "[[sayHello]], [[sayGoodbye]]", "name": "world" },
    "language": "en",
  }

  +

  /pages/index/locale

  {
    "sayHello": "Hello {{name}}",
    "sayGoodbye": {
      "en": "goodbye!",
      "uа": "до побачення!"
    }
  }

  +

  /pages/index/config

  {
    "id":"label",
    "value":"[[localeKey]]"
  }

  =

  {
    "id":"label",
    "value":"Hello world, goodbye!"
  }
  ```

definitions

Forms, sections, components that are defined in /definitions, can be reused across the pages.

Example

Folder structure:

/definitions
  info
  test
  next

File name equals value of $ref attribute

Form reference:

  {
    "id": "info_test",
    "type": "body",
    "$ref": "#/info"
  }

Section reference:

  {
    "id": "info_test",
    "type": "body",
    "sections": [
      {
        "id": "common",
        "$ref": "#/test"
      }
    ]
  }

Button reference:

    {
      "class": "button",
      "$ref": "#/next"
    }

bbcode

Bbcode - it is a string with pseudo code, that will be converted into HTML.

bbcode	HTML
[b]Bold text[/b]	Bold text
[i]Italic text[/i]	Italic text
[u]Underline text[/u]	Underline text
[ul][]Unordered list[/][/ul]	Undordered list
[iurl=log_in]Internal link[/iurl]	Internal link
[url=https://simulator.company] External link[/url]	External link
[div]New line[/div]	New line
[br]
[color=red]Text color[/color]	Text color
[size=12]Font size[/size]	Font size
[bg=green]Text back ground[/bg]	Text back ground

CSS styling

Smart Forms provides flexible CSS styling with support for both legacy single-file styles and modern organized structure with @import capabilities.

Less.js Preprocessing: Smart Forms uses Less format which compiles to CSS on every file save. This enables variables, mixins, functions, and @import statements for better code organization and maintainability.

Each component has a default class that can be accessed and styled. Additionally, to style a specific element, use the "styleClass" property in the component.

Legacy style file in the project root folder

You may encounter smart forms where styling is organized in a single style file in the root folder of the project.

Here is an example of component styling in Less format, featuring variables, mixins, and Less-specific functions:

// ===== Mixins =====
// This mixin applies the same background, border and text color on hover and focus.
.hoverState(@bg; @border; @color) {
  &:hover,
  &:focus {
    background-color: @bg !important;
    border-color: @border !important;
    color: @color !important;
  }
}

// This mixin adds a subtle accessible focus ring without shifting layout.
.focusRing(@c: @primaryColor) {
  outline: none;
  box-shadow: 0 0 0 2px fade(@c, 45%);
  transition: box-shadow 0.15s ease;
}

// This mixin truncates overflowing single-line text with an ellipsis.
.truncate() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// This mixin generates a tinted hover using a lighter version of a color.
.tintHover(@c; @pct: 12%) {
  .hoverState(lighten(@c, @pct); lighten(@c, @pct); @fontColor);
}

// This mixin generates a shaded hover using a darker version of a color.
.shadeHover(@c; @pct: 10%) {
  .hoverState(darken(@c, @pct); darken(@c, @pct); @fontColor);
}

// This mixin generates a translucent background from a solid color.
.translucentBg(@c; @alpha: 50%) {
  background-color: fade(@c, @alpha);
}

// This mixin adjusts saturation for a more vivid or muted look.
.saturationHover(@c; @pct: 10%) {
  .hoverState(saturate(@c, @pct); saturate(@c, @pct); @fontColor);
}

// This mixin sets a contrasting text color based on luminance heuristics.
.onAccent(@c) when (lightness(@c) >= 50%) {
  color: #111111;
}
.onAccent(@c) when (lightness(@c) < 50%) {
  color: #ffffff;
}

// ===== Tokens =====
// These variables define the core brand colors.
@fontColor: #000000;
@secondaryColor: #EC9704;
@primaryColor: #F7C815;
@primaryOpacityColor: rgba(236,151,2, 0.5);

// These derived tokens use color functions for consistent variants.
@primaryBorderStrong: darken(@primaryColor, 8%);
@primaryBorderWeak: lighten(@primaryColor, 8%);
@primaryFocusHalo: fade(@primaryColor, 45%);
@secondarySoftBg: fade(@secondaryColor, 30%);
@accentTextOnPrimary: if((lightness(@primaryColor) >= 50%), #111111, #ffffff);

// ===== Components =====
// Button styles define visual variants and interactive states.
.button {
  // This ensures a visible focus outline for keyboard users.
  &:focus-visible { .focusRing(@primaryColor); }

  &__menu {
    .translucentBg(@primaryColor, 50%);
    &__item {
      background-color: @primaryColor;
      .onAccent(@primaryColor);
    }
  }

  // Default button
  &__default {
    background-color: @primaryColor;
    border-color: @primaryColor;
    .onAccent(@primaryColor);

    // This reuses the same hover and focus pattern via a shaded variant.
    .shadeHover(@primaryColor, 8%);
  }

  // Text button
  &__text {
    color: @primaryColor;
    .hoverState(@primaryOpacityColor; @primaryOpacityColor; @fontColor);
  }

  // Secondary button
  &__secondary {
    border-color: @primaryColor;
    color: @primaryColor;
    .tintHover(@primaryColor, 18%);
  }

  // Tertiary button
  &__tertiary {
    color: @fontColor;
    .hoverState(@primaryOpacityColor; @primaryOpacityColor; @secondaryColor);

    &:hover,
    &:focus {
      .fill { fill: @secondaryColor !important; }
    }
  }

  // Quaternary button
  &__quaternary {
    background-color: @primaryOpacityColor;
    border-color: @primaryColor;
    color: @secondaryColor;
    .hoverState(@primaryOpacityColor; @primaryOpacityColor; @secondaryColor);
  }
}

// Check component sets the main accent color for icons.
.check {
  .fill { fill: @primaryColor !important; }
}

// Label reserved for future use.
.label {}

// Divider reserved for future use.
.divider {}

// Image reserved for future use.
.image {}

// File reserved for future use.
.file {}

// Carousel reserved for future use.
.carousel {}

// Copy includes an interactive container that tints icons on hover.
.copy {
  &__container {
    &:hover,
    &:focus {
      .fill { fill: @primaryColor; }
    }
  }
}

// Upload component colors edges and glyphs with the accent.
.upload {
  &__corner { border-color: @primaryColor !important; }
  &__icon {
    path { fill: @primaryColor !important; }
  }
}

// Widget reserved for future use.
.widget {}

// Edit indicates focus using border and label color plus a halo.
.edit.focus {
  .field {
    border-color: @primaryColor !important;
    box-shadow: 0 0 0 2px @primaryFocusHalo;
  }
  .label { color: @primaryColor !important; }
}

// Calendar uses a translucent background and solid accents.
.calendar {
  .translucentBg(@primaryColor, 50%) !important;

  .selected {
    border-color: @primaryColor !important;
    background-color: @primaryColor !important;
    .onAccent(@primaryColor);
  }
  .button {
    border-color: @primaryColor !important;
    background-color: @primaryColor !important;
    .onAccent(@primaryColor);
    &:hover,
    &:focus {
      background-color: lighten(@primaryColor, 10%) !important;
      border-color: @primaryBorderWeak !important;
    }
  }
}

// Select fields communicate focus with accent border and halo.
.select {
  .focus {
    .field {
      border-color: @primaryColor !important;
      .focusRing(@primaryColor);
    }
    .label { color: @primaryColor !important; }
  }
}

// Multiselect mirrors select focus and also accents chips.
.multiselect.focus {
  .field { border-color: @primaryColor !important; }
  .label { color: @primaryColor !important; }
  .chip { border-color: @primaryColor !important; }
}

// Radio uses the accent color for checked state glyphs.
.radio {
  .fill { fill: @primaryColor !important; }
}

// Phone reserved for future use.
.phone {}

// Tab items are accented and prevent layout breaks with truncation.
.tab {
  &__item {
    border-color: @primaryColor !important;

    span {
      color: @primaryColor !important;
      .truncate();
    }

    &:hover,
    &:focus {
      background-color: @secondarySoftBg;
    }
  }
}

// Comments reserved for future use.
.comments {}

// Table uses the accent color for icons and controls.
.table {
  .fill { fill: @primaryColor !important; }

  &__pagination {
    &__button {
      color: @primaryColor !important;
      border-color: @primaryColor !important;
      .hoverState(@primaryOpacityColor; @primaryColor; @fontColor);
      &:focus-visible { .focusRing(@primaryColor); }
    }
  }

  &__button {
    border-color: @primaryColor;
    color: @primaryColor;
    .hoverState(@primaryOpacityColor; @primaryColor; @fontColor);
  }
}

// Stepper reserved for future use.
.stepper {}
.stepperMobile {}

// Otp highlights focused input with the accent and halo.
.otp {
  &__edit.focus {
    .field {
      border-color: @primaryColor !important;
      box-shadow: 0 0 0 2px @primaryFocusHalo;
    }
  }
}

// Progress bar adopts the primary color for the indicator.
.progressBar { color: @primaryColor !important; }

// Section header and close controls use the accent.
.section {
  .close_btn {
    .fill { fill: @primaryColor !important; }
  }
  &__modal__header {
    background-color: @primaryColor;
    .onAccent(@primaryColor);
  }
}

// Modal width sets a fixed maximum for centered dialogs.
.section {
  &.modal {
    .section__wrap { max-width: 700px; }
  }
}

// Slider re-colors track, handle and dots using accent variants.
.slider {
  .rc-slider-track { background-color: @primaryColor; }
  .rc-slider-handle {
    background-color: @primaryColor;
    border-color: @primaryBorderStrong;
    &:hover,
    &:focus {
      background-color: lighten(@primaryColor, 6%);
      border-color: @primaryBorderWeak;
      box-shadow: 0 0 0 2px @primaryFocusHalo;
    }
  }
  .rc-slider-dot-active { border-color: @primaryColor; }
  .rc-slider-rail {
    height: 20px;
    background-color: grey;
    border-radius: 0;
  }
  .slider__footer {
    display: none;
    margin-top: 8px;
  }
  .rc-slider-dot {
    height: 24px;
    width: 8px;
    border-radius: 4px;
  }
  .rc-slider-step { height: 20px; }
}

// Toggle uses border in rest and fills active with the accent.
.toggle {
  &__button {
    border-color: @primaryColor !important;
    .active { background-color: @primaryColor !important; }
    &:hover { border-color: darken(@primaryColor, 6%) !important; }
    &:focus-visible { .focusRing(@primaryColor); }
  }
}

// Attachment adopts a vivid secondary background with contrasting text.
.attachment {
  background-color: @secondaryColor !important;
  .onAccent(@secondaryColor);
  &:hover { background-color: saturate(@secondaryColor, 8%) !important; }
}

// Signature content uses a softer translucent variant of the secondary color.
.signature {
  &__content {
    background-color: fade(@secondaryColor, 55%) !important;
    .onAccent(@secondaryColor);
  }
}

Styles folder

For better code organization, you can use the styles folder structure:

📁 styles/
├── 📄 index        # Main stylesheet
├── 📄 colors       # Color variables
├── 📄 mixins       # Reusable mixins
└── 📄 variables    # Custom variables

The index file serves as the main entry point for your styles folder. For the styles to take effect, all other files must be imported into index using @import statements. For example: @import "colors"; or @import "mixins"; to include the colors and mixins files in your main stylesheet.

To create new style files in the styles folder, click next to the styles folder. Remember that these files must be manually imported into the index file using @import statements.

Page-Specific Styles

Add style files to individual pages for page-specific styling:

📁 pages/
├── 📁 contact/
│   ├── 📄 config
│   ├── 📄 locale
│   └── 📄 style    # Page-specific styles

Each page can have its own style file (displayed as style). Page style files are automatically included at the end of the main index stylesheet and have access to all variables, mixins, and definitions from the index file, allowing you to use existing color schemes and reusable components in your page-specific styles. These styles are isolated from other pages and apply only to the specific page for which they are defined.

To manage page-specific style files, click next to any page folder and select Add styles to create a style file or Remove styles to delete it. These files will be automatically included and don't require manual @import statements.

Example file structure:

styles/
├── index        # Main stylesheet with imports
├── constants    # Variables and color definitions
└── mixins       # Reusable style mixins

styles/constants file:

// Color palette
@primaryColor: #007bff;
@secondaryColor: #6c757d;
@successColor: #28a745;
@dangerColor: #dc3545;
@warningColor: #ffc107;

// Typography
@fontFamily: 'Roboto', sans-serif;
@fontSize: 14px;
@fontWeight: 400;

// Layout
@containerMaxWidth: 1200px;
@borderRadius: 4px;
@boxShadow: 0 2px 4px rgba(0,0,0,0.1);

styles/mixins file:

// Border radius mixin
.border-radius(@radius: @borderRadius) {
  border-radius: @radius;
}

// Box shadow mixin
.box-shadow(@shadow: @boxShadow) {
  box-shadow: @shadow;
}

// Button variant mixin
.button-variant(@color) {
  background-color: @color;
  border-color: @color;

  &:hover {
    background-color: darken(@color, 10%);
    border-color: darken(@color, 10%);
  }
}

// Flexbox center mixin
.flex-center() {
  display: flex;
  justify-content: center;
  align-items: center;
}

styles/index file:

// Import all definitions
@import "constants";
@import "mixins";

// Global styles using imported definitions
.main-container {
  max-width: @containerMaxWidth;
  font-family: @fontFamily;
  .box-shadow();
}

// Button styles using mixins
.custom-button {
  .border-radius(6px);

  &.primary {
    .button-variant(@primaryColor);
  }

  &.success {
    .button-variant(@successColor);
  }
}

// Utility classes
.centered-content {
  .flex-center();
}

Error Handling

When you save a style file, automatic Less compilation is performed. If compilation fails, the system provides clear visual feedback to help you quickly identify and fix issues. Files with errors display a red alert icon in the file tree, along with a tooltip showing the specific error message. The code editor also highlights error lines in the gutter, and clicking an error icon moves the cursor directly to the error, making it easy to locate and resolve problems.

CSS Error Example showing file tree with red error icon and editor with error annotation

Best Practices

Separate concerns: Store your variables, mixins, and component styles in separate files
Use @import: Import common definitions from styles folder
Consistent naming: Use descriptive class names with hyphens (-) for words and double underscores (__) to separate structural elements: .contact-form, .button__primary, .navigation-menu__default-option

Avoid hardcoded URLs: Use Less maps to organize external resources in one place

@images: {
  logo: "path/logo.svg";
  background: "path/bg.jpg";
};

.header {
  background-image: url(@images[logo]);
}

Limit selector nesting: Keep nesting depth under 3 levels for better performance and readability
Use Less comments: Prefer // comments over /* */ format - Less comments are removed during compilation and won't appear in production CSS

Colored icons with masks: Create reusable colored icons using CSS mask property with black and white images - any color can be applied via background-color

.colored-icon(@icon-url; @color: @primaryColor; @size: 24px) {
  width: @size;
  height: @size;
  background-color: @color;
  mask: url(@icon-url) center / contain no-repeat;
}

.delete-icon {
  .colored-icon(@images[trash], @dangerColor, 20px);
}

External image proxying: When you use external image URLs (starting with https://) in your styles, the system automatically adds the /api/1.0/image?src= prefix to proxy them through our servers for security and performance. Note that images attached to actors are considered internal and are not proxied