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.

Managed Package app icon 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