Draw a Line Flow Screen Component
Created by Eric Smith
This Post was most recently updated on: 4/14/23
Current Version: 1.0
The Draw a Line Lightning Web Component is included in the Flow Screen Components Base Pack and can be used in place of the older horizontalRuleFSC Aura component.
The component can be added to flow screens with the Flow Builder and it can be added to Record, App and Home Pages with the Lightning App Builder.
The advantages to using this component are that it doesn’t require a separate installation and it provides a Custom Property Editor when configuring it for use on a flow screen.
With the custom property editor you can select your top and bottom margins, line thickness and line color. A sample line with the selected attributes will be displayed in the property editor and it will update in sync with your selections.
Attributes (For Lightning Record Page, App Page and Home Page)
| Attribute | Type | Notes |
| INPUT | ||
| Top Margin | Picklist | Size selection for the top margin (Default = none) Available Values: none,xxx-small,xx-small,x-small,small,medium,large,x-large,xx-large |
| Bottom Margin | Picklist | Size selection for the bottom margin (Default = large) Available Values: none,xxx-small,xx-small,x-small,small,medium,large,x-large,xx-large |
| Line Thickness | String | Number of pixels for the line thickness (Default = 1) |
| Line Color | String | Color code for the line (Default = Gray) This attribute supports both HTML standard color names as well as hex format color definitions (#808080) |
| Display as vCard? | Boolean | Set to True for the line to display on a white background or False to show the page background (Default = true) |
| OUTPUT | ||
| There are no output attributes for this component |
Notes
- Because of the way other Salesforce components define their own margins, the default values for Top and Bottom Margins will position the line evenly between the components above and below it.
Installation
This component is part of the FlowScreenComponentsBasePack v3.1.0 or later
Release Notes
4/14/23 – Eric Smith – v1.0.0
Initial Release