Item forms

To create or edit an item in Alloy, a user must fill out an item form.

Alloy lets you create one or more custom item forms for a design/interface. This powerful feature gives you full control over the form layout, the order and visibility of attributes, and the controls used for input.

For more information, see:

• Item forms in the Alloy Web guide

• the ItemForm endpoints on Swagger and ReDoc

Example JavaScript

This example creates a simple item form containing two attribute controls: a Checkbox and a Text input.

It demonstrates how an item form expression can be used to set the Read Only property of the Text input control dynamically, according to the state of the Checkbox control.

When a user fills in the item form, they must check the Faulty? checkbox before they can input a Fault Description.

// load a http request library
const axios = require("axios");

// enter your api key here!
const apiKey = "7d781836-f04d-4f44-b68f-38319233d645";

axios({
  method: "POST",
  url: `https://api.uk.alloyapp.io/api/item-form`,
  headers: { Authorization: `Bearer ${apiKey}` },
  data: {
    "name": "My Item Form",
    "dodiCode": "designs_myExample",
    "controls": [
      // the first control is a checkbox type
      {
        "id": "c1",
        "typeCode": "itemFormControls_checkbox",
        "attributeCode": "attributes_faulty",
        "properties": {
          "defaultValue": {
            "type": "Value",
            "value": false
          },
          "readonly": {
            "type": "Value",
            "value": false
          },
          "required": {
            "type": "Value",
            "value": false
          }
        }
      },
      // the second control is a text input type
      {
      "id": "c2",
      "typeCode": "itemFormControls_textInput",
      "attributeCode": "attributes_faultyDescription",
      "properties": {
        // this readonly property is determined by the "e1" expression
        // this means it will be bound to changes published from that expression's final node
        // the expression itself is defined further down
        "readonly": {
          "type": "Expression",
          "expressionId": "e1",
          "finalNodeId": "n2"
        },
        "required": {
          "type": "Value",
          "value": false
        }
      }
    }],
    "tags": [
      // this tag means the item form will only apply to Web platforms
      "WEB/*/*"
    ],
    "actions": [
      "Create"
    ],
    "expressions": [
      // this expression takes the checkbox's value and publishes it as a final node result
      // the text input control above can then use that to dynamically set its readonly state
      {
        "id": "e1",
        "name": "My Expression",
        "nodes": [
          // the first node gets a value from the global state that represents the checkbox's value
          {
            "id": "n1",
            "type": "GlobalBoolean",
            "properties": {
              // c1 - the checkbox control's id
              // value - the property on the control we want to monitor
              "key": "c1:value"
            }
          },
          // the second node creates a new final output to be stored in the global state
          // it takes its input from the "n1" node above
          {
            "id": "n2",
            "type": "FinalBoolean",
            "properties": {
              "input": "n1"
            }
          }
        ]
      }
    ]
  })
  .catch((error) => {
    // output any error data to the console
    console.log(error.response.data);
  });