Appearance
$io.content
Client API reference.
Functions
$io.content.alert
Returns HTML content string for an Alert element.
Usage
js
$io.content.alert(dismissible, color, text)Description
Generates HTML content for the Alert element, which is based on the Bootstrap 4 Alert component.
Usage Scenarios
- Show an import message to catch user's attention
- Show an import message that can be read and dismissed
Parameters
dismissible
Type: Boolean
Required: Yes
Set to true, if you want the Alert to be dismissible by the user, false otherwise.
color
Type: String
Required: Yes
Specify 'zn-blue', 'zn-green', 'zn-gray', 'zn-red', 'zn-yellow', 'zn-teal', 'zn-dark' or 'zn-light' for standard colors or any CSS class name for a custom look.
text
Type: String
Required: Yes
The text for the alert.
Output
Type: String
HTML string that can be added to the page or form using the $io.dom.setHtml function.
Related Functions
$io.content.badgedText
Returns HTML content string for the Badged text element
Usage
js
$io.content.badgedText(type, color, text)Description
Generates HTML content for the Badged text element, which is based on the Bootstrap 4 Badge component.
Usage Scenarios
- Create text that is marked or highlighted with a badge-like feature
Parameters
type
Type: String
Required: Yes
Use 'zn-badge-pill' for a Pill style badge or 'zn-badge-normal' for the regular shape.
color
Type: String
Required: Yes
Specify 'zn-blue', 'zn-green', 'zn-gray', 'zn-red', 'zn-yellow', 'zn-teal', 'zn-dark' or 'zn-light' for standard colors or any CSS class name for a custom look.
text
Type: String
Required: Yes
The text for the badge.
Output
Type: String
HTML string that can be added to the page or form using the $io.dom.setHtml function.
Related Functions
$io.content.fromDataDesign
Returns HTML content string from a Data Design template
Usage
js
$io.content.fromDataDesign(designId, id1, id2, data)Description
Generates HTML content string from a Data Design template and replaces place-holder fields with actual information from the provided data parameter e.g. a database record. You can use the function repeatadly to create multiple instance of the template with different data e.g. elements of an array
Usage Scenarios
- Use a data design template to add content dynamically
- Use a data design template with a database record
- Use a data design template with data
Parameters
designId
Type: String
Required: Yes
Name of the Data Design element containing the template design. You may use the App Assets side-bar (on the left) to selecting the name of the template.
id1
Type: String
Required: Yes
Primary identifier to use for the generated elements. Provide a value that can be used to uniquely identify this generated instance of the template. This can be the record identifier, or an array index, etc for example.
id2
Type: String
Required: Yes
Specifies a secondary identifier for elements or an empty string.
data
Type: Object
Required: Yes
Object containing properties with values for the actual information to be filled in for the place-holder fields. Note: The property name needs to exactly match the name of the place-holder field name.
Output
Type: String
HTML string that can be added to the page or form using the $io.dom.setHtml function.
Related Functions
$io.content.statusIndicator
Returns HTML content string for spinning or a pulsing status animation.
Usage
js
$io.content.statusIndicator(type, color, size)Description
Generates HTML content for spinning or a pulsing status indicator. Use this when you want to indicate to the user that some processing is going on.
Usage Scenarios
- Spinning status indicator
- Pulsing status indicator
Parameters
type
Type: String
Required: Yes
Use 'zn-status-spin' for a spinning indicator or 'zn-status-pulse' for the pulsing one.
color
Type: String
Required: Yes
Specify 'zn-blue', 'zn-green', 'zn-gray', 'zn-red', 'zn-yellow', 'zn-teal', 'zn-dark' or 'zn-light' for standard colors or any CSS class name for a custom look.
size
Type: String
Required: Yes
zn-size-small for a small size indicator or empty string for a regular one.
Output
Type: String
HTML string that can be added to the page or form using the $io.dom.setHtml function.