An element of type Link is a button that can link to e.g. a file, website, a repeat or another element in a form. It uses a URL-like definition of a link in the Reference property.

This article is updated for Zegeba v4.11.

Links

All usage and examples below will be revolve around setting and editing the Reference field on the link element, usage includes linking directly to files, websites, repeats and special Zegeba actions.

Link to a file

You can link directly to files found in https://live.zegeba.com/resources/ using relative links e.g.:

Usage: /<relative path to filename from /resources>

Example: /test.pdf

Link to a website

Open arbitrary websites in a new window e.g.:

Usage: Direct Webpage URL

Example: https://www.zegeba.com

Link to a repeat

Add new repeats with link element. Usage can be for styling reasons or for more advanced actions that will be shown later in this article.

New repeat (single-instance)

Add a repeat with single instance.

Usage: repeat://<elementId>

where elementId is the repeat element id, also notice the prefix. As an example say we had a repeat with the element ID repeat_1, the link reference would then be:

Example: repeat://repeat_1

New repeat with set values (single-instance)

Set predefined values of a repeat (single-instance) when link is clicked:

Usage: repeat://<rep_elementId>?<rep_element_1>=<description-template>

Example: repeat://repeater?greeting=Bonjour&name={#fullname}

The example above will evaluate to:

• Open repeat repeater instance.
• Auto fill greeting element inside repeat to text value “Bonjour”.
• Auto fill name element inside repeat with the input value of form element fullname.

Additional notes about setting values for repeats through a link:

1. The data will only be set when opening the link – there is no automatic updating of saved repeat instances if you later change this in the Designer.
2. It is highly recommended to set element_x and element_y to readOnly – as there is no checking of previous data when opening the link.
3. Values can only be set for basic input fields like text, numbers and dates. Dates must have the ISO date format.

New repeat (multiple-instances)

Add a new repeat instance (subform) each time it is clicked, as opposed to repeat://repeat_1 which will open the same repeat instance (subform) each time.

Usage: action://addrepeat|<elementId>

With addRepeat action you can use it to add as many repeat instances as you want. You can limit the number by setting a validation or branching rule.

Example: action://addrepeat|repeater&setValue

Add repeat and set values.

Example: action://addrepeat|repeater&setValue|greeting|Bonjour&setValue|name|{#fullname}

More about Actions below.

Go to

A link can also jump to another element, i.e. if the user clicks on the link, (s)he will be taken to that specified Element ID.

Usage: goto://<elementId>

Say you have an element with ID element_x, and you want a button that allows the user to jump there. The link reference would then be:

Example: goto://element_x

You can also add the goto command as an action, and perhaps combine it with other action commands

Example: action://goTo|text_input_element

More about actions below.

Actions

Actions are predefined dynamic events for the Zegeba form. Actions are triggered on activation via clicking a link element containing actions, and can be combined and used interchangeably as much as desired. So far the utility of adding repeats via links have been minimal, however actions unlocks the true potential for link elements. The different actions and examples below will demonstrate just how powerful and flexible this can be.

All links using actions are prefixed once with action://.
Usage: action://<Action>&<Action>&...

Below is a list of all the different Zegeba Actions available.

setValue

Action to set the value of an element.

The set value feature has 2 mandatory fields:

• Element ID of the element you want to set a value to.
  • Use comma as separator if you want to set the same value to multiple elements.
• The value you want the element to have.
  • This can be a text, a number and even a text with a description formula.

Usage: action://setValue|<elementIds>|<description-template>

Refer to 6.4 Description Formula for more about descripition templates.

Example: action://setValue|element_x|123
Example: action://setValue|element_x,element_y|123

clearAnswer

Action for clearing an answer of an element.

The Clear Answer function has 1 field:

• Element ID(s) of the element that you want to clear the answer of.
  • Use comma as separator if you want to set the same value to multiple elements.

Usage: action://clearAnswer|<elementIds>

Example: action://clearAnswer|element_x,element_y

selectOption

Set the selected option(s) of a Single-select/Multiple-select element.

The select option feature has 2 fields:

• Element ID of the element that have options you want to alter.
  • Use comma as separator if you want to set the same value to multiple elements.
• Selected internal element IDs of the options you want to select.
  • Use comma as separator if you want to set multiple options at the same time.

Usage: action://selectOption|<elementIds>|<optionIds>
Examples:

• action://selectOption|single_list|a
• action://selectOption|multi_list|a,b,c

unSelectOption

Action to Unselect option(s) from a Single-select/Multiple-select element. The unselect option feature has 2 fields:

• Element ID of the elements that have options you want to alter.
  • Use comma as separator if you want to set the same value to multiple elements.
• Element IDs of the options you want to unselect.
  • Use comma as separator if you want to set multiple options at the same time.

Usage: action://unSelectOption|<elementIds>|<optionIds>
Examples:

• action://unSelectOption|single_list|a
• action://unSelectOption|multi_list|a,b,c

toggleSelectOption

Action to Toggle the selected option(s) of an element. The toggle select of option feature has 2 fields:

• Element ID of the elements that have options you want to alter.
  • Use comma as separator if you want to set the same value to multiple elements.
• Element ID of the options you want to toggle the state of.
  • Use comma as separator if you want to set multiple options at the same time.

Usage: action://toggleSelectOption|<elementIds>|<optionIds>
Examples:

• action://toggleSelectOption|single_list|a
• action://toggleSelectOption|multi_list|a,b,c

setState

Set the state of an element. The set state feature has 2 fields:

• Element ID of the elements that have options you want to alter.
  • Use comma as separator if you want to set the same value to multiple elements.
• The states you want to set.
  • Use comma as separator if you want to set multiple states at the same time.

Usage: action://setState|<elementIds>|<States>

You can set the following states:

• enable
  Use enable to activate the element. This will reset the input-fields if it already contains data.
• disable
  Use disable to deactivate the element. This will reset the input-fields if it already contains data.
• show
  Use this to show a hidden element/page. This will not remove the content in the input-field.
• hide
  Use this to hide a visible element/page. This will not remove the content in the input-field.
• readonly
  Use this to set the input-field/page in read-only mode from editable . This will not remove the content in the input-field.
• editable
  Use this to set the input-field/page editable mode. This will not remove the content in the input-field.
• mandatory
  Use this to make the input-field mandatory. The form can not be saved before the input-field in answered.
• optional
  Use this to make a mandatory input-field optional.

Examples:

• action://setState|element_x|enable,show
  • Enable and show element_x.
• action://setState|element_x|disable,hide
  • Disable and hide element_x.

saveForm

Action for saving the form.

Usage: action://saveForm|
Example: action://saveForm|

saveAndCloseForm

Action for saving and closing the form.

Usage: action://saveAndCloseForm|
Example: action://saveAndCloseForm|

saveopenrepeat (repeat)

Action for saving the current open repeat instance. Only works when inside a repeat.

Usage: action://saveopenrepeat|<ID of Save Link element>
Example: action://saveopenrepeat|save_repeat_link

cancelopenrepeat (repeat)

Action for closing the current open repeat instance. Only works when inside a repeat.

Usage: action://cancelopenrepeat|<ID of Cancel Link element>
Example: action://cancelopenrepeat|cancel_repeat_link

Advanced Examples

Some examples of advanced usage of actions and links.

Change Form state and Save & Close

Because multiple actions can be chained together, we’re able to create complex fault tolerant work flows with a single link element. The example below will demonstrate one such case.

We want to use a custom button (link element) to save and close the form, but we also want to change a hidden element called form_state_number to 1 before closing. As the name might suggest the form_state_number element is mapped to a specific form state (see section Enable form state mapping rule), so when its value is equal to 1 the form state will change.

Example: action://setValue|form_state_number|1&saveAndCloseForm|

Link to another form

You can create a link that opens up another form, for instance if you when filling out a checklist have found a deviation that must be reported. The form will open up in a new tab in a browser and you can transfer data from the first form to the second. This functionality has some limitations though: you must be careful to save the data in the first form either before or after you have opened the second. And the link will work when you are working in the Dashboard or in the Zegeba app.

1. In the Dashboard, go to the form you want to link to, form no 2, click on the 3-striped menu button next to the form name and select Get Form Link > Link to open this form for data capture in the Dashboard
   – or –
   Get Form Link > Link to open this form for data capture in the Web App
2. Open the form you want to link from in the Designer, form no 1, and create a Link element.
3. In the Link element’s Reference property, paste the link that you copied with Ctrl-V.
4. At the end of this link you can add the elements with data to be copied, on the Description Formula form: &<ID in form no 2>={#<ID in form no 1>}
   You can add as many elements on this formula as you wish, with an & between each element.

A complete reference may look like this, where “live” is the name of the Zegeba server, name and error are elements in form no 2 and customer_name and error are elements in form no 1:

https://live.zegeba.com/form/580ff19d-2b3a-4f9e-b6da-5da1044df95e/capture&name={@customer_name}&error={@error}

As you must remember to save form no 1 you may wish to put a Save button Action element on the same page as this link to remind people of saving.