You are here:
SLDS Header Lightning Web Component ReadMe (Managed Package)
For the managed package runtime, this page contains the SLDS Header LWC ReadMe for each Vlocity release.
This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see Omnistudio Help.
Vlocity Insurance and Health Summer '20
The SldsHeader Lightning Web Component displays a page header, which contains a title, an icon, field data, and action links.
Available c-slds-header Attributes
Attribute |
Value |
Type |
Required |
Description |
|---|---|---|---|---|
description |
string |
Adds a short description for the header. |
||
displayName |
string |
Sets the alternative text for the image. |
||
fields |
string |
Sets the array of objects containing fields data. |
||
headerWrapperClass |
css class |
string |
Pass a wrapper CSS class the sldsHeader component. |
|
header |
string |
recommended |
Sets the header title. |
|
iconBgColor |
string |
Sets the color of the icon background when using slds icons. |
||
iconColor |
string |
Sets the color of the icon when using slds icons. |
||
iconImgWrapperclass |
string |
Adds a class provided by the user for the custom image wrapper. |
||
iconName |
string |
recommended |
Specifies the name of the icon to show next to the header title and description. |
|
iconSize |
string |
Sets the size of the icon. For available values check the Icon LWC. |
||
imageRef |
string |
To use a custom image, enter a URL. |
||
obj |
string |
Specifies the obj containing the data for the fields |
||
showSpinner |
true, false (Default: false) |
string |
Displays a spinner icon next to the header. |
|
theme |
slds, nds (Default: slds) |
string |
Specifies which theme to use. |
Example c-slds-header Component
<c-slds-header
header="Sample Header"
description="Sample title for the header"
theme={theme}
icon-name="standard:opportunity"
icon-size="large"
icon-color="#fcb95b"
icon-bg-color="#fff"
>
</c-slds-header>
Available Event Handlers
handleEdit()
An event that expects params detail.message to be set to the header when in edit mode.
handleSave()
An event that resets the header after editing is done.
fields
This accepts an array of objects with keys name,label and type. Supports number, currency, date, datetime, percentage, phone, address, checkbox, url & icon. For type = icon the value need to be boolean. If true it shows check. If false it shows nothing.
const fields = [
{ name: "Author", label: this.authorLabel, type: "string" },
{ name: "Status", label: this.statusLabel, type: "string" },
{ name: "IsChildCard", label: this.isChildCardLabel, type: "icon" }
];Vlocity Insurance and Health Spring '20
The SldsHeader Lightning Web Component displays a page header, which contains a title, an icon, field data, and action links.
Available c-slds-header Attributes
Attribute |
Value |
Type |
Required |
Description |
|---|---|---|---|---|
description |
string |
Adds a short description for the header. |
||
displayName |
string |
Sets the alternative text for the image. |
||
fields |
string |
Sets the array of objects containing fields data. |
||
header |
string |
recommended |
Sets the header title. |
|
iconBgColor |
string |
Sets the color of the icon background when using slds icons. |
||
iconColor |
string |
Sets the color of the icon when using slds icons. |
||
iconImgWrapperclass |
string |
Adds a class provided by the user for the custom image wrapper. |
||
iconName |
string |
recommended |
Specifies the name of the icon to show next to the header title and description. |
|
iconSize |
string |
Sets the size of the icon. For available values check the Icon LWC. |
||
imageRef |
string |
To use a custom image, enter a URL. |
||
obj |
string |
Specifies the obj containing the data for the fields |
||
theme |
slds, nds (Default: slds) |
string |
Specifies which theme to use. |
