Overview
This article explains how to include a dynamic value in CSS in Forms for Actions.
There are some use cases where a dynamic value is needed in CSS. For example:
- The branding/theme must be changed depending on the Client ID.
- Some language-specific contents (e.g., a country logo) must be displayed based on the language.
Applies To
- Forms for Actions
Solution
Inject a variable when rendering a Form and use the variable in the HTML component.
Example Post Login Action:
exports.onExecutePostLogin = async (event, api) => {
let bgColor = "red"
if (event.client.client_id === "xxx") {
bgColor = "blue"
}
api.prompt.render("yyy", {
vars: {
bgColor
}
})
}
Example HTML component:
Output:
