17.3.2.4.1.1. Customizations using flow ID and step ID

The REST UI adds important meta information to the body tag, in particular the flow ID using attribute data-iam-flow-id and the step ID using data-iam-step-id. This information can be used in CSS. For example, to change the color of the header depending on flow ID and step ID, one can use it in _custom-styles.scss :

// Changing color when flow ID equals 'demo'
[data-iam-flow-id='demo'] {
.iam-card-header {
background-color: red;
}
}
// Changing color when step ID equals 'example'
[data-iam-step-id='example'] {
.iam-card-header {
background-color: green;
}
}
// Changing color when flow ID equals 'demo' and step ID equals 'example'
[data-iam-flow-id='demo'][data-iam-step-id='example'] {
.iam-card-header {
background-color: blue;
}
}

For more information on how to add flow ID and step ID to the SDK's navigation menu, see 17.3.2.3.1.1. SDK navigation menu configuration.