6.6 Links / Go to / Actions
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.
Link to a file
Enter a normal URL link to the file, e.g.:
https://live.zegeba.com/a/openxdata/static/test.pdf
or from Zegeba v 4.8 just
/test.pdf
Effect:
In the Zegeba app for iOS and Android, the file will be downloaded and cached on the device for easy offline access.
In the Web app, the file will be downloaded for viewing.
Note: From Zegeba v 4.8 onwards you can enter in Reference just the filename with a / in front, such as /test.pdf. This relative reference will make it easier to export the form from for instance a test server to the production server. As long as the file is placed in the same Resources folder in both servers, it will be found in the target server without problems
Link to a website
Enter the URL link to the website, such as:
Effect: The website will open in a new browser window or tab.
Link to a repeat
Enter a link with prefix repeat:// and the Element ID of the repeat.
If you have a repeat with the ID repeat_1, the link reference would be:
repeat://repeat_1
Note: The link will be tied to a single instance (form) of a repeat. Clicking the same link will always open the same instance. To add a new repeat instance each time the link is clicked, please use the addRepeat action described below.
Add a repeat instance – action://addrepeat |repeat_1
Add repeat will 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.
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.
Examples
action://addrepeat|repeat_1
will add a new instance of the Repeat element “repeat_1”
action://addrepeat|repeat_1?element_x=abc
will add a new instance of the Repeat element “repeat_1” and set element_x to abc.
abc may be a value or a name, or a {#…} or {@…} code from an element outside of the repeat.
element_x is an element inside the repeat.
action://addrepeat|repeat_1?element_x=abc&element_y=xyz
will add a new instance of the Repeat element “repeat_1” and set element_x to abc and element_y to xyz.
abc and xyz may be values or names, or {#…} or {@…} codes from elements outside of the repeat.
element_x and element_y are elements inside the repeat.
Link to a repeat and set some values
You can also set values of the linked repeat when you click on the link by adding:
?element_x=value
Example
repeat://repeat_1?element_x=abc
will open repeat_1 and set element_x to abc.
And you may add more than one value:
?element_x=value_1&element_y=value_2
Example
repeat://repeat_1?element_x=abc&element_y=xyz
will open repeat_1 and set element_x to abc and element_y to xyz.
Note: These links will be tied to a single instance (form) of a repeat. Clicking the same link will always open the same instance. To add a new repeat instance each time the link is clicked, please use the addRepeat action below and use the same value settings.
Note the following about setting values for repeats through a link:
- 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.
- 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.
- Values can only be set for basic input fields like text, numbers and dates. Dates must have the ISO date format.
Go to / Link to another element
A link can also function as a link to another element. If the user clicks on the link, (s)he will be taken to the specified Element ID.
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:
goto://element_x
From Zegeba v 4.4, you can also add the goto command as an action, and perhaps combine it with other action commands
action://goTo|text_input_element
Note! Only elements with an input field can be used as a target for Goto links.
If you want to go to a specific page, you must add a hidden Text Input element on top of the page, and go to this element.
Actions (triggered when clicking the link)
Enter a link with prefix action:// and the action details as described below.
Note: | is used as a delimiter between fields, and , (comma) is used as delimiter between list of elements in a field. You can also link several action statements together with &. See more on that further down the page.
Set the value of an element – action://setValue
The set value feature has 2 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.
Example
action://setValue|element_x|value
action://setValue|element_x,element_y|value
Clear the answer of an element – action://clearAnswer
The Clear Answer function has 1 field:
- Element ID 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.
Example
action://clearAnswer|element_x
action://clearAnswer|element_x,element_y
Set the selected options of an element – action://selectOption
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. - Element IDs of the elements you want to select.
Use comma as separator if you want to set multiple options at the same time.
Example
action://selectOption|element_x|option_1
action://selectOption|element_x,element_y|option_1,option_2
Unselect options of an element – action://unSelectOption
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.
Example
action://unSelectOption|element_x|option_1
action://unSelectOption|element_x,element_y|option_1,option_2
Toggle the selected options of an element – action://toggleSelectOption
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.
Example
action://toggleSelectOption|element_x|option_1
action://toggleSelectOption|element_x,element_y|option_1,option_2
Set the state (e.g. hidden) of an element – action://setState
The set state feature has 3 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.
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.
Example
action://setState|element_x|enable,show
will enable and show element_x, while:
action://setState|element_x|disable,hide
will disable and hide element_x.
Likewise with two elements at a time:
action://setState|element_x,element_y|enable,show
action://setState|element_x,element_y|disable,hide
You can link several action statements together with &.
Example
action://setValue|element_x|value1&setValue|element_y|value2
action://setValue|element_x|value1&setState|element_y|show
action://setState|element_x|show&clearAnswer|element_y&addRepeat|repeat_name|element_z=Pears&element_z2=Oranges
From Zegeba v 4.4 you can enter Save Form and Save and Close Form in Link buttons.
action://saveForm|
action://saveAndCloseForm|
In the command below, we are saving and closing the form after setting a hidden element called form_state_number to 1, an element that is mapped to a specific form state when its value is 1 (see section “Enable Form State Mapping rule” in Designing: 6.1 The main Form element). So we change the form state at the same time as we’re saving and closing the form.
action://setValue|form_state_number|1&saveAndCloseForm|
From Zegeba v 4.4 you can also enter SaveOpenRepeat and CancelOpenRepeat in Link buttons in repeats.
action://saveopenrepeat|<ID of Save Link button>
action://cancelopenrepeat|<ID of Cancel Link button>
This is described in Designing: 6.5 Repeats.
Note: If you use these Form and Repeat actions in combination with other actions, such as setValue or setState, place the Form or Repeat commands last, as in the example with setValue above here.
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.
- 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 - Open the form you want to link from in the Designer, form no 1, and create a Link element.
- In the Link element’s Reference property, paste the link that you copied with Ctrl-V.
- 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:
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.
It is not possible to have an automatic trigger for a link action via a link button. The action can only be triggered by a click.
