Can crayons modal be loaded from code instead of button

I would like to know if the modal widget can be loaded via code instead of from a button click.

In my case I want to launch the dialog from a fw-dropdown-button

So far this is what I have working:

  <fw-button modal-trigger-id='large'> Open Large Modal </fw-button>
  <fw-modal id='large' onclick="Submit()"  title-text="Change Start Date" description="Pick start date in future." size="large">
      <input type="date" id="start_date" name="trip-start" value="2018-07-22">
  </fw-modal>

I want to trigger it via code.

@stevemc ,
Good Day,
Yes, it is possible,

please find the below code snippet to open a modal at runtime

function openModal (title, content, successText, cancelText) {
    return  new Promise(
      (resolve, reject) => {
        const fwModal = document.createElement('fw-modal');
        document.querySelector('body').appendChild(fwModal);
        fwModal.successText = successText;
        fwModal.cancelText = cancelText;

        fwModal.setAttribute('title-text', title);
        fwModal.innerHTML = content;
        fwModal.setAttribute('visible', true);

        fwModal.addEventListener('fwAction', () => {
          resolve({ status: 'confirmed' });
          fwModal.parentNode.removeChild(fwModal);
        });

        fwModal.addEventListener('fwClosed', () => {
          reject(new Error('Confirmation Declined by User'));
          fwModal.parentNode.removeChild(fwModal);
        });
      },
    );
  }

hope it helps :slight_smile:

Thanks

4 Likes

This topic was automatically closed 6 days after the last reply. New replies are no longer allowed.