JS customization of additional attributes

Using additional and custom attributes with JS

To access additional and custom attributes in JS, the JS method getAdditionalAttributes() is provided. To use the method in a CustomLayout or CustomProductPage, call this.getAdditionalAttributes() to retrieve both additional and custom attributes.

Example
The mTAN authentication step page (path: '/auth/flow/{{FLOW}}/mtan') returns an additional attribute {“resendPossible”: true} and has a custom attribute configured with {customAttributes.myKey: “my value”}. See below for an example JSON structure:

{
      "nextAuthStep": "MTAN_OTP_REQUIRED",
      "phoneNumber": "+41789071171",
      "resendPossible": true,
      "customAttributes": {
        "myKey": "my value"
      }
 }

In this situation, the following JS methods can be used:

  • this.getAdditionalAttributes()
    Will return all additional and all custom attributes
  • this.getAdditionalAttributes().get(“customAttributes”)
    Will return all custom attributes
  • this.getAdditionalAttributes().get(“resendPossible”)
    Will return true
  • this.getAdditionalAttributes().get(“customAttributes”).myKey
    Will return “my value”

Formatting additional attributes with JS

To allow customized formatting of additional attributes, the following function will be called for every additional attribute that is available on a page:

iam.api.additionalAttributes.format(attributeName, attributeValue) => any

This function provides the additional attribute name and value. The value can be modified by the function and returned.

For additional attributes of type object, the entire object is passed to the function and can be processed and returned.

// Example phoneNumber
iam.api.additionalAttributes.format = (attributeName, attributeValue) => {
    if (attributeName === 'phoneNumber') {
        return formatPhoneNumber(attributeValue); // formatPhoneNumber is a custom function implemented by the customer
    }
    return attributeValue;
}

// Example with objects
iam.api.additionalAttributes.format = (attributeName, attributeValue) => {
    if (attributeName === 'consent') {
        attributValue.clientName = attributeValue.clientName.toUpperCase(); // "clientName" property from "consent" object has been modified
        return attributValue;
    }
    return attributeValue;
}

To provide translated values in JS, use the following function to determine the current language:

iam.api.language.current() // returns the current language, e.g. 'en' - available locales are defined by the language setting in the Loginapp

The function call happens before translations are applied so that the modified values are used in the translations.