Connect

Overview

Transform your web development process with Cloud Canal Connect, a free, low-code framework for building web apps. Designed for Webflow but versatile enough for any platform, Cloud Canal Connect transforms static sites into dynamic experiences, supercharging your projects with interactive features.

The entire library is packed with features and weighs in at around 9 kB over our CDN (compressed)!

Philosophy

Cloud Canal Connect operates on one simple principle: when this happens, do that. It handles a wide range of website events—from page loads to button clicks. Want to fetch data from an API or execute a calculation when an event occurs? Cloud Canal makes it easy with four core components:

Events: Trigger actions based on user interactions, API calls, or form submissions.
Actions: Implement a variety of steps, like updating a table, which can be linked in sequence.
Transformers: Modify values through operations such as arithmetic, comparisons, or formatting.
Parameters: Access dynamic data such as query parameters, variables, or API responses.

How it Works

Quickly integrate Cloud Canal Connect into your site by adding the script snippet to the head. Then, bring elements to life with custom attributes that capture user interactions. These attributes act as event triggers, setting off one or more actions seamlessly.

Use Cases

Cloud Canal's flexibility supports a wide array of applications, limited only by your imagination. Ideal for creating advanced Webflow projects, it’s perfect for:

SaaS applications
Marketplaces
Job boards
Learning platforms
Online communities

...And much more. Let's unleash your creativity and build the next big thing with Cloud Canal Connect.

Getting Started

You can add Cloud Canal Connect to any webpage by including the snippet below in the <head> element. If you're using Webflow, we recommend applying it across your site via project settings.

<script src="https://cdn.jsdelivr.net/npm/@cloud-canal/cloud-canal@3" defer></script><style>  :root {    --cc-load-visibility: hidden;  }  :where([data-cc-hidden-until-load]) {    visibility: var(--cc-load-visibility);  }</style>

Once added, you can start using all of the components in this library. Note that the styles above are for the "Hidden Until Load" component to work properly.

Browser Extension

You can optionally install our free Chrome extension to make working with Cloud Canal in Webflow even easier. It let you test Cloud Canal attributes in the Webflow Designer's Preview mode, without having to publish changes first.

General

These components can be used across your site in combination with other Cloud Canal Connect features.

Miscellaneous

The following components don't fit into any other category but are important for various utility cases.

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>

Events

Cloud Canal Connect supports a ton of events right out of the box through the use of custom attributes. Once triggered, the actions inside the attribute's value will be executed sequentially. The data passed in the "Data" parameter is context-specific and will change based on the type of event.

DOM

These events trigger when changes happen to the Document Object Model (i.e. the page).

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}

HTTP

These events trigger at various stages of the HTTP requests executed by the "API" action. They are arranged here based on the order in which they are called, with "Start" coming first and "Finish" coming last.

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  }}

User

These events trigger when the user performs an action.

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

Custom

You can emit and listen for your own custom events if you need even more control.

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)]"

Actions

Actions are bits of functionality (similar to methods or functions in programming) that can do a wide range of things without resorting to coding. They are strung together in the value of an event attribute, such that when that event is triggered, the actions fire off in sequence. You can include multiple actions in an event attribute by separating them with double semicolons (;;).

Some actions have a "slot", which is placed in brackets right after the name of the action. Any remaining inputs are referred to as "fields". Slots and fields with an asterisk are required, while others are optional. When omitting a variable in an action's slot, you also omit the brackets. Actions with optional selectors will operate on the current element if the selector is omitted. Field order matters, so if you want to include a value for a field, you'll have to make sure that all fields up to that point have a value as well.

App

These actions are core to the Cloud Canal Connect experience and govern the sending & receiving of data.

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:

Name	Required	Type	Default	Description
loader	No	selector	-	Select any loader element(s) that will be shown when the request begins and hidden when it finishes
url	Yes	text	-	The URL of the endpoint to send the request to
method	No	text	GET	The request method to use (GET, POST, PUT, etc.)
auth	No	boolean	false	Whether to use Cloud Canal's authentication system
header(s)	No	text	-	A comma-separated list of additional headers to set, ex. "X-Foo:123,X-Bar:456"

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:

Name	Required	Type	Default	Description
selector	No	selector	-	Select any element(s) that will be bound (if omitted, applies to current element)
type	Yes	text	-	Which kind of binding to use (options: text, value, checked, form, array); if type is not one of the options, the value will be bound to a custom attribute with this name
key	Yes	text	-	The name of the variable to bind to
scope	No	text	window	Which scope of variable to bind to (options: window, session, local)

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 Connect like "click" or a custom one specific to your application

Applicable elements: any

Signature:

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

Fields:

Name	Required	Type	Default	Description
event	Yes	text	-	The name of the event to emit
data	No	any	-	Optional data to pass as the "data" parameter in triggered attributes

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:

Name	Required	Type	Default	Description
selector	No	selector	-	Select any element(s) that will have the event triggered on them (if omitted, applies to current element)
event	Yes	text	-	The name of the event to emit

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>

Attributes

These actions relate to attributes on elements.

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:

Name	Required	Type	Default	Description
selector	No	selector	-	Select any element(s) that will have the attribute set (if omitted, applies to current element)
name	Yes	text	-	The name of the attribute
value	No	any	-	The value to set (if omitted, will set a boolean attribute)

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:

Name	Required	Type	Default	Description
selector	No	selector	-	Select any element(s) that will have the attribute set (if omitted, applies to current element)
name	Yes	text	-	The name of the attribute

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>

Auth

These actions relate to Cloud Canal Connect's built-in authentication system, allowing easy integration with your back end of choice.

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:

Name	Required	Type	Default	Description
token	Yes	text	-	The token to save (usually from the successful response of a login or signup request)
expiration	No	number	-	The lifetime of the cookie in seconds, up to 7 days max due to browser constraints (if omitted, will last for the duration of the session)

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>

Classes

These actions relate to classes in the browser.

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:

Name	Required	Type	Default	Description
selector	No	selector	-	Select any element(s) that will have the class set (if omitted, applies to current element)
name	Yes	text	-	The name of the class

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:

Name	Required	Type	Default	Description
selector	No	selector	-	Select any element(s) that will have the class removed (if omitted, applies to current element)
name	Yes	text	-	The name of the class

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:

Name	Required	Type	Default	Description
selector	No	selector	-	Select any element(s) that will have the class toggled (if omitted, applies to current element)
name	Yes	text	-	The name of the class

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

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

Cookies

These actions relate to cookies in the browser.

Set Cookie

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

Applicable elements: any

Signature:

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

Fields:

Name	Required	Type	Default	Description
key	Yes	text	-	The name of the cookie
value	Yes	any	-	The value to store in the cookie
expiration	No	number	-	The lifetime of the cookie in seconds, up to 7 days max due to browser constraints (if omitted, will last for the duration of the session)

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:

Name	Required	Type	Default	Description
key	Yes	text	-	The name of the cookie

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>

Instances

These actions relate to templates and instances of them.

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:

Name	Required	Type	Default	Description
selector	No	selector	-	Select the FIRST matched element that will become the template (if omitted, applies to current element)
id	Yes	text	-	An identifier to associate with the template, used for instantiating it

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:

Name	Required	Type	Default	Description
container	No	selector	-	Select the FIRST matched element the instance will be appended to (if omitted, applies to current element)
id	Yes	text	-	The identifier of the template to use
data	No	any	inherited	The value to pass as the "data" parameter (if omitted, will be inherited from where this action is called)

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:

Name	Required	Type	Default	Description
selector	No	selector	-	Select the FIRST matched element from which to look for the instance (if omitted, applies to current element)
id	Yes	text	-	The identifier of the template to target

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 Connect 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:

Name	Required	Type	Default	Description
id	Yes	text	-	The identifier of the template to target

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>

Interface

These actions relate to various interactions with the UI.

Blur

Function: remove focus from the element(s)

Applicable elements: focusable elements like inputs or links

Signature:

blur([selector])

Slot:

Name	Required	Type	Default	Description
selector	No	selector	-	Select the matched element(s) to affect (if omitted, applies to current element)

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:

Name	Required	Type	Default	Description
selector	No	selector	-	Select the matched element(s) to affect (if omitted, applies to current element)
boolean	No	boolean	true	True to check the input and false to uncheck it

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:

Name	Required	Type	Default	Description
selector	No	selector	-	Select the matched element(s) to affect (if omitted, applies to current element)

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:

Name	Required	Type	Default	Description
value	Yes	any	-	The data to copy to the clipboard
type	No	text	text/plain	The MIME type of the data to copy

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:

Name	Required	Type	Default	Description
selector	No	selector	-	Select the matched element(s) to affect (if omitted, applies to current element)

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:

Name	Required	Type	Default	Description
selector	No	selector	-	Select the matched element(s) to affect (if omitted, applies to current element)

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:

Name	Required	Type	Default	Description
selector	No	selector	-	Select the matched element(s) to affect (if omitted, applies to current element)

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:

Name	Required	Type	Default	Description
selector	No	selector	-	Select the matched element(s) to affect (if omitted, applies to current element)

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:

Name	Required	Type	Default	Description
selector	No	selector	-	Select the matched element(s) to affect (if omitted, applies to current element)
value	No	text	(empty)	The HTML content to set (if omitted, will clear the HTML content)

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:

Name	Required	Type	Default	Description
selector	No	selector	-	Select the matched element(s) to affect (if omitted, applies to current element)
message	Yes	text	-	The error message to display
class	No	text	-	An optional class to apply to the element

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."/>

Name	Required	Type	Default	Description
name	Yes	text	-	The name attribute of the meta element
content	No	text	(empty)	The content attribute of the meta element

Options

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

Applicable elements: select elements

Signature:

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

Slot & Fields:

Name	Required	Type	Default	Description
selector	No	selector	-	Select the matched element(s) to affect (if omitted, applies to current element)
array	Yes	array	-	The list to generate the options from
text	No	text	-	An optional key at which to find the text of the option (if using an array of objects)
value	No	text	-	An optional key at which to find the value of the option (if using an array of objects)

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:

Name	Required	Type	Default	Description
selector	No	selector	-	Select the matched element(s) to affect (if omitted, applies to current element)

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:

Name	Required	Type	Default	Description
selector	No	selector	-	Select the matched element(s) to affect (if omitted, applies to current element)

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:

Name	Required	Type	Default	Description
selector	No	selector	-	Select the FIRST matched element to affect (if omitted, applies to current element)
behavior	No	text	smooth	Determines the scroll type (options: smooth, instant, auto)
block	No	text	start	Defines vertical alignment (options: start, center, end, nearest)
inline	No	text	nearest	Defines horizontal alignment (options: start, center, end, nearest)

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:

Name	Required	Type	Default	Description
selector	No	selector	-	Select the matched element(s) to affect (if omitted, applies to current element)

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:

Name	Required	Type	Default	Description
selector	No	selector	-	Select the matched element(s) to affect (if omitted, applies to current element)
name	Yes	text	-	The name of the CSS property in camel case, like "backgroundColor" or "display"
value	No	text	-	The value to set (if omitted, will unset the inline property)

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:

Name	Required	Type	Default	Description
selector	No	selector	-	Select the matched element(s) to affect (if omitted, applies to current element)
value	Yes	text	-	The text to set (can be an empty string to clear text)

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:

Name	Required	Type	Default	Description
text	Yes	text	-	The title to set

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:

Name	Required	Type	Default	Description
selector	No	selector	-	Select the matched element(s) to affect (if omitted, applies to current element)

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:

Name	Required	Type	Default	Description
selector	No	selector	-	Select the matched element(s) to affect (if omitted, applies to current element)
class	No	text	-	An optional class to remove from the element

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:

Name	Required	Type	Default	Description
selector	No	selector	-	Select the matched element(s) to affect (if omitted, applies to current element)
value	Yes	depends	-	The value to set (can be an empty string to clear value)

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" />

Logic

These actions relate to logical flows like conditions and loops.

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:

Name	Required	Type	Default	Description
number	No	number	-	The number of iterations (if omitted, loop infinitely)
group	Yes	text	-	The name of the group to execute (same element)

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:

Name	Required	Type	Default	Description
array	Yes	array	-	The list to iterate over
group	Yes	text	-	The name of the group to execute (same element)

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:

Name	Required	Type	Default	Description
selector	No	selector	-	Select the matched element(s) on which to trigger the group(s) (if omitted, applies to current element)
name	Yes	text	-	The name of the group to execute

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:

Name	Required	Type	Default	Description
condition	Yes	boolean	-	Evaluates to either true or false and executes the corresponding action group
true	Yes	text	-	The name of the group to execute if the condition is true
false	No	text	-	The name of the group to execute if the condition is false

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:

Name	Required	Type	Default	Description
name	Yes	text	-	An identifier to assign to this timeout so it can be referenced later
time	Yes	number	-	The duration in seconds before the group is executed
group	Yes	text	-	The name of the group to execute

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:

Name	Required	Type	Default	Description
time	Yes	text	-	The duration in seconds to pause for

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>

Navigation

These actions relate to sending the user to specific pages.

Navigate

Function: send the user to the specified URL

Applicable elements: any

Signature:

navigate::[url*]

Fields:

Name	Required	Type	Default	Description
url	Yes	text	-	The URL to navigate to

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:

Name	Required	Type	Default	Description
url	Yes	text	-	The URL to redirect to

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>

Query Parameters

These actions relate to the query string of the current URL.

Set Query

Function: add or update a key in the query string

Applicable elements: any

Signature:

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

Fields:

Name	Required	Type	Default	Description
key	Yes	text	-	The name of the query parameter
value	No	text	(empty)	The value of the query parameter

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:

Name	Required	Type	Default	Description
key	Yes	text	-	The name of the query parameter

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>

System

These actions are useful for testing or logging information.

Alert

Function: show an alert message in the browser

Applicable elements: any

Signature:

alert::[message*]

Fields:

Name	Required	Type	Default	Description
message	Yes	text	-	The message to display

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:

Name	Required	Type	Default	Description
message	Yes	text	-	The message to log

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

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

Tabs

These actions relate to creating advanced components for tabs, sliders, and multistep forms.

Tabs

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

Applicable elements: any (with children)

Signature:

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

Fields:

Name	Required	Type	Default	Description
selector	No	selector	-	Select the first matched element on which to transform into tabs (if omitted, applies to current element)
id	Yes	text	-	The identifier to tie this tabs instance to (must be unique)

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:

Name	Required	Type	Default	Description
id	Yes	text	-	The identifier of the tabs component to target
page	Yes	various	-	The page to switch to (can be a zero-based numerical index or one of: previous, next, first, last, invalid); "invalid" switches to the first page with invalid elements, otherwise remaining on the current page
validate	No	various	false	Whether to validate form elements on the current page prior to switching (can be true/false or a specific class name to apply to invalid elements)

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>

Variables

These actions relate to variables, which can persist over different scopes:

window: until navigation or refresh
session: until the session ends (the tab is closed)
local: until cleared programmatically or by the user

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:

Name	Required	Type	Default	Description
name	Yes	text	-	The name of the variable
value	Yes	any	-	The value to set
scope	No	text	window	Where to store the variable (options: window, session, local)
expiration	No	number	(empty)	An optional lifetime for the variable in seconds

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:

Name	Required	Type	Default	Description
name	Yes	text	-	The name of the variable
scope	No	text	window	The scope of the variable (options: window, session, local)

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:

Name	Required	Type	Default	Description
scope	No	text	window	The scope of the variables (options: window, session, local)

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

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

Transformers

Sometimes the data you receive from an API call or user input isn't in the exact format you need. Transformers change the data passed into them by applying some sort of operation and returning the result. They are especially useful with "Logic" actions such as conditions and loops.

Comparison

These transformers compare two values and output either true or false.

Equal

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

Signature:

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

Fields:

Name	Required	Type	Default	Description
first	Yes	any	-	The first value to compare
second	Yes	any	-	The second value to compare

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:

Name	Required	Type	Default	Description
first	Yes	any	-	The first value to compare
second	Yes	any	-	The second value to compare

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:

Name	Required	Type	Default	Description
first	Yes	any	-	The first value to compare
second	Yes	any	-	The second value to compare

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:

Name	Required	Type	Default	Description
first	Yes	any	-	The first value to compare
second	Yes	any	-	The second value to compare

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:

Name	Required	Type	Default	Description
first	Yes	any	-	The first value to compare
second	Yes	any	-	The second value to compare

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:

Name	Required	Type	Default	Description
first	Yes	any	-	The first value to compare
second	Yes	any	-	The second value to compare

Output:

true | false

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

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

Date & Time

These transformers format dates and times.

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:

Name	Required	Type	Default	Description
timestamp	Yes	number	-	The timestamp in milliseconds
unit	No	text	ms	The unit of the timestamp (either s for seconds or ms for milliseconds)
zone	No	text	-	The IANA time zone, like "America/Los_Angeles" or "UTC" (if omitted, defaults to user's browser time zone)
locale	No	text	-	The locale, like "en-US" (if omitted, defaults to user's browser locale)

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:

Name	Required	Type	Default	Description
timestamp	Yes	number	-	The timestamp in milliseconds
unit	No	text	ms	The unit of the timestamp (either s for seconds or ms for milliseconds)
zone	No	text	-	The IANA time zone, like "America/Los_Angeles" or "UTC" (if omitted, defaults to user's browser time zone)
locale	No	text	-	The locale, like "en-US" (if omitted, defaults to user's browser locale)

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}}>>

Lists

These transformers operate on lists of various items.

Count

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

Signature:

<<count::[selector*]>>

Fields:

Name	Required	Type	Default	Description
selector	Yes	selector	-	The selector used to match the elements to count

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:

Name	Required	Type	Default	Description
array	Yes	array	-	The array of items to count

Output:

[number]

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

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

Math

These transformers perform various arithmetic operations and return the result.

Absolute

Function: get the absolute value of a number

Signature:

<<absolute::[number*]>>

Fields:

Name	Required	Type	Default	Description
number	Yes	number	-	The number from which to get the absolute value

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:

Name	Required	Type	Default	Description
first	Yes	number	-	The first number
second	Yes	number	-	The second number

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:

Name	Required	Type	Default	Description
number	Yes	number	-	The number to round
precision	No	number	0	The number of decimal places to round to

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:

Name	Required	Type	Default	Description
numerator	Yes	number	-	The first number
denominator	Yes	number	-	The second number

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:

Name	Required	Type	Default	Description
number	Yes	number	-	The number to round
precision	No	number	0	The number of decimal places to round to

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:

Name	Required	Type	Default	Description
first	Yes	number	-	The first number
second	Yes	number	-	The second number

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:

Name	Required	Type	Default	Description
number	Yes	number	-	The number to convert
precision	No	number	0	The number of decimal places to show

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:

Name	Required	Type	Default	Description
base	Yes	number	-	The first number
exponent	No	number	2	The second number

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:

Name	Required	Type	Default	Description
radicand	Yes	number	-	The first number
index	No	number	2	The second number

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:

Name	Required	Type	Default	Description
number	Yes	number	-	The number to round
precision	No	number	0	The number of decimal places to round to

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:

Name	Required	Type	Default	Description
first	Yes	number	-	The first number
second	Yes	number	-	The second number

Output:

[number]

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

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

Text

These transformers modify text

Replace

Function: replace all instances of the pattern within the text with the given replacement

Signature:

<<replace::[text*]::[pattern*]::[replacement]::[flags]>>

Fields:

Name	Required	Type	Default	Description
text	Yes	text	-	The text to make the replacements in
pattern	Yes	text \| regex	-	The text to replace
replacement	No	text	(empty)	What to replace the text with
flags	No	text	-	If set, will act as regex flag(s) for the replacement, and the pattern will be treated as a regular expression

Output:

[text]

Example: replace all instances of "the" from the text with "my"

<<replace::This is the text::the::my>>

Example: use a regular expression to replace all numbers with "X" (equivalent to /[0-9]/g)

<<replace::abc123::[0-9]::X::g>>

Parameters

Parameters allow you to pull data from various dynamic sources, be it API calls, variables, user inputs, or anything else. They are the key to building app-like functionality into your project.

API

These parameters work exclusively with the "API" action.

Request

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

Signature:

{{request::[key]}}

Fields:

Name	Required	Type	Default	Description
key	No	text	-	The optional key to search for within the request body (using dot notation)

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:

Name	Required	Type	Default	Description
key	No	text	-	The optional key to search for within the response body (using dot notation)

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

{{response::user.id}}

Elements

These parameters get their values from various properties of elements on the page.

Attribute

Returns: the value of an attribute on the element

Signature:

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

Slot & Fields:

Name	Required	Type	Default	Description
selector	No	selector	-	The selector used to get the FIRST matched element to affect (if omitted, the current element is used)
name	Yes	text	-	The name of the attribute from which to get the value

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:

Name	Required	Type	Default	Description
selector	No	selector	-	The selector used to get the FIRST matched element to affect (if omitted, the current element is used)

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:

Name	Required	Type	Default	Description
selector	No	selector	-	The selector used to get the FIRST matched element to affect (if omitted, the current element is used)

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:

Name	Required	Type	Default	Description
selector	No	selector	-	The selector used to get the FIRST matched element to affect (if omitted, the current element is used)

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:

Name	Required	Type	Default	Description
selector	No	selector	-	The selector used to get the FIRST matched element to affect (if omitted, the current element is used)

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:

Name	Required	Type	Default	Description
selector	No	selector	-	The selector used to get the FIRST matched element to affect (if omitted, the current element is used)

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:

Name	Required	Type	Default	Description
selector	No	selector	-	The selector used to get the FIRST matched element to affect (if omitted, the current element is used)

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

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

Universal

These parameters can be used anywhere.

Auth

Returns: the user authentication token if they were logged in using the Cloud Canal Connect 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 Connect API)

Signature:

{{code::[code*]}}

Fields:

Name	Required	Type	Default	Description
code	Yes	text	-	The JavaScript code to execute

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

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

Cookie

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

Signature:

{{cookie::[key*]}}

Fields:

Name	Required	Type	Default	Description
key	Yes	text	-	The name of the cookie from which to get the value

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:

Name	Required	Type	Default	Description
key	No	text	-	The optional key to search for within the data object (using dot notation)

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

{{data::url}}

Query

Returns: the value of the specified query parameter

Signature:

{{query::[key*]}}

Fields:

Name	Required	Type	Default	Description
key	Yes	text	-	The name of the query parameter in the URL

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:

Name	Required	Type	Default	Description
name	Yes	text	-	The name of the variable
scope	No	text	window	The scope of the variable (options: window, session, local)

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

{{variable::username::session}}