Custom Modals
New modals can be added to the system via the extension registry.
This article goes through adding new modals to the system. There are three steps to creating a custom modal:
Create a modal element
Declare an Extension Manifest
(Optional) Create a Modal Token
After completing these steps, refer to the example on how to open the modal.
Create a modal element
A modal element is a web component that is used to render a modal. It should implement the UmbModalExtensionElement
interface. The modal context is injected into the element when the modal is opened in the modalContext
property. The modal context is used to close the modal, update the value and submit the modal.
Additionally, the modal element can see its data parameters through the modalContext
property. In this example, the modal data is of type MyModalData
, and the modal value is of type MyModalValue
. The modal context is of type UmbModalContext<MyModalData, MyModalValue>
. We are using the data to render a headline and the value to update the value and submit the modal.
The class must be exported as an element
or default
for the Extension Registry to be able to pick up the class.
Declare an Extension Manifest
The modal element needs to be registered in the extension registry. This is done by defining the modal in the manifest file. The element
property should point to the file that contains the modal element.
Create a modal token
A Modal Token works as a constant that identifies the modal. It is used to open the modal and knows the types of the modal data and modal value. As well, it can contain a preset, containing default data and modal options.
The first argument passed to UmbModalToken
is the extension alias; the second is the preset configuration.
A modal token is a generic type that takes two arguments(<MyModalData, MyModalValue>
):
The first defines the type of data passed to the modal when opened.
The second defines the type of value returned when the modal is submitted.
Open the modal
To open the modal, call the umbOpenModal
method with the Modal Token and data of choice:
The Promise of umbOpenModal
is caught if it gets rejected. This is because if the Model gets closed without submission, the Promise is rejected. YThis can be used to carry out a certain action if the modal is cancelled. In this case, undefined
is returned when the Modal is cancelled (rejected).
Last updated
Was this helpful?