Form designers often present options in a Single Select element, and decide what to show to the user based on these options. In the Examples chapter in the Designer manual we have now added a section showing how you can define a hide/show logic. See more in Designer: 9.2 Show elements based on user’s selection.
New features in Zegeba v 3.8 PDF printing: Links to high-quality photos: As Zegeba users tend to add many photos to a form, the resolution of each photo is reduced in order to prevent the PDF report becoming too large to send by email. We have now added a link to […]
This JSON code example prefills a form with the user info filled out in the Users module. The code contains all standard user info fields, such as username and first_name. You may copy this and delete the code for the fields you don’t need. After copying into the form you must change the values for “id” to the element IDs used in your form.
At the end is the code for a field custom made for this server: “Workplace”. If your server has custom user fields, check with your Zegeba contact which “key” you should use for prefill of these fields.
{
"entries": [
{
"id": "username",
"type": "context",
"value": {
"key": "userInfo.userId",
"type": "direct"
}
},
{
"id": "first_name",
"type": "context",
"value": {
"key": "userInfo.name",
"type": "direct"
}
},
{
"id": "last_name",
"type": "context",
"value": {
"key": "userInfo.lastName",
"type": "direct"
}
},
{
"id": "phone_number",
"type": "context",
"value": {
"key": "userInfo.phone",
"type": "direct"
}
},
{
"id": "email",
"type": "context",
"value": {
"key": "userInfo.email",
"type": "direct"
}
},
{
"id": "notes",
"type": "context",
"value": {
"key": "userInfo.notes",
"type": "direct"
}
},
{
"id": "workplace",
"type": "context",
"value": {
"key": "userInfo.workSite",
"type": "direct"
}
}
]
}
[
{
"color": "red",
"state": "new",
"displayName": "New",
"progress": 1
},
{
"color": "orange",
"state": "in_progress",
"displayName": "In Progress",
"progress": 50
},
{
"color": "green",
"state": "approved",
"displayName": "Approved (send mail)",
"progress": 100,
"action": "readOnly"
}
]
{
"option_1":"default",
"option_2":"incomplete",
"option_3":"approved"
}
{
"elements": [
{
"variableName": "oyvind_sveinsson",
"name": "Haldor Sveinsson"
},
{
"variableName": "milly_birkwich",
"name": "Milly Birkwich"
},
{
"variableName": "wasim_kutura",
"name": "Wasim Kutura"
}
]
}
{
"entries": [
{
"id": "vessel",
"type": "context",
"value": {
"key": "task.vessel",
"type": "direct"
}
},
{
"id": "customer",
"type": "context",
"value": {
"key": "task.customer",
"type": "direct"
}
},
{
"id": "project_name",
"type": "context",
"value": {
"key": "task.project_name",
"type": "direct"
}
}
]
}
{
"type": "form_context_map",
"map": {
"vessel": "contextMeta.vessel",
"customer": "contextMeta.customer",
"project_name": "meta.projectName"
}
}
Base64 code for the pokeball image:data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAADtklEQVR4nFWO225UdRyF1/+wD7P3dKYFB4iISKIJyLEMA6U2wUQSNY3XvoQ3voAXarzzHXwBL/CGpDSKNUKAEsAYCSBo2zm0zHSOe2bP//jzotHgd7Wy8iVrgRwR9aynCXkylJEmbXIiRc4ZmxF5R4bIEynnPRE5NyJDxpEhCd7HdFYEcIKBj2OkUJ2rSx/mxkmGxFJsfbcs79y6y7xliMacF4mPpPOwrEVUAQSGCpFAdGFxPhj774si8amPhJ1MYxd6UboUPiya2Ue3f4cFOMABAqMpQQLCYjo+ufTRigmCkvDOeDVKQ16//3AQ4UiGx/PviJfB14dHN+5sSg0wQIKRJ53t8JmDC9X3bjoxLDKIfiEPOr9tadUJ4FVRJJljiLtvHWt59sUbwYOf1gchD8CZJ3LA2fPv/owDYQFt4+MHv+QWIZCFgAUPIIgnOtjmUf/Ywb6f+3a2f2v9CSwkWefldA4RIvv47q8VjrENCyHf4NOjU2hAKZThNyL1ple2OQwrJ2jWt/2wEpQ4h7hYW7zGPeP0mpXOgUG3MT3g4AEThEA4YIX9PjUGZQ1i2VfPip8uXe0xSCsx5YPUvv309o+MU+JkCHhtN47Vviw2TLHwzfb+iXt5KJZtk0uRWvTKzHdFFsBKObYlyxuxHBw9EsiokStJzJfkZyk9uddgGqevHP+uf2hj/FclTYOpMq6idGFOhzGkRCjH6eufdxuNfTEXkTk0G03s1Kmn6zeXzp0bBeL+vT+WFs6Sj9hcOdcUpjYZ5M+JC0BCQE6yHx6tD2FLSCeeEmJXPngfuqBIMB+EXQZeur62mjkqU7JNu/vSfZ98vMwcoK2qXZxXZHKi/sZ21hvl7Z7Ns1rtyoTIezp96fKLP59v7mxOxv36zubo7+ZOo3n5+BkiB1JEhk7MX+gTKaJ6v9vNs0a/Q25y5vLJ89XTnVa9M87Go2m2nW3uDjbrG6eqp8hoT0qqcAzIGaiyNeD2cBq12q0wLvR26fq1G9zanKEyVE02CojKRmQiKAaJ93ZCHGQoU5YMXTh7sUeWPHmi7na2M8x3t9r9zu5ot7fVaTdftuu9neaLZ+erC6TJe58TgYiISGtNRNVqlV7BGNNqter1+tbWVqPRaDabtVrtVYE55zjnAPbCwsLCZDJZWVnx3gdBoJRKkkRrvby8HMfx6upqkiT4F7a3IITQWsdxTETe+8XFRSICoLU2xszMzKytrYVhiP/DrLVCCABExBjba6213vv/bGutlHLv2n8OgH8Ak9eIhVB+E7MAAAAASUVORK5CYII=
In the Chart element, select Sunburst Heatmap as Chart Type and paste the code below in Chart Specification. Substitute center_cell_sunburstheatmap etc. with the Element IDs used in Number elements in your form. When the user fills in a value in one of these elements, the value will be displayed in the chart. In the “meta” section, use the “ranges” section for intervals, “values” for distinct values.
{
"data": {
"centerCell": {
"question": {
"path": "center_cell_sunburstheatmap"
},
"label": "{0}%\n",
"itemStyle": {
"color": {
"type": "range",
"id": "percentage"
},
"borderWidth": 0
},
"labelStyle": {
"fontSize": 20
}
},
"spokes": [
[
{
"question": {
"path": "spoke_a1"
},
"label": "A1",
"labelStyle": {
"color": "#000",
"fontSize": 20
},
"itemStyle": {
"color": {
"type": "range",
"id": "percentage"
}
}
},
{
"question": {
"path": "spoke_a2"
},
"label": "A2",
"labelStyle": {
"color": "#000",
"fontSize": 20
},
"itemStyle": {
"color": {
"type": "range",
"id": "percentage"
}
}
},
{
"question": {
"path": "spoke_a3"
},
"label": "A3",
"labelStyle": {
"color": "#000",
"fontSize": 20
},
"itemStyle": {
"color": {
"type": "range",
"id": "percentage"
}
}
}
],
[
{
"question": {
"path": "spoke_b1"
},
"label": "B1",
"labelStyle": {
"color": "#000",
"fontSize": 20
},
"itemStyle": {
"color": {
"type": "map",
"id": "values"
}
}
},
{
"question": {
"path": "spoke_b2"
},
"label": "B2",
"labelStyle": {
"color": "#000",
"fontSize": 20
},
"itemStyle": {
"color": {
"type": "map",
"id": "values"
}
}
},
{
"question": {
"path": "spoke_b3"
},
"label": "B3",
"labelStyle": {
"color": "#000",
"fontSize": 20
},
"itemStyle": {
"color": {
"type": "map",
"id": "values"
}
}
},
{
"question": {
"path": "spoke_b4"
},
"label": "B4",
"labelStyle": {
"color": "#000",
"fontSize": 20
},
"itemStyle": {
"color": {
"type": "map",
"id": "values"
}
}
}
]
]
},
"meta": {
"colors": {
"ranges": {
"percentage": {
"palette": {
"1": "#D96459",
"25": "#F2AE72",
"50": "#F2E394",
"75": "#588C7E",
"-1": "#cccccc"
},
"default": "#f5f5f5"
},
"values": {
"palette": {
"0": "#D96459",
"1": "#F2AE72",
"2": "#F2E394",
"-1": "#588C7E"
},
"default": "#f5f5f5"
}
},
"maps": {
"values": {
"palette": {
"no": "#D96459",
"partly": "#F2AE72",
"na": "#F2E394",
"yes": "#588C7E"
},
"default": "#f5f5f5"
}
}
}
}
}
In the Chart element, select Sunburst as Chart Type and paste the code below in Chart Specification. Substitute center_cell etc. with the Element IDs used in Number elements in your form. When the user fills in a value in one of these elements, the value will be displayed in the chart. In the “meta” section, use the “ranges” section for intervals, “values” for distinct values.
{
"data": {
"centerCell": {
"question": {
"path": "center_cell"
},
"label": "Center \n cell\n",
"itemStyle": {
"color": {
"type": "range",
"id": "percentage"
}
},
"labelStyle": {
"fontSize": 16
}
},
"innerRing": [
{
"question": {
"path": "inner_ring_1"
},
"label": "Inner Ring 1",
"itemStyle": {
"color": {
"type": "range",
"id": "percentage"
}
},
"labelStyle": {
"fontSize": 16
}
},
{
"question": {
"path": "inner_ring_2"
},
"label": "Inner Ring 2",
"itemStyle": {
"color": {
"type": "range",
"id": "percentage"
}
},
"labelStyle": {
"fontSize": 16
}
}
],
"outerRing": [
[
{
"question": {
"path": "outer_ring_a1"
},
"label": "Outer Ring 1",
"labelStyle": {
"color": "#000",
"fontSize": 14
},
"itemStyle": {
"color": {
"type": "range",
"id": "percentage"
}
}
},
{
"question": {
"path": "outer_ring_a2"
},
"label": "Outer Ring 2",
"labelStyle": {
"color": "#000",
"fontSize": 14
},
"itemStyle": {
"color": {
"type": "range",
"id": "percentage"
}
}
},
{
"question": {
"path": "outer_ring_a3"
},
"label": "Outer Ring 3",
"labelStyle": {
"color": "#000",
"fontSize": 14
},
"itemStyle": {
"color": {
"type": "range",
"id": "percentage"
}
}
}
],
[
{
"question": {
"path": "outer_ring_b1"
},
"label": "Outer Ring 1",
"labelStyle": {
"color": "#000",
"fontSize": 14
},
"itemStyle": {
"color": {
"type": "map",
"id": "values"
}
}
},
{
"question": {
"path": "outer_ring_b2"
},
"label": "Outer Ring 2",
"labelStyle": {
"color": "#000",
"fontSize": 14
},
"itemStyle": {
"color": {
"type": "map",
"id": "values"
}
}
},
{
"question": {
"path": "outer_ring_b3"
},
"label": "Outer Ring 3",
"labelStyle": {
"color": "#000",
"fontSize": 14
},
"itemStyle": {
"color": {
"type": "map",
"id": "values"
}
}
}
]
]
},
"meta": {
"colors": {
"ranges": {
"percentage": {
"palette": {
"1": "#e04845",
"25": "#F2AE72",
"50": "#f4f449",
"75": "#388926"
},
"default": "#f5f5f5"
},
"values": {
"palette": {
"0": "#e04845",
"3": "#F2AE72",
"6": "##f4f449",
"9": "#388926"
},
"default": "#f5f5f5"
}
},
"maps": {
"values": {
"palette": {
"no": "#e04845",
"partly": "#f4f449",
"na": "#ad9e9d",
"yes": "#388926"
},
"default": "#f5f5f5"
}
}
}
}
}
In the Chart element, select Progress as Chart Type and paste the code below in Chart Specification. Substitute value1 etc. with the Element IDs used in Number elements in your form. When the user fills in a value in one of these elements, the value will be displayed in the chart.
{
"data":[
{
"path": "value1"
},
{
"path": "value2"
},
{
"path": "value3"
},
{
"path": "value4"
}
]
}
In the Chart element, select Heatmap as Chart Type and paste the code below in Chart Specification. Substitute heatmap_a1 etc. with the Element IDs used in Number elements in your form. When the user fills in a value in one of these elements, the value will be displayed in the chart. In the “meta” section, use the “ranges” section for intervals, “values” for distinct values.
{
"data": [
{
"label": "A Label",
"columns": [
{
"question": {
"path": "heatmap_a1"
},
"label": "A1\n{0}%",
"itemStyle": {
"color": {
"type": "range",
"id": "percentage"
}
}
},
{
"question": {
"path": "heatmap_a2"
},
"label": "A2\n{0}%",
"itemStyle": {
"color": {
"type": "range",
"id": "percentage"
}
}
},
{
"question": {
"path": "heatmap_a3"
},
"label": "A3\n{0}%",
"itemStyle": {
"color": {
"type": "range",
"id": "percentage"
}
}
},
{
"question": {
"path": "heatmap_a4"
},
"label": "A4\n{0}%",
"itemStyle": {
"color": {
"type": "range",
"id": "percentage"
}
}
}
]
}
],
"meta": {
"colors": {
"ranges": {
"percentage": {
"palette": {
"1": "#D96459",
"25": "#F2AE72",
"50": "#F2E394",
"75": "#588C7E",
"-1": "#cccccc"
},
"default": "#f5f5f5"
}
},
"maps": {
"values": {
"palette": {
"no": "#D96459",
"partly": "#F2AE72",
"na": "#F2E394",
"yes": "#588C7E"
},
"default": "#f5f5f5"
}
}
}
}
}