Items

Index

Display
Forms
Logic
Payment

The items are organized into the following categories:

# Display

Items for displaying information.

Item	Description
`title`	Creates a title item.
`subtitle`	Creates a subtitle item.
`question`	Creates a question item.
`p`	Creates one or more paragraph items.
`code`	Creates a code item.
`image`	Creates an image item.
`link`	Action link.
`line`	Creates a separator line item.
`space`	Creates a space separator item.
`section`	Creates an section item.
`embed`	Creates an embedded item.

# `title`

Creates a title item.

Attributes

type

title

value

Title text.

Accepts text formatting and variables.

style optional

Style to be applied to the item as CSS key-value pairs.

The values can be a literal value or a single command call returning a literal value.

Examples

{ "type": "title", "value": "This is a title" }

# `subtitle`

Creates a subtitle item.

Attributes

type

subtitle

value

Subtitle text.

Accepts text formatting and variables.

style optional

Style to be applied to the item as CSS key-value pairs.

The values can be a literal value or a single command call returning a literal value.

Example

{ "type": "subtitle", "value": "This is a subtitle" }

# `question`

Creates a question item.

Attributes

type

question

value

Subtitle text.

Accepts text formatting and variables.

style optional

Style to be applied to the item as CSS key-value pairs.

The values can be a literal value or a single command call returning a literal value.

Examples

{ "type": "question", "value": "Is that a question?" }

# `p`

Creates one or more paragraph items.

Attributes

type

value

Paragraph text or list of text.

Accepts text formatting and variables.

style optional

Style to be applied to the item as CSS key-value pairs.

The values can be a literal value or a single command call returning a literal value.

Examples

{ "type": "p", "value": "This is a paragraph" }

Example with list of texts:

{ "type": "p", "value": [
    "This is a paragraph",
    "This is another paragraph"
]}

Example with text formatting and variables:

{ "type": "p", "value": "Your name is {{name}}" }

# `code`

Creates a code item.

Attributes

type

code

value

Code text.

Accepts text formatting and variables.

style optional

Style to be applied to the item as CSS key-value pairs.

The values can be a literal value or a single command call returning a literal value.

Example

{ "type": "code", "value": "var x = 42;" }

# `image`

Creates an image item.

Attributes

type

image

src

The URL of the image or a command returning a URL.

Images can be of the type JPEG, GIF, PNG, SVG, ICO, and BMP.

width optional

Width of the image.

height optional

Height of the image.

alt optional

Text description of the image.

title optional

Title of the image presented as a tooltip.

style optional

Style to be applied to the item as CSS key-value pairs.

The values can be a literal value or a single command call returning a literal value.

Example

{ 
    "type": "image", 
    "src": "https://devgutt.github.io/evaluatly/static/img/luna-avatar.png", 
    "width": 200, 
    "title": "Luna picture" 
}

# `link`

Action link.

Attributes

type

link

label

Link label.

url optional

Link to a website (http:\\ or https:\\), phone (tel:) or email (mailto:). The link will open in another tab or window.

If informed, the attribute program is ignored.

program optional

One or more commands to be executed.

style optional

Style to be applied to the item as CSS key-value pairs.

The values can be a literal value or a single command call returning a literal value.

Examples

{ "type": "link", "label": "Go to evaluatly", "url": "https://devgutt.github.io/evaluatly" }

{ "type": "link", "label": "Send an email", "url": "mailto:email@domain.com" }

Example with program:

{ "type": "link", "label": "Next", "program": {"next_page": true} }

# `line`

Creates a separator line item.

Attributes

type

line

style optional

Style to be applied to the item as CSS key-value pairs.

The values can be a literal value or a single command call returning a literal value.

Example

{ "type": "line" }

# `space`

Creates a space separator item.

Attributes

type

space

style optional

Style to be applied to the item as CSS key-value pairs.

The values can be a literal value or a single command call returning a literal value.

Example

{ "type": "space" }

# `section`

Creates a section item.

Attributes

type

section

items

List of items to be displayed.

style optional

Style to be applied to the item as CSS key-value pairs.

The values can be a literal value or a single command call returning a literal value.

Example

{ "type": "section", 
    "items": [
        { "type": "title", "value": "The Story" },
        { "type": "p", "value": "Now this is the story all about how..." }
    ],
    "style": {
        "border": "1px solid red",
        "background-color": "yellow"
    }
}

# `embed`

Creates an embedded item.

Attributes

type

embed

src

The URL of the page to embed.

width optional

Width of the item. Default: 560 pixels.

height optional

Height of the item. Default: 315 pixels.

title optional

Describe the embedded content.

allow optional

Specifies a feature policy for the item.

style optional

Style to be applied to the item as CSS key-value pairs.

The values can be a literal value or a single command call returning a literal value.

Example

Example of embedded youtube video:

{ 
    "type": "embed", 
    "src": "https://www.youtube.com/embed/ScMzIvxBSi4"
}

# Forms

Items for creating forms.

Item	Description
Inputs	Data input form.
`radio`	Single choice input form.
`check`	Multiple choice input form.
`button`	Action button.

# Inputs

Data input form.

Attributes

type

type	Description
text	Text input
name	Name input
email	Email address input
phone	Phone number input
number	Number input
url	URL input
password	Password input
textlong	Multiline text input

label optional

The label of the input.

save_key

Key to save the information in the data table.

required

Indicates whether the field is required.

Values: true or false (default).

placeholder optional

Text displayed when the input is empty.

autoFocus

Automatically focus the form control when the page is loaded.

Values: true or false (default).

min optional

For inputs of the type number this attribute indicates the minimum number allowed. Otherwise, it indicates the minimum number of characters.

max optional

For inputs of the type number this attribute indicates the maximum number allowed. Otherwise, it indicates the maximum number of characters.

step optional

Increment number value. Defaults to 1.

This attribute is only available for number.

pattern optional

Pattern the value must match to be valid.

This attribute is not available for textlong.

auto

Hint for form autofill feature.

Values: off (default), on, current-password, new-password

This attribute is only available for password.

multiple

Whether to allow multiple emails.

Values: true or false (default).

This attribute is only available for email.

style_label optional

Style to be applied to the label as CSS key-value pairs.

The values can be a literal value or a single command call returning a literal value.

style_input optional

Style to be applied to the input as CSS key-value pairs.

The values can be a literal value or a single command call returning a literal value.

Examples

{ "type": "name", "save_key": "name", "required": true }

Simple contact form:

{ "items": [
    { "type": "name", "label": "Your name", "save_key": "name", "required": true },
    { "type": "email", "label": "Your email", "save_key": "email", "required": true },
    { "type": "textlong", "label": "Message", "save_key": "msg", "required": true }
]}

# `radio`

Single choice input form.

Attributes

type

radio

save_key

Key to save the information in the data table.

label optional

The label of the input.

show_marker optional

Shows the check marker. This attribute only works with input_submit.

Values: true (default) or false.

show_ripple optional

Shows the ripple effect when selected.

Values: true or false (default).

required optional

Indicates whether the field is required.

Values: true or false (default).

style_label optional

Style to be applied to the label as CSS key-value pairs.

The values can be a literal value or a single command call returning a literal value.

`options`

List of options. Option attributes:

id optional

Option id. This value is saved in the data table with the property id or the index if not informed.

value optional

Option value. This value is saved in the data table with the property value.

label

Option label. This value is saved in the data table with the property label.

Accepts text formatting and variables.

description optional

Option description.

style_container optional

Style to be applied to the option container as CSS key-value pairs.

The values can be a literal value or a single command call returning a literal value.

style optional

Style to be applied to the option as CSS key-value pairs.

The values can be a literal value or a single command call returning a literal value.

Example

{ "type": "radio", 
    "save_key": "color", 
    "label": "Choose a color:", 
    "required": true,
    "options": [
        { "id": "R", "label": "Red", "value": 20 },
        { "id": "B", "label": "Blue", "value": 40 },
        { "id": "Y", "label": "Yellow", "value": 60 }
    ] 
}

# `check`

Multiple choice input form.

Attributes

type

check

label optional

The label of the input.

show_marker optional

Shows the check marker. This attribute only works with input_submit.

Values: true (default) or false.

show_ripple optional

Shows the ripple effect when selected.

Values: true or false (default).

min optional

The minimum number of check boxes must be checked to submit the form. Defaults to 0.

max optional

The maximum number of checkboxes must be checked to submit the form. Defaults to unlimited.

error_range_msg optional

The message shown to the user if the min and max limits are not respected. Defaults to "Out of range".

style_label optional

Style to be applied to the label as CSS key-value pairs.

The values can be a literal value or a single command call returning a literal value.

`options`

List of options. Option attributes:

save_key

Key to save the information in the data table.

id optional

Option id. This value is saved in the data table with the property id or the index if not informed.

value optional

Option value. This value is saved in the data table with the property value.

label

Option label. This value is saved in the data table with the property label.

Accepts text formatting and variables.

description optional

Option description.

required optional

Indicates whether the checkbox is required.

Values: true or false (default).

style_container optional

Style to be applied to the option container as CSS key-value pairs.

The values can be a literal value or a single command call returning a literal value.

style optional

Style to be applied to the option as CSS key-value pairs.

The values can be a literal value or a single command call returning a literal value.

Example

{ "type": "check", 
    "label": "Choose the colors you like:", 
    "min": 1, "max": 2,
    "error_range_msg": "One or two colors",
    "options": [
        { "save_key": "color-red", "id": "R", "label": "Red", "value": 20 },
        { "save_key": "color-blue", "id": "B", "label": "Blue", "value": 40 },
        { "save_key": "color-yellow", "id": "Y", "label": "Yellow", "value": 60 }
    ] 
}

# `button`

Action button.

Attributes

type

button

label

Button label.

program

One or more commands to be executed.

style optional

Style to be applied to the item as CSS key-value pairs.

The values can be a literal value or a single command call returning a literal value.

Examples

{ "type": "button", "label": "Next", "program": {"next_page": true} }

Example with multiple commands:

{ "type": "button", "label": "Info", "program": [
        {"save": ["info_read", true]},
        {"alert": {"is": "info", "msg": "Go to the next page!"}},
        {"next_page": true}
    ] 
}

# Logic

Programming items.

Item	Description
`exec`	Run one or more commands.
`render-If`	Conditional item display.
`fetch`	Calls an endpoint to fetch items to be displayed.
`fetch-js`	Calls a Javascript function to fetch items to be displayed.
`alert`	Shows or hides an alert popup.

# `exec`

Run one or more commands.

Attributes

type

exec

delay optional

Delay executing commands in milliseconds (1000 milliseconds = 1 second).

It will execute immediately if not informed (defaults to 0).

program

One or more commands to be executed.

Example

{"type": "exec", "delay": 500, 
    "program": [
        {"console": "Executing commands"},
        {"save": ["status", "ATIVE"]},
        {"next_page": true}
    ]
}

# `render-If`

Conditional item display.

Attributes

type

render-If

value

List of sequential conditions to be tested.

Condition Attributes

cond

Function with conditional.

render

List of items to be displayed if the condition is met.

Example

{ "type": "render-If", 
    "value": [
        { 
            "cond": {"==": [{"v": "color"}, "RED"]},
            "render": [
                { "type" : "p", "value": "The color is red"}
            ]
        },
        { 
            "cond": {"==": [{"v": "color"}, "BLUE"]},
            "render": [
                { "type" : "p", "value": "The color is blue"}
            ]
        },
        { 
            "render": [
                { "type" : "p", "value": "Color not informed"}
            ]
        }
    ]
}

# `fetch`

Calls an endpoint to fetch items to be displayed.

Attributes

type

fetch

endpoint

The URL to be called to fetch the items. The URL can be an absolute or relative path.

data optional

List of parameters to be sent to the endpoint. It could be a variable key or a key-value parameter.

For key-value parameters, the value can be a literal or a command.

If not informed, all variables that do not start with "_" (underscore) will be sent.

By default, the value property of the variable is used. If the value is empty, the id or label is used instead.

Examples

{ "type": "fetch", "endpoint": "https://example.com/endpoint/fetch_1" }

Example with variables and relative URL:

{ "type": "fetch", 
    "endpoint": "/api/fetch_1", 
    "data": [
        "name",
        "email",
        {"name_label": {"l": "name"}},
        {"status": "OPEN"}
    ]
}

Server processing

The instructions below show how to respond to requests initiated by the fetch item.

Request

A POST request will be called on the URL endpoint, using the endpoint attribute.

The following parameters will be sent in the BODY of the request:

Parameter	Description
`hash`	the root attribute `hash`.
`origin`	The protocol, hostname, and port number of the caller's URL.
`data`	JSON with the parameters specified in the `data` attribute.

Response

The server must respond with a JSON message containing the following parameters:

Parameter	Description
`ok`	`true`
`res`	List of items to be displayed.

if an error occurs:

Parameter	Description
`ok`	`false`
`error_msg`	The error message to be shown to the user.
`error_code`	The error code.

Example of response:

{
    "ok": true,
    "res": [
        {"type": "title", "value": "Hello there!"},
        {"type": "button", "label": "next", "program": [ {"next_page": true} ]}
    ]
}

An error response:

{   
    "ok": false,
    "error_msg": "Invalid request",
    "error_code": "ERROR_INVALID_REQUEST"
}

# `fetch-js`

UNDER CONSTRUCTION

Calls a Javascript function to fetch items to be displayed.

Attributes

type

fetch-js

fn

Name of the Javascript function registered in the fetch option on the config.

Examples

{ "type": "fetch-js", "fn": "MY_FUNCTION" }

# `alert`

Shows or hides an alert popup.

Attributes

type

alert

is

The alert type.

Values	Description
`error`	Shows an error alert popup (default)
`warning`	Shows a warning alert popup
`info`	Shows an information alert popup
`success`	Shows a success alert popup

msg

Message to be displayed.

Accepts text formatting and variables.

interval optional

The period in milliseconds that the alert will be displayed. (1000 milliseconds = 1 second). The default is 3000 milliseconds.

Use -1 to not hide the alert automatically.

style optional

Style to be applied to the alert as CSS key-value pairs.

The values can be a literal value or a single command call returning a literal value.

Example

{"type": "alert", "is": "info", "interval": 5000, "msg": "Hello there!"}

# Payment

Payment items.

Item	Description
`card`	Collect card information for payment.

# `card`

Collect card information for payment.

To use this item you need to setup the payment on the page.

Attributes

type

card

label optional

The label of the input.

disabled optional

Disable the input. Defaults do false.

Example

{ "type": "card", "label": "Inform your credit card" }

Items

Index

# Display

# title

Attributes

Examples

# subtitle

Attributes

Example

# question

Attributes

Examples

# p

Attributes

Examples

# code

Attributes

Example

# image

Attributes

Example

# link

Attributes

Examples

# line

Attributes

Example

# space

Attributes

Example

# section

Attributes

Example

# embed

Attributes

Example

# Forms

# Inputs

Attributes

Examples

# radio

Attributes

options

Example

# check

Attributes

options

Example

# button

Attributes

Examples

# Logic

# exec

Attributes

Example

# render-If

Attributes

Condition Attributes

Example

# fetch

Attributes

Examples

Server processing

# fetch-js

Attributes

Examples

# alert

Attributes

Example

# Payment

# card

Attributes

Example

# `title`

# `subtitle`

# `question`

# `p`

# `code`

# `image`

# `link`

# `line`

# `space`

# `section`

# `embed`

# `radio`

`options`

# `check`

`options`

# `button`

# `exec`

# `render-If`

# `fetch`

# `fetch-js`

# `alert`

# `card`