createModal

Import

import { createModal } from 'c/bolt';

Usage

import { createModal } from 'c/bolt';
import modalTemplate from './modalTemplate.html';
import modalStylesheet from './modalTemplate.html';
const modal = createModal(modalTemplate, modalStylesheet);
export default class myLwc extends LightningElement{
  async handleClick() {
    const isOk = await modal.open();
  }
}

Methods

createModal(template, styleSheet, callbacks) : Modal

Name	Type	Description
template	Function	Imported HTML template
stylesheet	Function	Imported CSS stylesheet
callbacks	ModalCallbacks	To define initialRenderCallback, disconnectedCallback and eventHandlerCallbacks

open(params) : Promise<boolean>

Name	Type	Description
$	Object	Super object to pass any data you want to use inside the modal context

Example

Passing data

import { createModal } from 'c/bolt';
import modalTemplate from './modalTemplate.html';
import modalStylesheet from './modalTemplate.html';
const modal = createModal(modalTemplate, modalStylesheet);
export default class myLwc extends LightningElement{
  async handleClick() {
    const isOk = await modal.open({
      $: {
        headerLabel: "Hello world !"
      }
    });
  }
}

<template>
  <lightning-modal-header label={$.headerLabel}></lightning-modal-header>
</template>

Yes / No choice modal

The promise resolved value will be determined by which button was pushed to exit the modal.

• [data-yes] resolves to true
• [data-no] resolves to false

import { createModal } from 'c/bolt';
import modalTemplate from './modalTemplate.html';
import modalStylesheet from './modalTemplate.html';
const modal = createModal(modalTemplate, modalStylesheet);
export default class myLwc extends LightningElement{
  async handleClick() {
    const isOk = await modal.open({
      $: {
        headerLabel: "Hello world !"
      }
    });
    if(isOk) doSomething();
    else dissmiss();
  }
}

<template>
  <lightning-modal-header label={$.headerLabel}></lightning-modal-header>
  <button data-yes>Yes</button>
  <button data-no>No</button>
</template>

Note

You can use whatever element to put the [data-yes] or [data-no] attributes on.

Modal with inputs

The promise resolved value will be determined by which button was pushed to exit the modal.

• [data-yes] resolves to an object whose keys are the [data-yield] attributes chosen value and their values are the inputs value
• [data-no] resolves to false

import { createModal } from 'c/bolt';
import modalTemplate from './modalTemplate.html';
import modalStylesheet from './modalTemplate.html';
const modal = createModal(modalTemplate, modalStylesheet);
export default class myLwc extends LightningElement{
  async handleClick() {
    const yieldedValues = await modal.open({
      $: {
        headerLabel: "Hello world !",
        contactName: 'John Doe'
      }
    });
    if(!yieldedValues) dissmiss();
    else console.log(yieldedValues.contactName);
  }
}

<template>
  <lightning-modal-header label={$.headerLabel}></lightning-modal-header>
  <lightning-input
    value={$.contactName}
    data-yield="contactName"></lightinng-input>
  <button data-yes>Save record</button>
  <button data-no>Dismiss</button>
</template>

Note

In this example, if in the modal context, the user entered ‘Jane Doe’ in the input, because the input is marked as [data-yield], we’ll get back the value Jane Doe after resolving the modal.open() promise. The object will look something like :

yieldedValues: {
  contactName: 'Jane Doe'
}

Passing initial rendered callback

This callback is executed once. You have access to an argument whose type is this in the modal context.

import { createModal } from 'c/bolt';
import modalTemplate from './modalTemplate.html';
import modalStylesheet from './modalTemplate.html';
const modal = createModal(modalTemplate, modalStylesheet, {
  initialRenderCallback: [
    modal => console.log(modal.$.headerLabel);
  ]
});
export default class myLwc extends LightningElement{
  async handleClick() {
    await modal.open({
      $: {
        headerLabel: "Hello world !"
      }
    });
  }
}

<template>
  <lightning-modal-header label={$.headerLabel}></lightning-modal-header>
</template>

Passing event handler callbacks

You have access to those callbacks in the template of your modal

import { createModal } from 'c/bolt';
import modalTemplate from './modalTemplate.html';
import modalStylesheet from './modalTemplate.html';
const modal = createModal(modalTemplate, modalStylesheet, {
  eventHandlerCallbacks: {
    handleClick: () => console.log('Button has been clicked !')
  }
});
export default class myLwc extends LightningElement{
  async handleClick() {
    await modal.open({
      $: {
        headerLabel: "Hello world !"
      }
    });
  }
}

<template>
  <lightning-modal-header label={$.headerLabel}></lightning-modal-header>
  <lightning-button onclick={handleClick}></lightning-button>
</template>