Attribute_form Widget

The attribute_form widget provides a form element for attributes depending on metadata. The metadata are either derived from attributes or through metadata overwrite in layout.

This widget is only configured through layout and its sub elements.

"layout" : [ {
  "condition" : "data",
  "layout" : [ {
    "id" : "address",
    "layout" : [ {
      "attribute" : "first_name",
      "meta" : {
        "maxLength" : 50
      },
      "width" : 6
    }, {
      "attribute" : "last_name",
      "meta" : {
        "maxLength" : 50,
        "required" : true
      },
      "width" : 6
    }
  } ]
} ],
"widgets" : {
  "address" : {
    "type" : "attribute_form"
  }
}

With the customization, it's also possible to override the metadata of attributes to:

This table lists the options of overriding meta data.

label Metadata can be adjusted to show different localized text as coming from the Salesforce B2C Commerce platform metadata  
required If an attribute is required in a form this can be marked accordingly for mark in the UI as well as verify it
{
  "attribute": "payment_card.holder",
  "meta": {
    "required": true
  }
}
disabled A form element can be disabled for read only purposes with disabled
{
  "attribute": "customer_no",
  "meta": {
    "disabled": true
  }
}
type & format The format attribute lets you override the default display, for example, to show a string in a textbox only. ("format": "text")

The format requires an explicit type declaration.

Currently supported are:

  • string
    • text
    • password
    • email
    • html
    • null
    • date
    • date-time
    • time
  • number
    • int32
    • int64
    • float
    • double
    • byte
    • null
  • integer
    • int32
    • int64
    • byte
    • null
{
  "attribute": "note",
  "meta": {
    "type" : "string",
    "format": "text",
    ...
  }
}
maxLength The maximum length of an attribute can be restricted with maxLength
{
  "attribute": "postal_code",
  "meta": {
    "maxLength": 5
  }
}
enum The configuration of a attribute_form widget also allows to override enumeration values to either limit enum values in a certain drop down based on conditions or localize values differently.

The current example would lead to a drop down with three items (Price Match, Appeasement, Other) regardless the amount of items declared in the meta data. The condition make sure that this enum is active for product level only.

For enums each enum element has a separate label attribute incl. localization.

{
  "attribute": "reason_code",
  "condition": "data.level === 'product'",
  "meta": {
    "enum": [
      {
        "code": "PRICE_MATCH",
        "label": {
          "default": "Price match",
          "de": "Preisänderung"
        }
      },
      {
        "code": "Appeasement",
        "label": {
          "default": "Appeasement"
        }
      },
      {
        "code": "Other"
      }
    ],
    "required": true
  },
  "width": 6
}
regex The attribute form widget actually recognized regex configured in the meta data. If those values should be more CSC specific they can be overwritten.
{
  "attribute": "postal_code",
  "meta": {
    "required": true,            
    "maxLength": 5,
    "pattern":"^[0-9]{5}$"
  }
}
dynamic_enum Dynamic_enum allows to refer to a particular property which contain the allowed values for a certain attribute. Those values could be determined during the request processing.
{
  "attribute": "c_shipping_schedule",
  "meta": {
    "type": "string",
    "format": "date",
    "dynamic_enum": {
      "code_property": "c_shipping_schedule_selection_codes",
      "label_property": "c_shipping_schedule_selection_labels"
    }
  }
}

For example, To avoid errors when entering the state code, the state code values should be provided as a selection for the US. For Canada and France, a simple input field is shown:

{
  "layout" : [
    {
      "layout": [
        {
          "id": "address",
          "layout": [
            {
            ... more attributes ...
            },
            {
              "attribute": "state_code",
              "condition": "data.country_code === 'FR' || data.country_code === 'CA'",
              "width": 6
            },
            {
              "attribute": "state_code",
              "condition": "data.country_code === 'US'",
              "meta": {
                 "required": true,             
                 "enum": [
                   {"code":"AL", "label":{"default":"AL-Alabama"}},
                   {"code":"AK", "label":{"default":"AK-Alaska"}},
                   ... more states ...
                 ]
              },
              "width": 6
            }
          ]
        }
      ]
    }
  ],
  "widgets" : {
    "address" : {
      "type" : "attribute_form"
    }
  }
}