Overview of fields for Editor

General variables

Name	Explanation
type	Field type that is used.
key	The name of the field and what it's stored as on the server and referred to in the form
templateOptions	Variables for an given field type. See seperate table for general variables for templateOptions
defaultValue	Set a start value for the field
hide	Hide the field from the start
hideExpression	Hide the field when the given expression is true. model.key (hich key to look for) == (equals) &&(and) || (or) != (not equals) 23 (value).
expressionProperties	Lets you set specials like hide, required, etc. with expressions
className	Set CSS classes. See CSS classes for how it's used

{
  "type": "inline-input",
  "defaultValue": "07:30",
  "templateOptions": {
    "label": "Time",
    "inputType": "input",
    "type": "time"
  },
  "key": "startTime",
  "hide": true,
  "hideExpression": "model.confirm != 1",
  "expressionProperties": {
    "templateOptions.required": "model.project > 2"
  }
}

//Example for showing the coupling with hideExpression (model.key)
{
  "type": "checkbox",
  "defaultValue": false,
  "templateOptions": {
    "label": "Confirm the day"
  },
  "key": "confirm"
}

General templateOptions variables

Can be used under `templateOptions for all elements.

Name	Explanation
required	Requires the user to fill inn the field before the form is sent in. Can be true or false.
keepValue	The field gets the value from the last time it was stored for a given person. Can true or false.

{
  "type": "inline-input",
  "templateOptions": {
    "label": "Comment",
    "inputType": "input",
    "type": "text",
    "keepValue":true,
    "required":true
    },
  "key": "comment"
}

Static fields

Used to show static information or beautify the form.

Title

Shows an predifined title.

Name	Explanation
label	Title that is shown
size	Size of the title: (large)1-3(small)
saveLabel	Saves the label as the value for the field (Instead of nothing). Default: false

{
  "type": "title",
  "templateOptions": {
    "label": "Registrations!",
    "size": "2"
  },
  "key": "titlefield7"
}

Text

Shows an predefined text field.

Name	Explanation
label	Text that is shown
size	Size of the text: (large)1-3(small)
saveLabel	Saves the label as the value for the field (Instead of nothing). Default: false
markdown	Possibility to write text using Markdown. Note: If you use markdown, then label and size isn't used

{
  "type": "text",
  "templateOptions": {
    "label": "Enter the number of hours worked on the project!",
    "size": "2"
  },
  "key": "text2"
}

Space (blank lines)

Gives space between the fields. Possible to get an line with color to break up the form and give it color.

Name	Explanation
height	Number of blank lines
color	Line with color (hex-code)
type	Type of line: dotted (default), solid
size	Thickness (default 1)

{
  "type": "space",
  "templateOptions": {
    "label": "spacefield3",
    "height": "1"
  },
  "key": "spacefield3"
}

Image

Static image

Name	Explanation
src	Gets image from given url
imageSize	Size of image: small,medium,large
label	Text that is shown over the image
textSize	Size of label (large)1-3(small)
watchGroup	Will update src if one of these fields changes

{
  "type": "image",
  "templateOptions": {
    "label": "Tempus logo",
    "textSize": "2",
    "imageSize": "large",
    "src": "http://tempus.no/wp-content/uploads/2017/04/Tempus_logo-1.png"
  },
  "key": "imagefield4"
}

//Example with watchgroup
{
  "type": "image",
  "templateOptions": {
    "label": "Image",
    "textSize": "2",
    "imageSize": "large",
    "src": "http://tempus.no/wp-content/uploads/2017/04/{{project}}_test.png",
    "watchGroup": [
      "model.project"
    ]
  },
  "key": "imagefield5"
}

StyleForm

Lets you change the look of the form.

Name	Explanation
background	Background color of the form. Hex code
fontColor	Color of text. Hex code
hideSignArea	Hides the sign-ok field in the bottom of the form. Used when you are using buttons instead
fontSize	Size of text. Possible to use %. e.g. 110% to get it a little bigger
showPrint	To show the print-button when in form registration
noTmpStore	Set to true to disable the possibility to temporary store the form
showAllSteps	Set to true to show all the steps in the menu when an form is opened
custom	Enter your own CSS

{
  "type": "styleForm",
  "templateOptions": {
    "background": "#cca",
    "fontColor": "#fff",
    "hideSignArea": true,
    "showPrint": true,
    "noTmpStore": false,
    "showAllSteps": true,
    "custom":"ion-content{border:1px solid #ee0;}"
  },
  "key": "styleFormfield6"
}

Text/time inputs

input

Input is used to take text input from the user.

Look

Input can have different looks. It is set under type:

Type	Explanation
input	No label. Only input field
floating-input	When the user clicks/types in the field, the label is placed over the text
inline-input	Label on the left, input field on the right
stacked-input	Label on top, input below

{
  "type": "inline-input",   //layout-type.
  "templateOptions": {
    "label": "Comment",
    "inputType": "input",
    "type": "text"          //keyboard-type
  },
  "key": "comment"
}

Type of input

Change of the type of input is done by changing type under templateOptions.

Note: Looks, validation and solution may vary depending on OS and version.

Field-Type	Explanation
text	Normal keyboard
number	Numerical keyboard.
telephone	Telephone keyboard
email	Keyboard contains buttons like @ and .com.
date	Gives an native popup calendar
time	Gives a native popup watch
datetime-local	Gives an native popup picker for date and time

time

Time has as default the time it's shown. Gives an native popup.

Name	Explanation
label	Text that will give an explanation for the field
notInit	Set to true to not initalize the field with current time

{
  "type": "inline-input",
  "templateOptions": {
    "label": "Time",
    "inputType": "input",
    "type": "time"
  },
  "key": "startTime"
}

date

Date has as default the time it's shown. Gives an native popup.

Name	Explanation
label	Text that will give an explanation
inputType	Should be input.
type	Gives different keyboard layouts
daysFromNow	When it's type:date you can change the date X days forward (4) or backwards (-4)
notInit	Set to true to not initalize the field with current date

Set date 5 days back
{
  "type": "inline-input",
  "templateOptions": {
    "label": "Date",
    "inputType": "input",
    "type": "date",
    "daysFromNow": -5
  },
  "key": "fromDate"
}

datetime-local

Datetime-local has as default the time it's shown. Gives an native popup.

Name	Explanation
label	Text that will give an explanation
inputType	Should be input.
type	Gives different keyboard layouts
daysFromNow	When it's type:datetime-local you can change the date X days forward (4) or backwards (-4)
notInit	Set to true to not initalize the field with current datetime

Set date 5 days back
{
  "type": "inline-input",
  "templateOptions": {
    "label": "Date and time",
    "inputType": "input",
    "type": "datetime-local",
    "daysFromNow": -5
  },
  "key": "datetime"
}

TextArea

Larger text area for text input. Will automatically expand when text is written into it (unless it's disabled).

Name	Explanation
label	Text that will give an explanation
placeholder	Text that is in the text area until the user types in it
rows	The minimum number of rows the text area will have
autoExpand	Set to false to disable auto expanding

{
  "type": "textarea",
  "templateOptions": {
    "label": "",
    "placeholder": "Enter text ...",
    "rows": "5"
  },
  "key": "textareafield8"
}

Timepicker

Makes an button for picking the time.

Name	Explanation
label	Text that will give an explanation
step	How large steps the picker makes when choosing minutes
colorType	Color on the button. Uses CSS classes (see table below)

colorType	Color
button-light	White
button-stable	Light gray
button-positive	Dark blue
button-calm	Light blue
button-balanced	Green
button-energized	Yellow
button-assertive	Red
button-royal	Pink
button-dark	Black

{
  "type": "timepicker",
  "templateOptions": {
    "label": "Set time",
    "step": "5",
    "colorType": "button-balanced"
  },
  "key": "timepickerfield11"
}

init-input

Like inline-input, but possible to set fieldInitUrl to initalize the field from an API. It can also set formId or information about tenant, project, form. It will prioritize in the the following way:

1. fieldInitUrl
2. formId
3. tenant
4. project
5. form

Name	Explanation
type	Same types as for input
fieldInitUrl	Url to API for getting init values
formId	true for getting formId
tenant	"name" for tenant name or "id" for tenant id
project	"id" for project id, "number" for project number or "name" for project name
form	"id" for form id, "number" for form number or "name" for form name

// init from an API
{
  "type": "init-input",
  "templateOptions": {
    "type": "number",
    "fieldInitUrl": "{{App.Integration.D4ApiUri}}/INBfieldInit?selskap={{Selskap}}&ansatt={{User}}&register=102"
  },
  "key": "antall"
}

// Get formId
{
  "type": "init-input",
  "templateOptions": {
    "type": "number",
    "formId": true
  },
  "key": "formId"
}

// Get tenantId
{
  "type": "init-input",
  "templateOptions": {
    "type": "number",
    "tenant": "id"
  },
  "key": "tenant"
}

// Get project number
{
  "type": "init-input",
  "templateOptions": {
    "type": "text",
    "project": "number"
  },
  "key": "project"
}

// Get form name
{
  "type": "init-input",
  "templateOptions": {
    "type": "text",
    "form"_ "name"
  },
  "key": "form"
}

Selectable inputs

Select list

Used to make an dropdown menu where the user chooses an element. The element is entered as value (the value that is stored) and name (the value that is shown).

Name	Explanation
label	Text that will give an explanation
csvValues	CSV representation of the elements (where \n is new line).
options	An array with the value-name elements as objects

{
  "type": "select",
  "templateOptions": {
    "label": "Make a choice",
    "csvValues": "stored value 1,Shown value 1\nstored value 2,Shown value 2\nstored value 3,Shown value 3",
    "options": [
      {
        "value": "stored value 1",
        "name": "Shown value 1"
      },
      {
        "value": "stored value 2",
        "name": "Shown value 2"
      },
      {
        "value": "stored value 3",
        "name": "Shown value 3"
      }
    ]
  },
  "key": "selectfield9"
}

Select with history (historyselect)

Like Select list, but gives the last selected value(s) in the top of the dropdown menu.

Name	Explanation
label	Text that will give an explanation
csvValues	CSV representation of the elements (where \n is new line).
options	An array with the value-name elements as objects
historyForm	The FormID of the form the field is in
setLabel	Sets the label to this field

{
  "type": "historyselect",
  "templateOptions": {
    "label": "Choose",
    "csvValues": "1,Test1\n2,Test2\n3,Test3\n4,Test4\n",
    "historyForm": "8656",
    "options": [
      {
        "value": "1",
        "name": "Test1"
      },
      {
        "value": "2",
        "name": "Test2"
      },
      {
        "value": "3",
        "name": "Test3"
      },
      {
        "value": "4",
        "name": "Test4"
      }
    ]
  },
  "key": "historyselectfield0"
}

labelSelect

The same as Select list, but with the setLabel option.

Name	Explanation
label	Text that will give an explanation
csvValues	CSV representation of the elements (where \n is new line).
options	An array with the value-name elements as objects
setLabel	Sets the label to this field

{
  "type": "labelSelect",
  "templateOptions": {
    "label": "Make a choice",
    "csvValues": "stored value 1,Shown value 1\nstored value 2,Shown value 2\nstored value 3,Shown value 3",
    "setLabel": "myChoiceLabel",
    "options": [
      {
        "value": "stored value 1",
        "name": "Shown value 1"
      },
      {
        "value": "stored value 2",
        "name": "Shown value 2"
      },
      {
        "value": "stored value 3",
        "name": "Shown value 3"
      }
    ]
  },
  "key": "myChoice"
}

Checkbox

A checkbox to confirm an choice or show hidden fields. Gives the value true or false.

Name	Explanation
label	Text that will give an explanation

{
  "type": "checkbox",
  "defaultValue": false,
  "templateOptions": {
    "label": "Confirm the day"
  },
  "key": "confirm"
}

Radio button

Used to create an field with buttons where the user can only choose one of them. The buttons is entered as value (the value that is stored) and text (the value that is shown).

Name	Explanation
csvValues	CSV representation of the elements (where \n is new line).
options	An array with the value-text elements as objects

{
  "type": "radio",
  "templateOptions": {
    "csvValues": "1,Yes\n2,No\n3,Maybe",
    "options": [
      {
        "value": "1",
        "text": "Yes"
      },
      {
        "value": "2",
        "text": "No"
      },
      {
        "value": "3",
        "text": "Maybe"
      }
    ]
  },
  "key": "radiofield10"
}

labelRadio

The same as radio, but with setLabel.

Name	Explanation
csvValues	CSV representation of the elements (where \n is new line).
options	An array with the value-text elements as objects
setLabel	Sets the label to this field

{
  "type": "labelRadio",
  "templateOptions": {
    "csvValues": "1,Yes\n2,No\n3,Maybe",
    "setLabel": "myChoiceLabel",
    "options": [
      {
        "value": "1",
        "text": "Yes"
      },
      {
        "value": "2",
        "text": "No"
      },
      {
        "value": "3",
        "text": "Maybe"
      }
    ]
  },
  "key": "myChoice"
}

Rating

Gives the user a row of icons (default: stars), with values 1-5. By double clicking on an icon all will be unselected and the value becomes 0. Icons can be found here (use the "Name" column)

Name	Explanation
label	Text above the icons that explains the rating	Optional
iconOn	The icon that is active/chosen	Optional
iconOff	The icon that is not active/chosen	Optional
iconOnColor	Gives the active icon a color (color name or hex-code)	Optional
iconOffColor	Gives the not active icon a color (color name or hex-code)	Optional

{
  "type": "rating",
  "templateOptions": {
    "label": "Rate this form",
    "iconOff": "ion-sad",
    "iconOn": "ion-happy",
    "iconOnColor": "#0f0",
    "iconOffColor": "black"
  },
  "key": "ratingFood"
}

modalselect (search list)

Searchable list

Used in three ways:

• Local list: options (array[])
• Against an lookup table in Tempus IN (see Lookups): lookupName
• Against an API: lookupUrl

Use valueProp and labelProp for correct key-names.

Name	Explanation
label	Text that shall give an explanation
valueProp	Key of the array element that is stored. May be an array.
labelProp	Key of the array element that is shown. May be an array.
lookupName	Name of lookup table. Makes an lookup against an TempusIN lookup table
lookupUrl	Makes an weblookup against an API IMPORTANT: The API must have SSL/TLS (https)
options	select-array list. Elements that are put directly into the list
fieldInitUrl	Url to procedure for getting init values
watchGroup	Runs lookup to get values when the fields in the watchGroup changes
jsonPath	Path for an given JSON-object. Default: data
setLabel	Sets the label to this field
search	If the search field should be shown. Default: true
multiple	Allow selecting multiple values. Default: false
splitter	Set the splitter between the multiple chosen values (may consist of multiple character). Default: , Note: Can not be a value thats part of the options
propSplitter	Used to separate the values when valueProp and/or labelProp is an array. Defaults to the value of splitter.
valuePropSplitter	To specify a splitter only for valueProp. Defaults to the value of propSplitter.
labelPropSplitter	To specify a splitter only for labelProp. Defaults to the value of propSplitter.
delay	Wait an given delay after last keystroke before calling API. Resets if another keystroke within the delay. Default: 0
headers	Optional object containing headers for the http call. On the form {"key": "value", ...}

### lookup
{
  "type": "modalselect",
  "templateOptions": {
    "label": "Department",
    "lookupName": "department",
    "valueProp": "number",
    "labelProp": "name"
  },
  "key": "Tab3"
}

### API
{
  "type": "modalselect",
  "templateOptions": {
    "label": "Department",
    "lookupUrl": "https://test.no/api/nrnavn?selskap={{companyID}}&ansatt={{employee}}&register=3&aktiv=1&rpt=2&visNrOgNavn=True",
    "valueProp": "Nr",
    "labelProp": "Name"
  },
  "key": "Tab3"
}

### API with watch

{
  "type": "modalselect",
  "templateOptions": {
    "label": "Kindergarten",
    "lookupUrl": "https://www.barnehagefakta.no/api/Location/radius/{{gpspos}}/{{distance}}",
    "valueProp": "nsrId",
    "labelProp": "navn",
    "watchGroup": [
      "model.gpspos"
    ]
  },
  "key": "kindergarten"
}

### Local list
{
  "type": "modalselect",
  "templateOptions": {
    "label": "Department",
    "valueProp": "value",
    "labelProp": "name",
    "options": [
      {
        "value": "3421",
        "name": "Karl Gustav"
      },
      {
        "value": "3453",
        "name": "Bernt Kyrre"
      }]
  },
  "key": "Tab3"
}

lookup

Gets choices from TempusIN lookups (see Lookups). The choices is gotten from lookupName and the given project

Name	Explanation
label	Text that explains the field
lookupName	The name of the table Note: It's important that the table is in the same project as the form
watch	Doesn a new call against the table when the given key changes (Note: remember model.)
setLabel	Sets the label to this field

{
  "type": "lookup",
  "templateOptions": {
    "label": "Choose an employee",
    "lookupName": "employees"
  },
  "key": "lookupfield7"
}

Projects

Creates an select list with available projects for the user. Mainly used in setup-forms.

IMPORTANT: In setup forms this has to have key "Prosjekt".

Name	Explanation
label	Text that shall give an explanation
sortBy	May be set to number for sorting by number or name for sorting by name

{
  "type": "projects",
  "templateOptions": {
    "label": "Chosen project",
    "sortBy": "name"
  },
  "key": "Prosjekt"
}

Other inputs

Signature

Signature field

Name	Explanation
label	Text that shall give an explanation
color	Color on signature

{
  "type": "signature",
  "templateOptions": {
    "label":"Customers signature",
    "color": "blue"
  },
  "key": "approved",
}

Paint

Gives an drawing field. Possible to change pen color, take an picture (to draw on) and set an predefined background image.

Name	Explanation
label	Text that shall give an explanation
photo	Allow to take an photo to draw on
color	Default color on pen
pickcolor	Allow to change color on pen
image	URL to background image
pdf	That the background is an pdf file. Default: false
pdfScale	Used for scaling pdf resolution. Default: 1
useCredentials	To use credentials when getting pdf. Default: false
watchGroup	Update URL to background when some of these fields changes
text	Allow text. Default: false
errorMsg	To set an other error message if the background isn't found
saveFirst	Set this to true to store unedited paint-field. Default: false

{
  "type": "paint",
  "templateOptions": {
    "label": "Draw something nice",
    "photo": true,
    "color": "#000000",
    "pickcolor": true
  },
  "key": "painting"
}

//paint field with pdf-background and watchgroup
{
  "type": "paint",
  "templateOptions": {
    "label": "Drawing",
    "color": "#000000",
    "image": "https://in.tempus.no/file/getfile?no=drawing_{{project}}.pdf",
    "pickcolor": true,
    "pdf": true,
    "pdfScale": "0.5",
    "errorMsg": "Error with paint field: Didn't find pdf!",
    "watchGroup": [
      "model.project"
    ]
  },
  "key": "drawing"
}

drawingSelect

For zooming and panning on an image/pdf and setting the selected area to a paint field. On PC the user can also zoom with ctrl+mousewheel, and on mobile with pinching.

Name	Explanation
label	Text that shall give an explanation.
url	URL to image/pdf
paintFields	An array with names and keys of the paint field(s) the selection can be set to.
watchGroup	Update url when one of these fields changes.
allowPinch	Whether to allow pinch zoom or not. Default true
pdf	true if the source is an pdf. Default false
pageNumber	To set a page in the pdf file. Default 1.
pages	To set an list of pages to choose from. An array with names and numbers.
quality	To set the quality of the pdf. Default 1.0
useCredentials	To use credentials when getting pdf. Default false

{
  //PNG source
  "type": "drawingSelect",
  "templateOptions": {
    "label": "Choose selection",
    "url": "http://webfiler.tempus.no/drawing.PNG",
    "paintFields": [
      {
        "name": "Paint field 1",
        "key": "paintfield1"
      }
    ]
  },
  "key": "drawing"
}

//pdf with pages array
{
  "type": "drawingSelect",
  "templateOptions": {
    "label": "Choose selection",
    "url": "http://webfiler.tempus.no/drawings.pdf",
    "pdf": true,
    "pages": [
      {
        "name": "Basement",
        "number": "1"
      },
      {
        "name": "Ground floor",
        "number": "2"
      },
      {
        "name": "2 floor",
        "number": "3"
      }
    ],
    "paintFields": [
      {
        "name": "Paint field 1",
        "key": "paintfield1"
      }
    ]
  },
  "key": "drawing"
}

photo

Let the user take one (or more) picture(s) that is stored in the form.

Name	Explanation
label	Text that will give an explanation
photolimit	How many pictures the user may take. (default 5, if none is set)
allowGallery	Gives the possibility to choose an picture from gallery. Value true|false.
disableCamera	true|false. Hides the camera button.

{
  "type": "photo",
  "templateOptions": {
    "label": "take picture",
    "photolimit": 4,
    "allowGallery":true
  },
  "key": "photoalbum"
}

barcodescanner

Let the user scan an barcode

multiscan makes an list of elements. after how many you have scanned. If there is need for aditional information, use popupText to get an input field after each scan.

Name	Explanation
label	Text that will give an explanation
multiscan	Will loop through the scan (and popup) untill the user aborts
popupText	Used with multiscan Label of popup with each scan
popupInputType	Used with multiscan Which type the input field should be (mail,text,number,date ...)
autotrigger	Set to true to automatically open the barcodescanner when the form opens

{
  "type": "barcodescanner",
  "templateOptions": {
    "multiscan": true,
    "label": "Scan elements",
    "popupText": "Enter number",
    "popupInputType": "number"
  },
  "key": "barcodescanner"
}

GPS position

Finds your GPS position and put the result in an input.

Name	Explanation
label	Text that will give an explanation
autotrigger	Gets the position as soon as the form opens
splitter	Change the character between lat and lng. Default: ","
watchGroup	An array of fields that should trigger a new position if they are changed

{
  "type": "gpsposition",
  "templateOptions": {
    "label": "My location",
    "autotrigger":true
  },
  "key": "gpspositionfield1"
}

nfc

Puts an eventListener on the NFC reader Activated by clicking on the shown icon. After and scan tagID is filled into an input field and the scanner is deactivated.

Name	Explanation
label	Shown as placeholder text in the field	optional
disabled	If true: The user can't enter anything in the input field	Optional
alwaysOn	If true: The scanner will always be active	Optional
decimal	If true: The result will be in decimal form, else in hex	Optional
minLength	Only when decimal. Will add zeroes to get up the length of the value to the given length	Optional
reverse	Only when decimal. Will reverse the number	Optional

{
  "type": "nfc",
  "templateOptions": {
    "label": "Scan card.",
    "disabled": true
  },
  "key": "nfctag"
}

//Example with decimal
{
  "type": "nfc",
  "templateOptions": {
    "label": "Scan card.",
    "alwaysOn": true,
    "decimal": true,
    "reverse": true,
    "minLength": 10
  },
  "key": "nfctag10"
}

sum

A fields that can make mathematical calculations based on other fields.

Name	Explanation
label	Text before the result. E.g. "Hours left: "
unit	Unit (or other) that is placed behind the result. E.g. "kg", "hours".
calc	Formula for calculation. E.g. model.totalHours - (model.nr1 + model.nr2). För operatorer se tabell nedan
decimal	Max number of decimals (default: 2)
watchGroup	Which fields that should trigger a new calculation if they are changed

Operatorer i fallande prioritet

Operator	Symbol
Exponentiation	^	2^5
Multiplikation	*	5*3
Division	/	6/2
Addition	+	2 + 4
Subtraktion	-	4 - 2

{
  "type": "sum",
  "templateOptions": {
    "unit":"h",
    "label": "Hours left: ",
    "type": "number",
    "decimal": "2",
    "watchGroup": [
      "model.project1",
      "model.project2"
    ],
    "calc": "model.total - (model.project1 + model.project2)"
  },
  "key": "sumhours"
}

timediff

Calculates the time difference between two points in time (date, time, datetime, etc).

Name	Explanation
label	Text before the result, e.g. "Time difference: "
unit	Unit that is placed behind the result. E.g.. "days", "hours".
type	Which unit the result should be in. May be years, months, days, hours(default) or minutes
decimal	Max number of decimals, (default: 2)
watchGroup	The two fields that contains the time points that are used for the calculation

{
  "type": "timediff",
  "templateOptions": {
    "label": "Time difference: ",
    "unit": " minutes",
    "type": "minutes",
    "decimal": "1",
    "watchGroup": [
      "model.datetime1",
      "model.datetime2"
    ]
  },
  "key": "diff"
}

textmerge

Used to combine text from other fields. Can be used in two ways:

• If a template is given, then the template is used to find the fields and combine them according to the template.
• If template isn't given, it will combine the fields in watchGroup with delimiter as a separator.

Name	Explanation
label	Text in front of the result. Ex. "Full name: "
delimiter	Separator characters used between the texts when no template is specified (default: " ")
template	Template used to format the text. Field key is set between double underscores (_). Example: __firstName__
watchGroup	The fields that trigger update. When using delimiter, these fields are merged

//With delimiter
{
  "type": "textmerge",
  "templateOptions": {
    "label": "Full name: ",
    "delimiter": " ",
    "watchGroup": [
      "model.givenName",
      "model.middleName",
      "model.lastName"
    ]
  },
  "key": "fullName"
}

//With template
{
  "type": "textmerge",
  "templateOptions": {
    "template": "Given name: __firstName__, Middle name: __middleName__, Last name: __lastName__",
    "watchGroup": [
      "model.firstName",
      "model.middleName",
      "model.lastName"
    ]
  },
  "key": "fullName"
}  

pdfModal

A field that can open pdfs inside the app. Is shown as button, that when clicked will open the pdf.

Name	Explanation
label	The text shown on the button. May get info from other fields, e.g. {{project}}.
url	The url to the pdf. May get info from other fields, e.g. {{project}}
buttonColor	The color of the button. Given as a css class, see below. Default: button-positive
barColor	The color of header bar in the viewer. Defaults to the color of buttonColor.
watchGroup	Update url and label when one of these fields changes.

buttonColor / barColor	Color
button-light / bar-light	White
button-stable / bar-stable	Light gray
button-positive / bar-positive	Dark blue
button-calm / bar-calm	Light blue
button-balanced / bar-balanced	Green
button-energized / bar-energized	Yellow
button-assertive / bar-assertive	Red
button-royal / bar-royal	Pink
button-dark / bar-dark	Black

{
  "type": "pdfModal",
  "templateOptions": {
    "label": "Drawing for {{project}}:{{area}}",
    "url": "192.168.111.22:8080/file/getfile?no={{project}}_{{area}}.pdf",
    "buttonColor": "button-balanced",
    "watchGroup": [
      "model.project",
      "model.area"
    ]
  },
  "key": "drawing"
}

imageModal

A button that opens an image in fullscreen when clicked.

Name	Explanation
label	The text shown on the button. May get info from other fields, e.g. {{project}}.
src	The url to the iamge. May get info from other fields, e.g. {{project}}.
buttonColor	The color of the button. Given as a css class, see below. Default: button-positive
watchGroup	Update src and label when one of these fields changes.
errorMsg	(Optional) Set custom error message when updating the url from watchGroup fails

buttonColor	Color
button-light	White
button-stable	Light gray
button-positive	Dark blue
button-calm	Light blue
button-balanced	Green
button-energized	Yellow
button-assertive	Red
button-royal	Pink
button-dark	Black

{
  "type": "imageModal",
  "templateOptions": {
    "label": "Open image {{imageNo}}",
    "src": "http://webfiler.tempus.no/imagewatch_bilde_{{imageNo}}.jpg",
    "buttonColor": "button-balanced",
    "watchGroup": [
      "model.imageNo"
    ]
  },
  "key": "modal"
}

itemlist

Makes an list of elements with name and value. For each element it's looped through to popups: one for item and one for value.

Name	Explanation
label	Text to give an explanation.
itemText	Header on first popup box.
itemInputType	What type of input on item (mail, text, number, date ...)
valueText	Header on the second popup box.
valueInputType	What type of input on value (mail, text, number, date ...)

{
  "type": "itemlist",
  "templateOptions": {
    "label": "Enter elements to the order",
    "itemText": "Name of product",
    "itemInputType": "text",
    "valueText": "Number",
    "valueInputType": "number"
  },
  "key": "manualinput"
}

valuelist

A button, when clicked, that collects and combines data from other fields. The data is stored as a long text with a delimiter between each field (default: |) and each row (default: ;). User will see a table of the data and have the possibility to remove rows.

Name	Explanation
label	Text to give an explanation.
buttonColor	CSS class to put the color on the button. See button for the colors.
keys	Array-json-list with Keys to retrieve data from.
clearKeys	Which fields should be reset
splitRow	The character each row is split by.
splitValue	The character between each key value
goUp	If true, go to the top of the form. Useful if the form is to be re-entered after the entered values.
json	If true: Save result in JSON format, instead of a text string with splitters

{
  "type": "valuelist",
  "templateOptions": {
    "label": "Add values",
    "splitValue": ";",
    "splitRow": "|",
    "goUp":true,
    "keys": [
      {
        "key": "customer",
        "label": "Customer",
        "required": true
      },
      {
        "key": "car",
        "label": "Car"
      }
    ],
    "buttonColor": "button-balanced",
    "clearKeys": "customer,car"
  },
  "key": "values"
}

API-fields

Fields for getting/sending information to other sources.

button

Makes an button that delivers the form as well as sending data to an API.

Function for button	Explanation
post	Delivers the form, sends data to an API and then exits the form
get	Sends in data and gets an response. Used together with servermessage in editor
reg	Sends data to API and Tempus IN, but stays in the form. Gives an popup as response. The text can be changed by using the variable oneDoneMsg
tmp	Temporary storage. Sends in the form, but doesn't register it as delivered. The user gets the same values the next time he opens the form
mod	No API. Used to clear/set values in the form with clearKeys, setKeys, etc.
getVars	Get values from an API and sets them to fields in the form

Variables	buttonFunction	Explanation
label	All	Text on the button
colorType	All	The color of the button. Uses CSS classes (see table below)
buttonFunction	All	The function of the button (see table above)
url	post, get, reg, getVars	Where the data is sent or retrieved from. May use data from the form by using the key (inside double braces) of the field to get the data: ..?value={{key}} IMPORTANT: The API must have SSL/TLS (https)
clearKeys	reg, mod	Removes data in the given keys. Use , to split the keys, e.g. clearKeys="tab2,tab3"
setKeys	reg, mod	Set an value in the the given keys. As an json-object: {key:value,key2:value}
thenButton	reg, mod	When 200 OK, it clicks on a given key(button)
thenMessage	reg, mod	When 200 OK, the given message is shown in an popup
onDoneMsg	reg	Confirmation text when 200 OK from server. Default text is Succesful. Use onDoneMsg="" if popup shouldn't be used
autotrigger	All	Automatically clicks the button when the form is opened
focusKey	mod	Sets focus on an field when the button is clicked
exitOnDone	reg	Set this to true to exit after registration is done. Default is false Note: This is only for reg, post will always exit
showMsg	reg	When 200 OK it shows an message (msg), after a optional delay, for an duration (both in milli seconds). On the form {"msg": "blah blah blah", "duration": 2000, "delay": 500} msg is required, duration defaults to 1000 and delay defaults to 0
confirmTitle confirmMsg	All	For asking for confirmation in an popup from the user before the button is activated. Title of the popup in confirmTitle and message in confirmMsg
jsonPath	getVars	Path to where the result is in the returned object
variableMap	getVars	Mapping between key-names in the form and the returned object. On the form {"form-key": "object-key", ...}
excludeVariables	getVars	Used when the return object has the same keys as the form (and variableMap isn't set). Will not set those keys that are in this array. On the form ["key1", "key2, "key3"]
watchGroup	All	Will click the button when one of these fields changes Note: If buttonFunction is mod it will get setKeys and clearKeys from the watched field if it's present
clickedColor	All	A new color for the button when it's clicked the first time. See table below
clickedLabel	All	A new label for the button when it's clicked the first time

colorType	Color
button-light	White
button-stable	Light gray
button-positive	Dark blue
button-calm	Light blue
button-balanced	Green
button-energized	Yellow
button-assertive	Red
button-royal	Pink
button-dark	Black

//Post
{
  "type": "button",
  "templateOptions": {
    "label": "Log in",
    "colorType": "button-positiv",
    "buttonFunction": "post",
    "url": "https://test.no/api/postReg?ansatt={{employeeNr}}&starttid={{startTime}}&type=2&dato={{date}}",
  },
  "key": "stampIn"
}

//Reg
{
  "type": "button",
  "templateOptions": {
    "label": "Send registration",
    "colorType": "button-calm",
    "buttonFunction": "reg",
    "clearKeys":"startTime,date",
    "setKeys":{"showResult":"1","Comment":"Once upon a time!"},
    "onDoneMsg":"Data stored!",
    "thenButton":"getReport",
    "url": "https://test.no/api/regData?ansatt={{employeeNr}}&starttid={{startTime}}&type=1&dato={{date}}"
  },
  "key": "stampReg"
}

//Temporary stoarage and post (without api, only normal delivery)
{
  "className":"floatLeft width50",
  "type": "button",
  "templateOptions": {
    "label": "Temp store",
    "colorType": "button-calm",
    "buttonFunction": "tmp"
  },
  "key": "btnSaveLocal"
},
{
  "className":"floatLeft width50",
  "type": "button",
  "templateOptions": {
    "label": "Deliver",
    "colorType": "button-positive",
    "buttonFunction": "post"
  },
  "key": "btnDeliver"
}

//Mod button with focusKey, clearKeys and watchGroup
{
  "type": "button",
  "templateOptions": {
    "label": "Clear",
    "colorType": "button-positive",
    "buttonFunction": "mod",
    "clearKeys": "inputfield0",
    "focusKey": "inputfield3",
    "watchGroup": [
      "model.test"
    ]
  },
  "key": "buttonfield1"
}

servermessage

Combined with button to show data got with get. E.g. report. Dat is shown as markdown/html/text

Note. No variables to change

{
  "type": "servermessage",
  "templateOptions": {
  },
  "key": "servermessage"
}

webLookup

Gets values from an API that can be selected. Values to the API is sent in lookupURL.

Name	Explanation
label	Text that explains the field
lookupUrl	Url to the API (with data) IMPORTANT: The API must have SSL/TLS (https)
valueProp	Array-key on the element that is stored. May be an array.
labelProp	Array-key på on the element that is stored. May be an array.
watchGroup	Runs lookup to get values when the fields in the watchGroup changes (remember model.). Note that watch is still supported.
fieldInitUrl	Url to procedure for setting init values
jsonPath	Path to the given json object. Default: data
setLabel	Sets the label to this field
splitter	Set the splitter the values when labelProp and/or valueProp is an array. Default: ,
valueSplit	To specify a splitter only for valueProp. Defaults to the value of splitter.
labelSplit	To specify a splitter only for labelProp. Defaults to the value of splitter.
delay	Wait an given delay after last keystroke before calling API. Resets if another keystroke within the delay. Default: 0
headers	Optional object containing headers for the http call. On the form {"key": "value", ...}

{
  "type": "webLookup",
  "templateOptions": {
    "label": "Get employee",
    "lookupUrl": "tempus.no/api/ansatt?regsiter=1&logon={{employeeNr}}",
    "valueProp": "Nr",
    "labelProp": "Name",
    "watchGroup": [
      "model.employeeNr"
    ]
  },
  "key": "webLookupfield8"
}

infoLookup

Makes an lookup against an API. The field is only for giving information.

Name	Explanation
label	Text that explains the field
lookupUrl	URL to the API IMPORTANT: The API must have SSL/TLS (https)
labelProp	Key name on the response from the API. May be an array for reading in several elements from the same object
watchGroup	Runs lookup to get values when the fields in the watchGroup changes (remember model.). Note that watch is still supported.
notFoundLabel	Text that is shown if it doesn't find anything
template	Markdown template. Where keys (__key__) in the template is exchanged with the same key in the object returned from the API
jsonPath	Path to the given json object. Default: data
valueProp	Key name of the property to be used as value. May be an array
delay	Wait an given delay after last keystroke before calling API. Resets if another keystroke within the delay. Default: 0
headers	Optional object containing headers for the http call. On the form {"key": "value", ...}

{
  "type": "infoLookup",
  "templateOptions": {
    "label": "Status",
    "lookupUrl": "tempus.no/api/userStatus?user={{userNr}}",
    "labelProp": "info",
    "watchGroup": [
      "model.userNr"
    ],
    "notFoundLabel":"Unknown status"
  },
  "key": "infoLookupfield5"
}

//API outside Tempus. Show several elements (`labelProp`) from the same object (`jsonPath`)
{
  "type": "infoLookup",
  "templateOptions": {
    "label": "Company status",
    "lookupUrl": "https://data.brreg.no/enhetsregisteret/enhet.json?page=0&size=1&$filter=startswith(navn,'{{orgName}}')",
    "jsonPath":"data.data.0",
    "labelProp": [{"label":"Name","key":"navn"},{"label":"Bankrupt","key":"konkurs"},{"label":"Industry code","key":"naeringskode1.beskrivelse"}],
    "watchGroup": [
      "model.loadData"
    ],
    "notFoundLabel":"Did not find data"
  },
  "key": "infoLookupfield5"
}

//API outside Tempus. Using template
{
  "type": "infoLookup",
  "templateOptions": {
    "label": "Company status",
    "lookupUrl": "https://data.brreg.no/enhetsregisteret/enhet.json?page=0&size=1&$filter=startswith(navn,'{{orgNavn}}')",
    "jsonPath":"data.data.0",
    "template": "### __navn__\n |Field|Data|\n|----|----|\n|OrgNr.|__orgnr__|\n|Bankrupt|__konkurs__|\n|Industry code|__naeringskode1.beskrivelse__|",
    "watchGroup": [
      "model.loadData"
    ],
    "notFoundLabel":"Did not find data"
  },
  "key": "infoLookupfield5"
}

serverQueryModal (SearchLookup)

Does an direct search against server. Gets names of earlier stored values from server.

Name	Explanation
label	Text that shall give an explanation
ValueProp	ID of the value that is stored
LabelProp	ID of the value that is shown
lookupUrl	URL to the API IMPORTANT: The API must have SSL/TLS (https)
selectItemsLabel	Title of the list of hits on the search that can be chosen
selectedItemsLabel	Title of the list of chosen elements
nrLabel	The label of number. When it's multi choice: # + nrlabel (e.g. 3 pieces)
queryMinLength	Antall tegn på må skriver før den søker.
queryMinLengthLabel	Number of characters the user must enter before it searches
placeholder	Gives the user an explanation of how many characters that is neeeded

{
  "type": "serverQueryModal",
  "templateOptions": {
    "label": "My employees",
    "lookupUrl": "https://tempus.no/Tempusin/api/nrnavn?register=1&logonNr={{employeeNr}}",
    "valueProp": "Nr",
    "labelProp": "Name",
    "selectItemsLabel": "Choose an employee",
    "selectedItemsLabel": "Chosen employees",
    "nrLabel": "",
    "queryMinLength": "3",
    "queryMinLengthLabel": "Must have atleast 3 character",
    "placeholder": "Search for nr or name"
  },
  "key": "myEmployees"
}

Table

Creates an table with headers for an list of values.

Name	Explanation
label	Text that shall give an explanation
lookupUrl	URL to the API IMPORTANT: The API must have SSL/TLS (https)
jsonPath	Path to the given json object. Default: data
watchGroup	Runs lookup to get values when the fields in the watchGroup changes (remember model.)
header	An list of the columns that should be included.
header.label	The name that will be shown as the header for the column
header.key	Key name for the value in the json-object
header.sum	If the values in the column should be summed

{
  "type": "table",
  "templateOptions": {
    "label": "Vitir",
    "lookupUrl": "https://tempusin-vitir-functions.azurewebsites.net/api/get_radon_data?code=WdIafLSDoBdX55M4e/ZcgsAvs5OZPMOpWaY1EAO27XQ0V2NWlcFFaQ==&amount={{amount}}",
    "watchGroup": [
      "model.amount"
    ],
    "header": [
      {
        "label": "Date",
        "key": "date",
        "sum": false
      },
      {
        "label": "Temperature",
        "key": "temperature",
        "sum": false
      },
      {
        "label": "Humidity",
        "key": "humidity",
        "sum": false
      }
    ]
  },
  "key": "vitirtable"
}

Stream

Streams data from server side events. Contiunously updates the form with data when new data arrives in the stream.

Name	Explanation
template	Markdown template for presenting the data. Will exchange __key__ with values from the data
streamUrl	Url to the stream for getting data continously IMPORTANT: The API must have SSL/TLS (https)
streamPath	Path to the values in the data from the stream
initUrl	Optional url for setting initial values from an normal API IMPORTANT: The API must have SSL/TLS (https)
initPath	Path to the values in the data from the init API
timeout	How long (in milliseconds) before the stream timeouts and restarts. Default: 45000
apiKey	When using basic authorization, the key/user for the API's
apiSecret	When using basic authorization, the secret/password for the API's
headers	Can set optional headers. Only when not using apiKey/apiSecret

{
  "type": "stream",
  "templateOptions": {
    "streamUrl": "https://api.disruptive-technologies.com/v2/projects/********/devices/********:stream?event_types=temperature",
    "initUrl": "https://api.disruptive-technologies.com/v2/projects/******/devices/**********",
    "apiKey": "*****",
    "apiSecret": "*****",
    "template": "#### Dev office\n\n**Temperature:** __value__\n\n**Time**: __updateTime__",
    "streamPath": "result.event.data.temperature",
    "initPath": "data.reported.temperature",
    "timeout": 900000
  },
  "key": "sensor1"
}

Other fields

Step

Divides the form into smaller parts. It adds an "Next step"-button and a drop down list for navigation.

Name	Explanation
label	The text shown in the "Next step"-button
colorType	The color of the button. See table below for possible values. Default: button-positive (dark blue)

colorType	Color
button-light	White
button-stable	Light gray
button-positive	Dark blue
button-calm	Light blue
button-balanced	Green
button-energized	Yellow
button-assertive	Red
button-royal	Pink
button-dark	Black

{
  "type": "step",
  "templateOptions": {
    "label": "2/3 Validation"
  },
  "key": "step1"
}

openForm

Can open a different form in the app based on formId. Can have a specified formId set or can get the formId form another field using watchGroup. May also fill in data in the other form using formData.

Name	Explanation
label	The text shown on the button
colorType	The color of the button. See table below for possible values
formId	The id of the form to go to when not using watchGroup
watchGroup	Field(s) to get formId/formData from or updating url
url	URL to API for getting formId/formData
json	Set to true if the data in the watched fields is in JSON format
formIdProp	If JSON or url: Key for the formId in the data. Default: formId
formData	If JSON or url: Key for optional formData in the data. Default: formData
path	If JSON or url: Set optional path if formId/formData is in an sub-object of the data
autotrigger	Set to true if the button should be automatically clicked when a formId is found
sendKeys	Optional list of keys to values (fields in the form) to send data from to the form that's being opend. On the format "key1,key2,key3"

colorType	Color
button-light	White
button-stable	Light gray
button-positive	Dark blue
button-calm	Light blue
button-balanced	Green
button-energized	Yellow
button-assertive	Red
button-royal	Pink
button-dark	Black

// Get data from an field
{
  "type": "openForm",
  "templateOptions": {
    "label": "Go to form",
    "colorType": "button-balanced",
    "autotrigger": true,
    "json": true,
    "sendKeys": "name,age",
    "watchGroup": [
      "model.qr"
    ]
  },
  "key": "open"
}

// Get data from API
{
  "type": "openForm",
  "templateOptions": {
    "label": "Go to form",
    "colorType": "button-balanced",
    "formId": "1234",
    "url": "https://test.api.com/{{project}}",
    "path": "data.result",
    "formDataProp": "0",
    "watchGroup": [
      "model.project"
    ]
  },
  "key": "open"
}

Admin Verify Checkbox

Shows only in the admin results page. The admin may check each row in the result page on the website.

{
  "type": "adm_verify",
  "key": "verified"
}

(This documentation page was last updated on 01.08.2019)