Salesforce B2C Commerce 24.7 > Customer Service Center > Customer Service Center UI Customization > Widgets

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.

The attribute_form 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:

Provide or restrict options of values, for example, the state codes for certain countries
Change the type, format or constraints of attributes, for example, the format of the credit card expiration month or the maximum input length
Mark an attribute as required

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, it can be marked accordingly for mark in the UI and 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 allows the override of enumeration values to either limit enum values in a certain dropdown based on conditions or localize values differently. The current example would lead to a dropdown with three items (Price Match, Appeasement, Other) regardless the number of items declared in the meta data. The condition makes sure that this enum is active for product level only. Each enum element has a separate label attribute including 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 recognized regex configured in the meta data. The values can be overwritten if they are more specific to CSC.	`{ "attribute": "postal_code", "meta": { "required": true, "maxLength": 5, "pattern":"^[0-9]{5}$" } }`
dynamic_enum	Dynamic_enum refers to a particular property which contains 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 are 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"
    }
  }
}