BUI Component Example

named-insured.bui

{
  "id": "named-insured",
  "index": 0,
  "status": "incomplete",
  "graphql": {
    "raw": "... raw graphql persist query ...",
    "values": {
      "/entity/quote_id": "1B1C579D-D6A6-4619-A726-B23911C765EF",
      "/quote_id": "171D54A0-9C2A-42D4-AE6E-F55292F652A7"
    }
  },
  "properties": {
    "title": "Perfect.",
    "subtitle": "Who’s the primary driver on this policy?",
    "info": {
      "type": "message",
      "message": "Don’t worry, you can add more drivers later."
    }
  },
  "fields": [
    {
      "key": "/",
      "value": null,
      "component_type": "fieldset",
      "properties": {
        "rows": [
          [
            {
              "key": "/entity/first_name",
              "value": "Tyler",
              "component_type": "input",
              "properties": {
                "label": "First name"
              }
            },
            {
              "key": "/entity/last_name",
              "value": "Stillwater",
              "component_type": "input",
              "properties": {
                "label": "Last name"
              }
            }
          ],
          [
            {
              "key": "/entity/birthdate",
              "value": null,
              "component_type": "date",
              "properties": {
                "label": "Date of Birth"
              }
            }
          ],
          [
            {
              "key": "/entity/email",
              "value": null,
              "component_type": "email",
              "properties": {
                "label": "Email"
              }
            }
          ],
          [
            {
              "key": "/entity/phone",
              "value": null,
              "component_type": "phone",
              "properties": {
                "label": "Phone"
              }
            }
          ]
        ]
      }
    }
  ]
}

• key is a jsonpath that indicates where the value should be stored in the persist payload
• value is the current value that should be displayed in the element, or null if there is no value
• component_type defines the component type. For example, input for text input, or email for a first-class input that knows how to validate an email address
• graphql.values is a hash of values that should be merged into the persist body. allows for backend to pass state through.