Additional and custom attributes

To style additional and custom attributes in the Loginapp Design Kit, sample data is required. The Design Kit configuration supports adding an additionalAttributes block for every page. Custom attributes can be included in the additionalAttributes block.

The following example demonstrates how to provide the mTAN Token Registration Step in the authentication flow with sample data:

pages: [
 ...
 {
     path: '/auth/flow/{{FLOW}}/mtan/registration/verification/otp',
     additionalAttributes: {
         resendPossible: true,
         phoneNumber: '+41791234567',
         customAttributes: {
              myKey: "my value"
          }  
     },
     pageSettings: {
         ...
     }
 },
 ...
] 

Adding attributes in the Design Kit only works with attributes available on a particular page at the runtime of Airlock IAM.

Adding custom attributes to the additionalAttributes block will require additional customization of the page for the data to be processed or displayed.

Sample data added to an additionalAttributes block is only available in the Design Kit and is not part of the styling information deployed on an Airlock IAM.

Additional and custom attributes can be used in all UI elements that display texts and support translations.

The placeholder property in HTML shows some limitations as it does not accept HTML by the definition of the HTML standard. The problem only manifests itself if special characters are used in the values of the additional attributes. The Loginapp Design Kit transforms special characters into HTML entities. Since placeholders do not accept HTML, those HTML entities are rendered in their “escaped” format and are therefore not displayed correctly.