Salesforce Docs Portal

Modal Lightning Web Component ReadMe (Managed Package)

For the managed package runtime, this page contains a Modal LWC ReadMe for each 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 Spring '22

The Modal Lightning Web Component displays content in a layer on top of the app. Common use cases for modals include: creating or editing a record, as well as various types of messaging and wizards. Use the Prompt Lightning Web Component for form submission confirmation.

Available c-modal Attributes

Attribute

Value

Type

Required

Description

title

  

string

  

Adds the header title to the modal component.

size

small, medium, large

string

  

Sets the modal size. If not set, component takes the default size of the chosen theme.

theme

slds, nds (Default: slds)

string

  

Sets the theme for this component.

isModalOpen

true, false (Default: false)

boolean

  

To show the modal by default, set to true.

hideheader

no value (See example code.)

string

  

Hides the header from the modal.

hidefooter

no value (See example code.)

string

  

Hides the footer from the modal.

extraclass

  

string

  

Adds a class to the container element. To add multiple classes, use a space to separate each class, such as 'classone classtwo'.

height

CSS (Default: calc(100vh - 160px))

string

  

Sets the height of the modal. Supports all CSS value types, such as calc, px, %, vh, and so on.

min-height

CSS (If height is set this won't apply)

string

  

Sets the minimum height of the modal. Supports all CSS value types, such as calc, px, %, vh, and so on.

max-height

CSS (If height is set this won't apply)

string

  

Sets the maximum height of the modal. Supports all CSS value types, such as calc, px, %, vh, and so on.

modalBackdropStyle

CSS

string

  

Sets the custom backdrop style.

channelName

  

string

  

Specify the channel name for closing the modal on pubsub event.

Example c-modal Component

<c-modal title="Profile Info" size="large" isModalOpen hideheader hidefooter>
  <div slot="header">
    <h1>Header description</h1>
  </div>
  <div slot="content">
    <c-vlocity_input
      value=""
      label="Name"
      placeholder="Enter Name"
    ></c-vlocity_input>
  </div>
  <div slot="footer">
    <c-vlocity_button variant="brand" label="Save"></c-vlocity_button>
  </div>
</c-modal>
<button onclick="{openModal}" class="test">Open Modal</button>

Available Methods

openModal()

If hidden, shows the modal.

closeModal()

If visible, hides the modal.

Vlocity Insurance and Health Summer '20

The Modal Lightning Web Component displays content in a layer on top of the app. Common use cases for modals include: creating or editing a record, as well as various types of messaging and wizards. Use the Prompt Lightning Web Component for form submission confirmation.

Available c-modal Attributes

Attribute

Value

Type

Required

Description

extraclass

  

string

  

Adds a class to the container element. To add multiple classes, use a space to separate each class, such as 'classone classtwo'.

height

CSS (Default: calc(100vh - 160px))

string

  

To adjust the height of the modal, set attribute. Supports all CSS value types, such as calc, px, %, vh, and so on.

hidefooter

no value (See example code.)

string

  

To hide the footer from the modal, set attribute.

hideheader

no value (See example code.)

string

  

To hide the header from the modal, set attribute.

isModalOpen

true, false (Default: false)

boolean

  

To show modal by default, set to true.

max-height

CSS (If height is set this won't apply)

string

  

To set the max-height of the modal, set attribute. Supports all CSS value types, such as calc, px, %, vh, and so on.

min-height

CSS (If height is set this won't apply)

string

  

To set the min-height of the modal, set attribute. Supports all CSS value types, such as calc, px, %, vh, and so on.

modalBackdropStyle

CSS

string

  

Sets custom backdrop style.

size

small, medium, large

string

  

Sets the modal size. If not set, component takes the default size of the chosen theme.

theme

slds, nds (Default: slds)

string

  

Sets the theme for this component.

title

  

string

  

Adds the header title to the modal component.

Example c-modal Component

<c-modal title="Profile Info" size="large" isModalOpen hideheader hidefooter>
  <div slot="header">
    <h1>Header description</h1>
  </div>
  <div slot="content">
    <c-vlocity_input
      value=""
      label="Name"
      placeholder="Enter Name"
    ></c-vlocity_input>
  </div>
  <div slot="footer">
    <c-vlocity_button variant="brand" label="Save"></c-vlocity_button>
  </div>
</c-modal>
<button onclick="{openModal}" class="test">Open Modal</button>

Available Methods

openModal()

If hidden, shows the modal.

closeModal()

If visible, hides the modal.

Vlocity Insurance and Health Winter '20 and Vlocity CME Spring '20

The Modal Lightning Web Component displays content in a layer on top of the app. Common use cases for modals include: creating or editing a record, as well as various types of messaging and wizards. Use the Prompt Lightning Web Component for form submission confirmation.

Available c-modal Attributes

Attribute

Value

Type

Required

Description

extraclass

  

string

  

Adds a class to the container element. To add multiple classes, use a space to separate each class, such as 'classone classtwo'.

height

CSS (Default: calc(100vh - 160px))

string

  

To adjust the height of the modal, set attribute. Supports all CSS value types, such as calc, px, %, vh, and so on.

hidefooter

no value (See example code.)

string

  

To hide the footer from the modal, set attribute.

hideheader

no value (See example code.)

string

  

To hide the header from the modal, set attribute.

isModalOpen

true, false (Default: false)

boolean

  

To show modal by default, set to true.

size

small, medium, large

string

  

Sets the modal size. If not set, component takes the default size of the chosen theme.

theme

slds, nds (Default: slds)

string

  

Sets the theme for this component.

title

  

string

  

Adds the header title to the modal component.

Example c-modal Component

    <c-modal
        title="Profile Info"
        size="large"
        isModalOpen
        hideheader
        hidefooter
    >
        <div slot="header">
            <h1>Header description</h1>
        </div>
        <div slot="content">
            <c-vlocity_input value="" label="Name" placeholder="Enter Name"></c-vlocity_input>
        </div>
        <div slot="footer">
            <c-vlocity_button variant="brand" label="Save"></c-vlocity_button>
        </div>
    </c-modal>
    <button onclick={openModal} class="test">Open Modal</button>

Available Methods

openModal()

If hidden, shows the modal.

closeModal()

If visible, hides the modal.

Vlocity Insurance and Health Summer '19 and Vlocity CME Fall '19

The Modal Lightning Web Component displays content in a layer on top of the app. Common use cases for modals include: creating or editing a record, as well as various types of messaging and wizards. Use thePrompt Lightning Web Component for form submission confirmation.

Available c-modal Attributes

Attribute

Value

Type

Required

Description

extraclass

  

string

  

Adds a class to the container element. To add multiple classes, use a space to separate each class, such as `classone classtwo'.

height

CSS (Default: calc(100vh - 160px))

string

  

To adjust the height of the modal, set attribute. Supports all CSS value types, such as calc, px, %, vh, and so on.

hidefooter

no value (See example code.)

string

  

To hide the footer from the modal, set attribute.

hideheader

no value (See example code.)

string

  

To hide the header from the modal, set attribute.

isModalOpen

true, false (Default: false)

boolean

  

To show modal by default, set to true.

size

small, medium, large

string

  

Sets the modal size. If not set, component takes the default size of the chosen theme.

theme

slds, nds (Default: slds)

string

  

Sets the theme for this component.

title

  

string

  

Adds the header title to the modal component.

Example c-modal Component

    <c-modal
        title="Profile Info"
        size="large"
        isModalOpen
        hideheader
        hidefooter
    >
        <div slot="header">
            <h1>Header description</h1>
        </div>
        <div slot="content">
            <c-vlocity_input value="" label="Name" placeholder="Enter Name"></c-vlocity_input>
        </div>
        <div slot="footer">
            <c-vlocity_button variant="brand" label="Save"></c-vlocity_button>
        </div>
    </c-modal>
    <button onclick={openModal} class="test">Open Modal</button>

Available Methods

openModal()

If hidden, shows the modal.

closeModal()

If visible, hides the modal.