AccordionSection Lightning Web Component ReadMe (Managed Package)

For the managed package runtime, this page contains the AccordionSection 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 Winter '20 and Vlocity CME Spring '20

The Accordion Lightning Web Component is the basic element inside the Accordion Lightning Web Component.

Available c-accordion-sectionAttributes

Attribute	Type	Required	Description
label	string		Sets the label for the section.
name	string		Used to bind to the parent accordion component. Name must be unique for each section inside an accordion.
title	string		Sets the title of the component.
menuitem	array	yes (if menu size and position is given)	Defines the list of menu items.

Example menuitems

Note: All the keys of the menuItem array object are required. However, the value can be null or empty. For more info check the readme of the Menu Lightning Web Component.

[
  {
    actionUrl: "javaScript:void(0);",
    openUrlIn: "newTab",
    name: "menu1",
    type: "action",
    record: {
      id: "001122",
      value: "Menu1",
      label: "Menu1"
    }
  },
  {
    actionUrl: "javaScript:void(0);",
    openUrlIn: "newTab",
    name: "menu1",
    type: "action",
    record: {
      id: "001124",
      value: "Menu3",
      label: "Menu3"
    }
  }
];

Example c-accordion-section Component

    @track
  menuitem = [
    {
      actionUrl: "javaScript:void(0);",
      openUrlIn: "newTab",
      name: "menu1",
      type: "action",
      record: {
        id: "001122",
        value: "Menu1",
        label: "Menu1"
      }
    },
    {
      actionUrl: "javaScript:void(0);",
      openUrlIn: "newTab",
      name: "menu2",
      type: "action",
      record: {
        id: "001123",
        value: "Menu2",
        label: "Menu2"
      }
    }]

<c-accordion active-section-name="B">
  <c-accordion-section
    theme="slds"
    label="Accordion With Menu"
    name="A"
    title="A"
    menuitem="{menuitem}"
  >
    <p>This is the first accordion</p>
    <p>.</p>
    <p>.</p>
    <p>.</p>
  </c-accordion-section>
  <c-accordion-section
    theme="slds"
    label="Accordion Without Menu"
    name="B"
    title="B"
  >
    <p>This is the second accordion</p>
    <p>.</p>
    <p>.</p>
    <p>.</p>
  </c-accordion-section>
  <c-accordion-section
    theme="slds"
    label="Accordion Without Menu"
    name="C"
    title="C"
  >
    <p>This is the third accordion</p>
    <p>.</p>
    <p>.</p>
    <p>.</p>
  </c-accordion-section>
</c-accordion>