Codejig Reference

Properties panel

The Properties panel is mainly divided into three subsections - General, Appearance, and Advanced. There are also additional subsections like Validation and Actions when a button or field UI element is selected.

Depending on the activated item (element) you see a different set of properties. Every property is optional. Default values are acceptable and work if no customization is needed.

General

Property	Location	Usage
Component	Button, HTML text, Separator, Widget, Group box	This refers to the type of UI element
Title	Button, Tab, Widget, Group box	Title or name or the UI element
Initial state	Group box	Specifies whether the shows in an expanded or collapsed state. 'Show header' and 'Collapse' properties must be set for this option to be active
Link	Button, Widget	Opens the specified hyperlink in a new tab
Disabled	Button, Tab, Widget, Group box, Field	When checked, the item is disabled by default
Hidden	Button, HTML text, Separator, Tab, Widget, Field	When checked, the item is disabled by default
Label	HTML text, decimal, Boolean, date, table, string,	Opens the HTML editor
Field name	Field	Shows the name of the field. It can not be changed in the webpage editor once it is set. It can only be edited in the data types page
Field type	Field	Shows the data type of the field
Field label	Field	Shows the label of the field
Multiline	Field	If checked, input is shown in multline mode
Placeholder	Field	Specifies a tip text to be shown when no value is set
Formatter	Field	Specifies the format the text will take in the field
'Create new' action/Open	Select field	Specifies how to open a new window
Template	Field (table)	Choose the design of the table
View	Field (table)	specifies the view of the table
Can add	Field (table)	If checked, 'Add' button is added to the table toolbar
Can delete	Field (table)	If checked, 'Delete' button is added to the table toolbar
Has 'Create new' link	Field (table)	Add' Create new' link as a first option in the election drop-down menu
Max row count	Field (table)	Specifies number of rows to be shown without scroll
From view link	Field (table)	Specifies web page view to be opened on row click
Content type	Upload file	Depending on this property, only files with the specified extenstion will be allowed for upload
Source	Upload file	Specify the source(s) of the files to be uploaded
Preview	Upload file	The uploaded file can be shown as a link, preview image, or both
Link action	Upload file	Clicking the uploaded file link will trigger file download or open the file view in a new tab
Zoom	Upload file (image)	The option is used only with image content type and specifies whether zoom preview is available
Show header	Group box	Displays the header of a group box or other elements
Collapse	Group box	Add

Appearance

Property	Location	Usage
Size	Button, Fleld	Changes the size of the UI element
Template	Widget	Choose the design of the widget
Style	Button, Tab, Widget	Choose one of the predefined color schemes.
Icon	Button, Widget	Choose the leading icon to be shown before button title.
Icon color	Button	Choose the leading icon to be shown before button title.
Drop-down alignment	Button
Shared Styles	Button, HTML text, Tab, Widget	Add styles specified in Shared Styles page. It can be used as an alternative way to add CSS rules.
CSS	Button, HTML text, Tab, Widget, Field	Add custom styles to item. (Style will be added to item's DOM-element style attribute)
Horizontal alignment	Button, Tab, Field	Specifies horizontal alignment for the item.
Hide title	Button	Hides the title of an element
Solid	Group box	Specify group box header style. 'Show header' property must be set for this option to be active

Validation

Property	Location	Usage
Pattern	Field	Indicates the pattern of the value in the field
Minimal length	Field	Indicates the minimum length of the value in the field
Maximal length	Field	Indicates the maximum length of the value in the field
Required	Field	If checked, a value for the field must be set
Step	Field (decimal)
Minimal date	Field (date and time)	Indicates the start date
Maximum date	Field (date and time)	Indicates the end date
Minimum value	Field (number)
Maximum value
step for minutes	Field (date and time)

Advanced

Property	Location	Usage
Data source	Select field	Specifies a custom collection to populate the selection drop-down with options
Read only mode view	Field	In read-only form mode item can be displayed either as disabled input or as plain text/value
Id	Button, HTML text, Tab, Widget, Field	Identifier is added under data-identifier attribute of DOM-element. Handy when you write own selectors.
Classes	Button, HTML text, Tab, Widget, Field	Type HTML class names. Separate them with spaces. To be added to class DOM element attribute.
Tooltip	Button, Tab, Field	Adds question mark icon with comment text in popover after the label.
Tooltip placement	Button, Tab, Field	Specifies location of comment popover.
Add alternative action	Button	Provides a downside arrow near the button with an additional dropdown list item.

Actions

Property	Location	Usage
Before server action	Button	The first client-side action to be executed when user clicks the button.
Server action	Button	The server-side action to be executed. It is executed after 'before server action'.
After server action	Button	The client-side action to be executed after server-side action.
On field change	Field	Specifies the server-side action that is triggered when the value of the field is changed and loses focus
On field changed	Field	Specifies the client-side action that is triggered when the value of the field is changed and loses focus
On field filtered	Field	Specifies the action that is triggered when a list of instances is displayed
On field validate	Field	Checks the field for specified parameters
Row inserted	Field (table)	Specifies the client-side action when a user inserts a row
Row deleted	Field (table)	Specifies the client-side action when a user deletes a table row
Row click	Field (table)	Specifies the server-side action when a user clicks on a table row
Row clicked	Field (table)	Specifies the client-side action when a user clicks on a table row

Fields Section

Components panel