Manuals

Form states

[
{
"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"
}
]

Form state mapping

{
"option_1":"default",
"option_2":"incomplete",
"option_3":"approved"

}

JSON code for dynamic list

{
"elements": [
{
"variableName": "oyvind_sveinsson",
"name": "Haldor Sveinsson"
},
{
"variableName": "milly_birkwich",
"name": "Milly Birkwich"
},
{
"variableName": "wasim_kutura",
"name": "Wasim Kutura"
}
]
}

Form prefill code from contexts

{
"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"
}
}
]
}

Task Template prefill code

{
"type": "form_context_map",
"map": {
"vessel": "contextMeta.vessel",
"customer": "contextMeta.customer",
"project_name": "meta.projectName"
}
}

Pokeball

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=

Sunburst Heatmap chart code (JSON)

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

Sunburst chart code (JSON)

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

Progress chart code (JSON)

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

Heatmap chart code (JSON)

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

Manuals for using the Zegeba apps

CAPTURING DATA WITH THE ZEGEBA FORMS/MOBILE APP

USING THE ZEGEBA NEXT APP

Manuals for managing the Zegeba system

MANAGING ZEGEBA FROM THE DASHBOARD

DESIGNING FORMS IN THE ZEGEBA DESIGNER