Cloud Canal Code

Comment

You can leave comments across your project to explain what you're doing with various attributes on the element. Note that anything you write in these comments can be seen by anyone inspecting your HTML, so avoid any sensitive information.

Attribute:

data-cc-comment="[comment]"

Group

Often, it may be beneficial to separate sequences of actions into groups for organizational purposes. Many actions also must refer to groups in their fields, like "If" or "For Each". Each group gets its own attribute and must be referred to by name.

Attribute:

data-cc-group-[name]="[action(s)]"

Example: the attribute below can be executed by the action "group::populate" on the same element

data-cc-group-populate="[action(s)]"

Hidden Until Load

To prevent a flash of an uninitialized view of your page before all the "Load" events have fired, you can hide specific elements (or even the whole body). Any element with this attribute will become visible only after all of the "Load" events have been executed. The value of this attribute does not matter but is recommended to be "true" for consistency.

Attribute:

data-cc-hidden-until-load="true"

Prevent Default

Many elements like forms and buttons have default behaviors in the browser. You can prevent these from happening with this attribute in favor of using an event attribute to handle the functionality instead.

The value of this attribute can be an asterisk, meaning it applies to all events, or a comma-separated list of specific events.

Attribute:

data-cc-prevent-default="* | [event(s)]"

Example: when submitting the form, prevent the default submit and reset behaviors (which would then be coupled with "data-cc-on-submit" and "data-cc-on-reset" attributes to add your own handling)

<form data-cc-prevent-default="submit,reset">...</form>

Insert

Trigger: element added to page

Applicable elements: any

Attribute:

data-cc-on-insert="[action(s)]"

Data parameter: standard MutationRecord object

Instantiate

Trigger: element added to page using "Instantiate" action

Applicable elements: any

Attribute:

data-cc-on-instantiate="[action(s)]"

Data parameter: inherited from wherever "Instantiate" action is executed

Load

Trigger: DOM is ready and library has finished loading

Applicable elements: any

Attribute:

data-cc-on-load="[action(s)]"

Data parameter: standard Event object

Load (Complete)

Trigger: page has completely loaded, along with stylesheets and images

Applicable elements: any

Attribute:

data-cc-on-loadcomplete="[action(s)]"

Data parameter: standard Event object

Load (Logged In)

Trigger: DOM is ready, library has finished loading, and user is currently logged in using the Cloud Canal authentication system

Applicable elements: any

Attribute:

data-cc-on-loadloggedin="[action(s)]"

Data parameter: standard Event object

Load (Logged Out)

Trigger: DOM is ready, library has finished loading, and user is not currently logged in using the Cloud Canal authentication system

Applicable elements: any

Attribute:

data-cc-on-loadloggedout="[action(s)]"

Data parameter: standard Event object

Remove

Trigger: element removed from page

Applicable elements: any

Attribute:

data-cc-on-remove="[action(s)]"

Data parameter: standard MutationRecord object

Tab

Trigger: tab component's page is changed using "tab" action

Applicable elements: any

Attribute:

data-cc-on-tab-[id]="[action(s)]"

Data parameter:‍

{  index,  previous}

Start

Trigger: request begins

Applicable elements: same element that is triggering the request using the "API" action

Attribute:

data-cc-on-httpstart="[action(s)]"

Data parameter:

{  url,  request: {    method,    headers,    body,    mode  }}

Status Code

Trigger: request completes with status code specified (highest priority)

Applicable elements: same element that is triggering the request using the "API" action

Attribute:

data-cc-on-http[code]="[action(s)]"

Data parameter:

{  url,  request: {    method,    headers,    body,    mode  },  response: {    status,    headers,    body  }}

Example: the attribute below would be triggered when the response has a status code of 401

data-cc-on-http401="[action(s)]"

Success

Trigger: request succeeds with status code of 2XX

Applicable elements: same element that is triggering the request using the "API" action

Attribute:

data-cc-on-httpsuccess="[action(s)]"

Data parameter:

{  url,  request: {    method,    headers,    body,    mode  },  response: {    status,    headers,    body  }}

Error

Trigger: request fails with status code of 4XX or 5XX

Applicable elements: same element that is triggering the request using the "API" action

Attribute:

data-cc-on-httperror="[action(s)]"

Data parameter:

{  url,  request: {    method,    headers,    body,    mode  },  response: {    status,    headers,    body  }}

Finish

Trigger: request triggered with "API" action completes, regardless of status (lowest priority)

Applicable elements: same element that is triggering the request using the "API" action

Attribute:

data-cc-on-httpfinish="[action(s)]"

Data parameter:

{  url,  request: {    method,    headers,    body,    mode  },  response: {    status,    headers,    body  }}

Blur

Trigger: element loses focus

Applicable elements: focusable elements like inputs, textareas, selects, anchors, and buttons

Attribute:

data-cc-on-blur="[action(s)]"

Data parameter: standard Event object

Change

Trigger: element has value changed and loses focus

Applicable elements: inputs, selects, and textareas

Attribute:

data-cc-on-change="[action(s)]"

Data parameter: standard Event object

Click

Trigger: user clicks/taps element

Applicable elements: any

Attribute:

data-cc-on-click="[action(s)]"

Data parameter: standard Event object

Focus

Trigger: element gains focus

Applicable elements: focusable elements like inputs, textareas, selects, anchors, and buttons

Attribute:

data-cc-on-focus="[action(s)]"

Data parameter: standard Event object

Input

Trigger: element has value changed

Applicable elements: inputs, selects, and textareas

Attribute:

data-cc-on-input="[action(s)]"

Data parameter: standard Event object

Key Down

Trigger: user presses a key on the keyboard

Applicable elements: any

Attribute:

data-cc-on-keydown="[action(s)]"

Data parameter: standard Event object

Key Up

Trigger: user releases a key on the keyboard

Applicable elements: any

Attribute:

data-cc-on-keyup="[action(s)]"

Data parameter: standard Event object

Mouse Out

Trigger: user's mouse moves off element

Applicable elements: any

Attribute:

data-cc-on-mouseout="[action(s)]"

Data parameter: standard Event object

Mouse Over

Trigger: user's mouse moves onto element

Applicable elements: any

Attribute:

data-cc-on-mouseover="[action(s)]"

Data parameter: standard Event object

Reset

Trigger: form element reset

Applicable elements: forms

Attribute:

data-cc-on-reset="[action(s)]"

Data parameter: standard Event object

Submit

Trigger: form element submitted

Applicable elements: forms

Attribute:

data-cc-on-submit="[action(s)]"

Data parameter: standard Event object

Emit

Trigger: manually using "Emit" action

Applicable elements: any

Attribute:

data-cc-on-[event]="[action(s)]"

Data parameter: dependent on the second field of the "Emit" action

Example: the attribute below would be triggered elsewhere with the action "emit::increment::123" with the "Data" parameter set to "123"

data-cc-on-increment="[action(s)]"

Update

Trigger: variable updated using "Set Variable", "Remove Variable", or "Clear Variables" actions

Applicable elements: any

Attribute:

data-cc-on-update-[variable]="[action(s)]"

Data parameter:

{  name,  value,  scope}

Example: the attribute below would be triggered when a variable called "name" is updated

data-cc-on-update-name="[action(s)]"

API

Function: Make an API call to an endpoint; if executed from a form, the form fields will be sent as application/json in the body as long as the method is not GET or HEAD. If the form contains a file input, the data will be sent as multipart/form-data instead. If executed on a form and the method is GET or HEAD, the form fields will be sent as query parameters in the URL (file inputs are not allowed in this case).

If using Cloud Canal's authentication system, you can set auth to true in order to send the token along with the request. You can optionally pass any additional headers with the request in the last parameter.

Applicable elements: any, but especially forms

Signature:

api([loader])::[url*]::[method]::[auth]::[header(s)]

Slot & Fields:

Example: When the form is submitted, POST the data in the form to "https://www.example.com/articles"

<form  data-cc-on-submit="api::https://www.example.com/articles::POST"  data-cc-prevent-default="submit">...</form>

Bind

Function: Link an aspect of an element on the page to a variable depending on the "type" field. Binding text will make the text of the element automatically update whenever the bound variable changes. Binding value produces a two-way link that will update the value of the element when the variable changes, and will also update the variable when the value of the input changes. Binding a form is shorthand for binding all input elements within.

Binding arrays will instantiate a copy of that element and its children for each element of the array in the variable. You can use the "data-cc-on-instantiate" attribute to then populate the element. In this case, the "data" parameter will be set to the current array item.

If "type" is anything other than the options above, then the variable will be bound to a custom attribute on the element(s) with the name of the "type" field.

Applicable elements: any element that can have text content when type is "text"; input, select, and textarea elements when type is "value"; a form or wrapping element when type is "form"; any element when type is "array" or anything else

Signature:

bind([selector])::[type*]::[key*]::[scope]

Slot & Fields:

Example: bind the value of an input to a variable called "age" as soon as the page loads (the name of the input does not affect this, but make sure the input type and variable data are compatible)

<input  data-cc-on-load="bind::value::age"  name="user_age"  type="number"/>

Example: bind a custom attribute called "data-cust-attr" to a variable called "my-var"

<div data-cc-on-load="bind::data-cust-attr::my-var"></div>

Example: bind the element to an array stored in a session variable called "notes" on page load and populate some data in the element (the variable must be an array);  "notes" has the following structure in this example:

[  {    id,    title,    body  }, ...]

<div data-cc-on-load="bind::array::notes::session">  <div data-cc-on-instantiate="text::{{data::id}}. {{data::title}}"></div>  <p data-cc-on-instantiate="text::{{data::body}}"></p></div>

Emit

Function: triggers all elements on the page listening for the emitted event by name; the event can be a built-in event from Cloud Canal Code like "click" or a custom one specific to your application

Applicable elements: any

Signature:

emit::[event*]::[data]

Fields:

Example: when the input below has its value changed, it will emit a custom "renamed" event with the value of the input as the "data" parameter; other elements can listen for it with an attribute of "data-cc-on-renamed"

<input  data-cc-on-change="emit::renamed::{{value}}"  name="username"  type="text"/>

Trigger

Function: triggers the given event only on the matched elements (or the calling element if the selector is omitted); the value of the "data" parameter in the triggered attribute is inherited from wherever this action is executed

Applicable elements: any

Signature:

trigger([selector])::[event*]

Slot & Fields:

Example: when the first button below is clicked, it will mirror the click to the second button

<button data-cc-on-click="trigger(#other-button)::click">First Button</button><button id="other-button">Second Button</button>

Set Attribute

Function: add or update the attribute with the given name on the matched element(s)

Applicable elements: any

Signature:

setAttribute([selector])::[name*]::[value]

Slot & Fields:

Example: when the page loads, set an attribute on the div of data-foo="bar"

<div data-cc-on-load="setAttribute::data-foo::bar"></div>

Remove Attribute

Function: remove the attribute with the given name on the matched element(s)

Applicable elements: any

Signature:

removeAttribute([selector])::[name*]

Slot & Fields:

Example: when the user mouses over the div, remove the "data-foo" attribute from it

<div data-cc-on-mouseover="removeAttribute::data-foo" data-foo="bar"></div>

Set Auth

Function: save the token to a cookie called "cc-auth"; it will be sent in an authorization header as a bearer token automatically whenever using the "API" action with its "auth" field set to true

Applicable elements: any, but especially login/registration forms

Signature:

setAuth::[token*]::[expiration]

Fields:

Example: when the request completes successfully, set the token from the response body (assuming the response has the token under a key of "authToken") and make it valid for 1 day; then, navigate to the relative url  "/dashboard"

<form  data-cc-on-submit="api::https://www.example.com/login::POST"  data-cc-on-httpsuccess="setAuth::{{response::authToken}}::86400;;navigate::/dashboard"  data-cc-prevent-default="submit">...</form>

Clear Auth

Function: delete the "cc-auth" cookie from the browser, logging the user out on the front end

Applicable elements: any, but especially logout buttons

Signature:

clearAuth

Example: when the button is clicked, clear the authentication token from the user's cookies and navigate back to the home page

<button data-cc-on-click="clearAuth;;navigate::/">Logout</button>

Add Class

Function: add the class to the matched element(s) if they don't already have it

Applicable elements: any

Signature:

addClass([selector])::[name*]

Slot & Fields:

Example: when moused over, add the "is-hovered" class to the div

<div data-cc-on-mouseover="addClass::is-hovered"></div>

Remove Class

Function: remove the class from the matched element(s) if they have it

Applicable elements: any

Signature:

removeClass([selector])::[name*]

Slot & Fields:

Example: when moused out, remove the "is-hovered" class from the div

<div data-cc-on-mouseout="removeClass::is-hovered"></div>

Toggle Class

Function: toggle the class from the matched element(s), adding it if they don't have it and removing it if they do

Applicable elements: any

Signature:

toggleClass([selector])::[name*]

Slot & Fields:

Example: when clicked, toggle the "active" class on the div

<div data-cc-on-click="toggleClass::active"></div>

Set Cookie

Function: add or update a cookie in the user's browser

Applicable elements: any

Signature:

setCookie::[key*]::[value*]::[expiration]

Fields:

Example: on page load, make an authenticated API request and save the id from the response to a session cookie called "user-id"

<body  data-cc-on-load="api::https://www.example.com/me::GET::true"  data-cc-on-httpsuccess="setCookie::user-id::{{response::id}}">...</body>

Remove Cookie

Function: delete a cookie in the user's browser

Applicable elements: any

Signature:

removeCookie::[key*]

Fields:

Example: on button click, delete a cookie called "user-id"

<button data-cc-on-click="removeCookie::user-id">Forget User ID</button>

Clear Cookies

Function: delete all code-accessible cookies in the user's browser (for the current site); note that if you've used the "Set Auth" action, its cookie will be deleted as well

Applicable elements: any

Signature:

clearCookies

Example: on button click, delete all cookies

<button data-cc-on-click="clearCookies">Clear Cookies</button>

Template

Function: transform the element into a template, moving it to the head of the page; this action can only target a single element

Applicable elements: any

Signature:

template([selector])::[id*]

Slot & Fields:

Example: on page load, convert the div to a template with id "todo"; note the "data-cc-on-instantiate" attribute, which fires when the template is instantiated and can be used to populate it

<div data-cc-on-load="template::todo">  To do: <span data-cc-on-instantiate="text::{{data::task}}"></span></div>

Instantiate

Function: clone a template and insert the instance into a container element; the container can only be a single element

Applicable elements: any

Signature:

instantiate([container])::[id*]::[data]

Slot & Fields:

Example: when the button is clicked, add an instance of the "note" template to the div with class "note-wrapper"

<button data-cc-on-click="instantiate(.note-wrapper)::note">Add Note</button><div class="note-wrapper"></div>

Remove Instance

Function: remove the selected element or closest ancestor using the specified template; this action can only target a single element

Applicable elements: any (on or inside of an instance)

Signature:

removeInstance([selector])::[id*]

Slot & Fields:

Example: When the button inside the instance is clicked, remove the ancestor which was instantiated from the "note" template; note that the instances all have the "data-cc-on-load" attribute of the original template which can safely be ignored since the "Load" event would have already fired before instantiation. The "data-cc-template" attribute is used internally by Cloud Canal Code to track instances and can also be ignored.

<div class="note-wrapper">  <div data-cc-on-load="template::note" data-cc-template="note">    <input type="text" />    <button data-cc-on-click="removeInstance::note">X</button>  </div>  <div data-cc-on-load="template::note" data-cc-template="note">    <input type="text" />    <button data-cc-on-click="removeInstance::note">X</button>  </div></div>

Clear Instances

Function: remove all instances of a specified template from the page

Applicable elements: any

Signature:

clearInstances::[id*]

Fields:

Example: when the button is clicked, remove all instances using the "note" template

<button data-cc-on-click="clearInstances::note">Reset</button><div class="note-wrapper">...</div>

Blur

Function: remove focus from the element(s)

Applicable elements: focusable elements like inputs or links

Signature:

blur([selector])

Slot:

Example: when the input is focused,  unfocus it after 5 seconds

<input data-cc-on-focus="wait::5;;blur" type="text" />

Check

Function: (un)check the element(s)

Applicable elements: radio and checkbox inputs

Signature:

check([selector])::[boolean]

Slot & Fields:

Example: when the page loads, check the checkbox

<input data-cc-on-load="check" type="checkbox" />

Click

Function: click (or tap) the element(s)

Applicable elements: any, but especially buttons and links

Signature:

click([selector])

Slot:

Example: when the first button is clicked, the second one is clicked as well

<button data-cc-on-click="click(.other-button)">Click Me</button><button class="other-button">I Get Clicked</button>

Copy

Function: copy the value to the user's clipboard

Applicable elements: any

Signature:

copy::[value*]::[type]

Fields:

Example: when the button is clicked, copy the text of the div to the clipboard

<button data-cc-on-click="copy::{{text(#secret-key)}}">Click To Copy</button><div id="secret-key">ABC123</div>

Disable

Function: disable the element(s)

Applicable elements: form elements like inputs, selects, textareas and buttons

Signature:

disable([selector])

Slot:

Example: when the form is submitted, disable the inputs inside it

<form data-cc-on-submit="disable(:this input)">  <input name="username" type="text" />  <input name="password" type="password" /></form>

Disable Unloader

Function: disable a warning message when the user attempts to navigate away or close the browser tab (useful for warning of unsaved changes)

Applicable elements: any

Signature:

disableUnloader

Example: when the form is submitted, disable the unloader

<form data-cc-on-submit="disableUnloader">...</form>

Enable

Function: enable the element(s)

Applicable elements: form elements like inputs, selects, textareas and buttons

Signature:

enable([selector])

Slot:

Example: As soon as a character is inputted into the first input below, the second will become enabled

<form>  <input name="username" type="text" data-cc-on-input="enable([type='password'])" />  <input name="password" type="password" disabled /></form>

Enable Unloader

Function: enable a warning message when the user attempts to navigate away or close the browser tab (useful for warning of unsaved changes)

Applicable elements: any

Signature:

enableUnloader

Example: when the input is changed, enable the unloader

<input name="memo" type="text" data-cc-on-change="enableUnloader" />

Focus

Function: focus the element(s); if multiple elements are matched then the last one will gain focus, but any "focus" events will fire for all of them

Applicable elements: focusable elements like inputs or links

Signature:

focus([selector])

Slot:

Example: when the button is clicked, focus the input

<button data-cc-on-click="focus(#message)">Start</button><input id="message" type="text" />

Hide

Function: hide the element(s) by setting their "display" property to "none"

Applicable elements: any

Signature:

hide([selector])

Slot:

Example: when the button is clicked, hide the div

<button data-cc-on-click="hide(#my-div)">Hide</button><div id="my-div">...</div>

HTML

Function: set the HTML of the element(s)

Warning: Setting the HTML directly can be dangerous if using data from an untrusted source, like user-generated content. Proceed with caution. If you just want to set the text of an element, use the "Text" action instead.

Applicable elements: any element that can contain text, like a paragraph or heading

Signature:

html([selector])::[value]

Slot & Fields:

Example: when the page loads, set the HTML of the div to a paragraph with some text

<div data-cc-on-load="html::<p>This is a paragraph.</p>"></div>

Invalid

Function: mark the form element(s) invalid

Applicable elements: form elements like inputs, selects, textareas and buttons

Signature:

invalid([selector])::[message*]::[class]

Slot & Fields:

Example: when the input value changes, if it is greater than or equal to (gte) 18, mark the input valid; otherwise, mark it invalid and show a message to the user

<input  name="age"  type="number"  data-cc-on-change="if(<<gte::{{value}}::18>>)::pass::fail"  data-cc-group-pass="valid"  data-cc-group-fail="invalid::You must be 18 or older."/>

Meta

Function: set metadata in the head of the page (via <meta> elements)

Applicable elements: any

Signature:

meta::[name*]::[content]

Fields:

Example: when the page loads, set the meta description

<body data-cc-on-load="meta::description::This is my website.">...</body>

Options

Function: generate option elements for a select element from an array

Applicable elements: select elements

Signature:

options([selector])::[array*]::[text]::[value]

Slot & Fields:

Example: when the page loads, get a list of users from an authenticated API call; when the call succeeds, generate the options from the response using the "name" of each user as the text and their "id" as the value

<body  data-cc-on-load="api::https://www.example.com/users::GET::true"  data-cc-on-httpsuccess="options(#user-input)::{{response}}::name::id">  ...  <select id="user-input"></select>  ...

Remove

Function: remove the element(s) from the page

Applicable elements: any

Signature:

remove([selector])

Slot:

Example: when the button is clicked, remove the div

<button data-cc-on-click="remove(#my-div)">Delete</button><div id="my-div">...</div>

Reset

Function: reset the form(s)

Applicable elements: forms

Signature:

reset([selector])

Slot:

Example: reset the form when it is submitted

<form data-cc-on-submit="reset">...</form>

Scroll

Function: scroll to the element

Applicable elements: any visible element

Signature:

scroll([selector])::[behavior]::[block]::[inline]

Slot & Fields:

Example: on page load, scroll to the form

<form data-cc-on-load="scroll">...</form>

Show

Function: show the element(s) by setting their "display" property to "block"

Applicable elements: any

Signature:

show([selector])

Slot:

Example: when the button is clicked, hide the div

<button data-cc-on-click="hide(#my-div)">Hide</button><div id="my-div">...</div>

Style

Function: set an inline style on the element(s); if the value is omitted, then the style will be unset

Applicable elements: any

Signature:

style([selector])::[name*]::[value]

Slot & Fields:

Example: when the button is clicked, change the background color of the whole body to red

<button data-cc-on-click="style(body)::backgroundColor::#ff0000">Red</button>

Text

Function: set the text of the element(s)

Applicable elements: any element that can contain text, like a paragraph or heading

Signature:

text([selector])::[value*]

Slot & Fields:

Example: when the page loads, set the text of the first div to "Lorem" and clear the text from the second div

<div data-cc-on-load="text::Lorem"></div><div data-cc-on-load="text::">Ipsum</div>

Title

Function: set the title of the page (visible in the tab of the user's browser); especially useful with dynamic content in a web app

Applicable elements: any

Signature:

title::[text*]

Fields:

Example: when the page loads, set the title to "My Website"

<body data-cc-on-load="title::My Website">...</body>

Toggle

Function: toggle the display of an element, hiding it when it is visible and showing it when it is hidden

Applicable elements: any

Signature:

toggle([selector])

Slot:

Example: when the button is clicked, toggle the div

<button data-cc-on-click="toggle(#my-div)">Hide</button><div id="my-div">...</div>

Valid

Function: mark the form element(s) valid

Applicable elements: form elements like inputs, selects, textareas and buttons

Signature:

valid([selector])::[class]

Slot & Fields:

Example: when the input value changes, if it is greater than or equal to (gte) 18, mark the input valid; otherwise, mark it invalid and show a message to the user

<input  name="age"  type="number"  data-cc-on-change="if(<<gte::{{value}}::18>>)::pass::fail"  data-cc-group-pass="valid"  data-cc-group-fail="invalid::You must be 18 or older."/>

Value

Function: set the value of the element(s)

Applicable elements: form elements like inputs, selects, textareas and buttons

Signature:

value([selector])::[value*]

Slot & Fields:

Example: when the first element receives input, clone its value to the second element

<input type="text" data-cc-on-input="value([name='clone'])::{{value}}" /><input name="clone" type="text" />

For

Function: loop over the action group a number of times; if the number is omitted, the group will be looped infinitely and asynchronously

Applicable elements: any

Signature:

for([number])::[group*]

Slot & Fields:

Example: for all children of the div, increment a counter variable (the "count" transformer is counting all elements that match the selector ":this > *", the direct children of the element)

<div  data-cc-on-load="setVariable::counter::0;;for(<<count:::this > *>>)::increment"  data-cc-group-increment="setVariable::counter::<<add::{{variable::counter}}::1>>">...</div>

For Each

Function: loop over the action group once per array item; the "data" parameter in the called group will be set to the individual array item

Applicable elements: any

Signature:

forEach([array*])::[group*]

Slot & Fields:

Example: for each item in the HTTP response, instantiate a template called "post" inside the div

<div  data-cc-on-load="api::https://www.example.com/posts"  data-cc-on-httpsuccess="forEach({{response}})::instance"  data-cc-group-instance="instantiate::post">...</div>

Group

Function: execute an action group on the element(s); this is a useful way to organize actions into bigger "blocks"

Applicable elements: any

Signature:

group([selector])::[name*]

Slot & Fields:

Example: for both load and click events, execute the "message" group

<button  data-cc-on-load="group::message"  data-cc-on-click="group::message"  data-cc-group-message="log::Hello!">Send Message</button>

If

Function: Execute a group based on a condition; if the condition is not met, execute an optional false group. You can implement AND and OR logic by chaining multiple instances of this action across groups.

Applicable elements: any

Signature:

if([condition*])::[true*]::[false]

Slot & Fields:

Example: on load, change the text to reflect the age of the user based on the "age" session variable

<div  data-cc-on-load="if(<<gte::{{variable::age::session}}::13>>)::check-18::child"  data-cc-group-check-18="if(<<gte::{{variable::age::session}}::18>>)::adult::teen"  data-cc-group-child="text::You are a child"  data-cc-group-teen="text::You are a teen"  data-cc-group-adult="text::You are an adult"></div>

Timeout

Function: trigger a timeout for a specified duration, calling an action group when it expires; if the timeout action is called again with the same name before that, it will restart the timeout

Applicable elements: any

Signature:

timeout::[name*]::[time*]::[group*]

Fields:

Example: When the user types into the element below, once they pause typing for 0.5 seconds, the API call will be made (prevents unnecessary API calls on every key)

<input  data-cc-on-input="timeout::search::0.5::get-users"  data-cc-group-get-users="api::https://example.com/users::GET::true"  type="text"/>

Wait

Function: pause the execution of the following actions for a certain period of time

Applicable elements: any

Signature:

wait::[time*]

Fields:

Example: When the page loads, wait 10 seconds before showing a modal with id "newsletter-modal"

<body data-cc-on-load="wait::10;;show(#newsletter-modal)">...</body>

Navigate

Function: send the user to the specified URL

Applicable elements: any

Signature:

navigate::[url*]

Fields:

Example: When the button is clicked, navigate to the homepage

<button data-cc-on-click="navigate::/">Reject</button>

Redirect

Function: send the user to the specified URL and replace the current page in the browser's navigation history

Applicable elements: any

Signature:

redirect::[url*]

Fields:

Example: When the page loads, redirect to a different one at "/new-page"

<body data-cc-on-load="redirect::/new-page">...</body>

Reload

Function: refresh the current page

Applicable elements: any

Signature:

reload

Example: When the form is submitted, reload the page

<form data-cc-on-submit="reload">...</form>

Set Query

Function: add or update a key in the query string

Applicable elements: any

Signature:

setQuery::[key*]::[value]

Fields:

Example: on page load, set a query parameter of "loaded=true"

<body  data-cc-on-load="setQuery::loaded::true">...</body>

Remove Query

Function: remove a key in the query string

Applicable elements: any

Signature:

removeQuery::[key*]

Fields:

Example: on page load, remove a query parameter called "id"

<body  data-cc-on-load="removeQuery::id">...</body>

Clear Queries

Function: remove the query string completely

Applicable elements: any

Signature:

clearQueries

Example: on page load, remove all query parameters

<body  data-cc-on-load="clearQueries">...</body>

Alert

Function: show an alert message in the browser

Applicable elements: any

Signature:

alert::[message*]

Fields:

Example: When the button is clicked, show an alert message saying "Button clicked"

<button data-cc-on-click="alert::Button clicked">Test</button>

Debug

Function: logs the current element and "data" parameter to the console and triggers the JavaScript debugger

Applicable elements: any

Signature:

debug

Example: When the call completes, debug it (so you can, for example, inspect the response)

<body  data-cc-on-load="api::https://www.example.com/posts"  data-cc-on-httpsuccess="debug">...</body>

Log

Function: log a message to the console

Applicable elements: any

Signature:

log::[message*]

Fields:

Example: When the button is clicked, log a message saying "Button clicked"

<button data-cc-on-click="log::Button clicked">Test</button>

Tabs

Function: create tab panels from the direct children of the target element

Applicable elements: any (with children)

Signature:

tabs([selector])::[id*]

Fields:

Example: when the page loads, transform the contents of the div into tab panels and assign an id of "example"

<div data-cc-on-load="tabs::example">...</div>

Tab

Function: switch the tabs component with the given id to the specified page, optionally validating any form elements on the current page before switching; validation is applied to the current page in all cases except when the page field is "invalid" in which case it applies to the destination page

Applicable elements: any

Signature:

tab::[id*]::[page*]::[validate]

Fields:

Example: when the button is clicked, validate all inputs on the current page of the tabs component with id "example" and apply a class of "invalid-input" to any invalid elements; if all are valid, advance to the next page

<button data-cc-on-click="tab::example::next::invalid-input">Next</button>

Set Variable

Function: add or update the variable with the given name in the given scope

Applicable elements: any

Signature:

setVariable::[name*]::[value*]::[scope]::[expiration]

Fields:

Example: when the page loads, set a window variable of "count" to "0"

<div data-cc-on-load="setVariable::count::0"></div>

Remove Variable

Function: remove the variable with the given name from the given scope

Applicable elements: any

Signature:

removeVariable::[name*]::[scope]

Fields:

Example: when the button is clicked, delete the "name" session variable

<button data-cc-on-click="removeVariable::name::session">Forget</button>

Clear Variables

Function: remove all variables with the given scope

Applicable elements: any

Signature:

clearVariables::[scope]

Fields:

Example: when the button is clicked, clear all variables from local storage

<button data-cc-on-click="clearVariables::local">Forget All</button>

Equal

Function: check whether the first field is equal to the second

Signature:

<<eq::[first*]::[second*]>>

Fields:

Output:

true | false

Example: check if the "status" variable is "passed"

<<eq::{{variable::status}}::passed>>

Greater Than

Function: check whether the first field is greater than the second

Signature:

<<gt::[first*]::[second*]>>

Fields:

Output:

true | false

Example: check if the "age" variable is greater than 17

<<gt::{{variable::age}}::17>>

Greater Than or Equal

Function: check whether the first field is greater than or equal to the second

Signature:

<<gte::[first*]::[second*]>>

Fields:

Output:

true | false

Example: check if the "age" variable is greater than or equal to 18

<<gte::{{variable::age}}::18>>

Less Than

Function: check whether the first field is less than the second

Signature:

<<lt::[first*]::[second*]>>

Fields:

Output:

true | false

Example: check if the "age" variable is less than 18

<<lt::{{variable::age}}::18>>

Less Than or Equal

Function: check whether the first field is less than or equal to the second

Signature:

<<lte::[first*]::[second*]>>

Fields:

Output:

true | false

Example: check if the "age" variable is less than or equal to 17

<<lte::{{variable::age}}::17>>

Not Equal

Function: check whether the first field is not equal to the second

Signature:

<<ne::[first*]::[second*]>>

Fields:

Output:

true | false

Example: check if the "status" variable is not "failed"

<<ne::{{variable::status}}::failed>>

Date

Function: convert the timestamp to a date; optionally select a time zone and format (controlled by the "locale" field)

Signature:

<<date::[timestamp*]::[unit]::[zone]::[locale]>>

Fields:

Output: dependent on locale; for example, the "en-US" locale outputs the format below

m/d/Y

Example: convert the timestamp in the "createdAt" response field to a date using the user's browser settings

<<date::{{response::createdAt}}>>

Time

Function: convert the timestamp to a time; optionally select a time zone and format (controlled by the "locale" field)

Signature:

<<time::[timestamp*]::[unit]::[zone]::[locale]>>

Fields:

Output: dependent on locale; for example, the "en-US" locale outputs the format below

h:mm:ss AM/PM

Example: convert the timestamp in the "appointment" response field to a time using the user's browser settings

<<time::{{response::appointment}}>>

Count

Function: count the number of elements on the page that match the selector

Signature:

<<count::[selector*]>>

Fields:

Output:

[number]

Example: count the number of elements with the class "post-wrapper"

<<count::.post-wrapper>>

Length

Function: count the number of items in the array

Signature:

<<length::[array*]>>

Fields:

Output:

[number]

Example: count the number of items in the "posts" field of the response

<<length::{{response::posts}}>>

Absolute

Function: get the absolute value of a number

Signature:

<<absolute::[number*]>>

Fields:

Output:

[number]

Example: calculate the absolute value of the "score" field in the response

<<absolute::{{response::score}}>>

Add

Function: add the first number to the second

Signature:

<<add::[first*]::[second*]>>

Fields:

Output:

[number]

Example: get the result of incrementing the "count" variable by 1

<<add::{{variable::count}}::1>>

Ceiling

Function: round the number up

Signature:

<<ceiling::[number*]::[precision]>>

Fields:

Output:

[number]

Example: round up the "cost" variable to 2 decimal places

<<ceiling::{{variable::cost}}::2>>

Divide

Function: divide the first number by the second

Signature:

<<divide::[numerator*]::[denominator*]>>

Fields:

Output:

[number]

Example: get the result of dividing the "cost" variable by the "users" variable

<<divide::{{variable::cost}}::{{variable::users}}>>

Floor

Function: round the number down

Signature:

<<floor::[number*]::[precision]>>

Fields:

Output:

[number]

Example: round down the "cost" variable to 2 decimal places

<<floor::{{variable::cost}}::2>>

Multiply

Function: multiply the first number by the second

Signature:

<<multiply::[first*]::[second*]>>

Fields:

Output:

[number]

Example: get the result of dividing the "price" variable by the "units" variable

<<multiply::{{variable::price}}::{{variable::units}}>>

Percent

Function: convert the decimal number to a percentage

Signature:

<<percent::[number*]::[precision]>>

Fields:

Output:

[number]%

Example: convert the "progress" variable to a percentage

<<percent::{{variable::progress}}>>

Power

Function: calculate the base to the exponent

Signature:

<<power::[base*]::[exponent]>>

Fields:

Output:

[number]

Example: get the square of the value of the input with id "calc-input"

<<power::{{value(#calc-input)}}>>

Root

Function: calculate the root of the radicand

Signature:

<<root::[radicand*]::[index]>>

Fields:

Output:

[number]

Example: get the square root of the value of the input with id "calc-input"

<<root::{{value(#calc-input)}}>>

Round

Function: round the number

Signature:

<<round::[number*]::[precision]>>

Fields:

Output:

[number]

Example: round the "cost" variable to 2 decimal places

<<round::{{variable::cost}}::2>>

Subtract

Function: subtract the second number from the first

Signature:

<<subtract::[first*]::[second*]>>

Fields:

Output:

[number]

Example: get the result of decrementing the "count" variable by 1

<<subtract::{{variable::count}}::1>>

Request

Returns: the body of the request; this parameter is accessible in any "HTTP" event

Signature:

{{request::[key]}}

Fields:

Example: get the value of "username" from within the request body

{{request::username}}

Response

Returns: the body of the response; this parameter is accessible in any "HTTP" event except for "HTTP Start"

Signature:

{{response::[key]}}

Fields:

Example: get the value of "user.id" from within the response body

{{response::user.id}}

Attribute

Returns: the value of an attribute on the element

Signature:

{{attribute([selector])::[name*]}}

Slot & Fields:

Example: get the value of an attribute called "data-name" from the current element

{{attribute::data-name}}

Checked

Returns: either true or false, depending on if the element is checked (only applies to radio and checkbox inputs)

Signature:

{{checked([selector])}}

Slot:

Example: get whether an input with id "my-checkbox" is checked

{{checked(#my-checkbox)}}

Disabled

Returns: either true or false, depending on if the element is disabled (only applies to form elements like inputs or buttons)

Signature:

{{disabled([selector])}}

Slot:

Example: get whether an input with id "my-checkbox" is disabled

{{disabled(#my-checkbox)}}

HTML

Returns: the HTML content of the element

Signature:

{{html([selector])}}

Slot:

Example: get the HTML from an element with id "instructions"

{{html(#instructions)}}

Index

Returns: a zero-based number representing the position of the element in its parent

Signature:

{{index([selector])}}

Slot:

Example: get the index of the current element

{{index}}

Text

Returns: the text content of the element (only applies to elements that can contain text, like headings or paragraphs)

Signature:

{{text([selector])}}

Slot:

Example: get the text from an element with id "instructions"

{{text(#instructions)}}

Value

Returns: the value of the element (only applies to form elements like inputs, selects and textareas)

Signature:

{{value([selector])}}

Slot:

Example: get the value of an input with name attribute of "startDate"

{{value([name='startDate'])}}

Auth

Returns: the user authentication token if they were logged in using the Cloud Canal Code authentication system; can be used to check if the user is logged in

Signature:

{{auth}}

Example: if the user is logged in, execute the group called "logged-in"

if({{auth}})::logged-in

Clipboard

Returns: the text copied to the user's clipboard (may require permission confirmation in the browser)

Warning: this is not currently supported in Firefox

Signature:

{{clipboard}}

Example: paste the clipboard value into an input with id "target"

value(#target)::{{clipboard}}

Code

Returns: the return value of the custom code; note that the code does not have to return anything, and can instead be used to execute any arbitrary code (including interacting with the Cloud Canal Code API)

Signature:

{{code::[code*]}}

Fields:

Example: return the value of the "count" variable + 1 (using the Cloud Canal Code API)

{{code::return window.cloudCanal.api.getVariable('count') + 1}}

Cookie

Returns: the value stored in a specific code-accessible cookie

Signature:

{{cookie::[key*]}}

Fields:

Example: get the value of a cookie called "x-id"

{{cookie::x-id}}

Data

Returns: context-specific data depending on the event in which this parameter is used (certain actions like "For Each" also modify the "data" parameter)

Signature:

{{data::[key]}}

Fields:

Example: get the value of the URL from the "data" parameter in an "HTTP" event

{{data::url}}

Meta

Returns: the content of the meta element with the given name

Signature:

{{meta::[name*]}}

Fields:

Example: get the meta description of the current page

{{meta::description}}

Query

Returns: the value of the specified query parameter

Signature:

{{query::[key*]}}

Fields:

Example: get the value for a query parameter called "id"

{{query::id}}

Title

Returns: the title of the current page

Signature:

{{title}}

Example: set the value of the current element to the page title

value::{{title}}

Variable

Returns: the value of the specified variable

Signature:

{{variable::[name*]::[scope]}}

Fields:

Example: get the value of a session variable called "username"

{{variable::username::session}}