Apex Code Development You need to sign in to do that
Don't have an account?
richard lloyd 9 how to use CSS tags in Flow Builder
Hi There,
I'm having trouble getting CSS tags to work in a screen flow. I've got the Flow itself to work (dispalying 3 fields from all Opportunities associated with an Account) but the formatting displays like this on the screen element, (i.e. it is not picking up the CSS tags):
Any help would be greatly appreciated.
I'm having trouble getting CSS tags to work in a screen flow. I've got the Flow itself to work (dispalying 3 fields from all Opportunities associated with an Account) but the formatting displays like this on the screen element, (i.e. it is not picking up the CSS tags):
<style>
table, th, td {
border: 1px solid black;
}
</style>
<table>
<tr>
<th>Opp name</th>
<th>Stage</th>
<th>Type</th>
</tr>
<tr>
<td>Test Opp 2</td><td>Test Opp 2</td><td>Existing Customer - Upgrade</td>
</tr>
<tr>
<td>Test Opp 1</td><td>Test Opp 1</td><td>Existing Customer - Replacement</td>
</tr>
<tr>
<td>Dickenson Mobile Generators</td><td>Dickenson Mobile Generators</td><td>New Customer</td>
</tr>
</table>
Any help would be greatly appreciated.
Greetings to you!
You cannot use CSS in Flows. You can create a custom Lightning Component that launches your Flow with screens using the global lightning:flow component and then you can use the CSS in lightning component.
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_using_flow_cmp.htm
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_css.htm
I hope it helps you.
Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.
Thanks and Regards,
Khan Anas
All Answers
Greetings to you!
You cannot use CSS in Flows. You can create a custom Lightning Component that launches your Flow with screens using the global lightning:flow component and then you can use the CSS in lightning component.
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_using_flow_cmp.htm
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_css.htm
I hope it helps you.
Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.
Thanks and Regards,
Khan Anas
I was able to get CSS working in flows without making anything custom.
Using a "Text Template" resource you can set it to "View as Plain Text" when editing it's value manually. Here you can use html and inline css with the "style" attribute.
Then for the screen element, use a "Display Text" and tell it to display your Text Template variable.
All done!
However, if you want to make it a little easier to maintain and reuse your css within the flow. Make a "Constant" variable for your css and use it as a merge field in your Text Template.
Example: Constant - Type = text, Name = "css_headers", Value = font-weight: bold; color: rgb(3, 45, 96);
Then in the text template you can:
<div style="{!css_headers}">Something</div>This way you can use the same styling in multiple areas and still have a single place to update it.Also, "TextTemplate" cannot be modified with an "Assignment" element, so if you want to dynamically construct your "html" you will have to use a regular "Text" variable to craft it, then reference your text variable in your TextTemplate.
Side note: There are limitations and Salesforce will remove some html tags and css attributes. I believe the same rules as Rich Text fields apply; which can be found in their documentation.