openModal

Opens a modal component.

Signature

Copy
1
(componentId: string, componentParams?: Record<string, any>) => { modalClosed: Promise<Serializable> }

Parameters

NameTypeDescription
componentIdstringID of the component to show in the modal, as defined in Wix Developer Center.
componentParamsRecord<string, any>Optional. Custom data to pass into the component, the component may consume this data using observeState

Returns

Copy
1
{ modalClosed: Promise<Serializable> }

Note: Do not use relative CSS height units such as vh in the components passed to this function. The SDK adjusts component heights automatically. If your component uses relative height units by default, make sure to turn them off.

Examples

To set up a dashboard client, refer to the setup guide.

Open a modal

Copy
1
client.dashboard.openModal('component-id');

Pass extra data when opening a modal

Copy
1
const onNameChange = (newName: string) => {
2
  console.log('Name was changed.');
3
};
4
client.dashboard.openModal('component-id', { firstName: 'Name', onNameChange });
  • This data can be consumed using the observeState function.
  • Note: Changes to the data passed into the modal won't trigger an update with observeState (unlike the regular behavior of this method, that allows to obeserve to data changes).

Get notified when the modal is closed

Copy
1
const { modalClosed } = client.dashboard.openModal('component-id');
2


3
modalClosed.then(result => {
4
  if(result) {
5
    console.log('The modal was closed and returned the value:', result);
6
  } else {
7
    console.log('The modal was closed without any data.'); 
8
  }
9
})
Was this helpful?
Yes
No