Additional attributes in the Loginapp Design Kit

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

The following example demonstrates, how the mTAN Token Registration Step in the authentication flow can be provided with sample data:

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

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

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

Additional 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, by definition of the HTML standard, not accept HTML. 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.