Category: How do I do X?

This solution is summarized from an archived support forum post. This information may have changed. If you notice an error, please let us know in Discord.

How to create a reusuable modal?


As a developer, I want to create a generic modal that can be initialized with text and allow me to respond to boolean result in different calling methods for confirmations, errors, and infos. I need to use JS async-await and storeValue functions to achieve this.


To create a generic modal for different confirmations, errors, and information messages, you can start by creating an asynchronous function that opens the modal. Within this function, use the await keyword to store the confirmation message in a variable using the storeValue function.

Once you have the message stored, you can then display it within the modal. Use an if statement to conditionally trigger the relevant actions based on the user's response to the message. If the user agrees to the confirmation, execute the relevant code. If not, trigger the else block.

Here's some sample code that demonstrates this approach:

async function showModal(message) {
await storeValue('confirmationMessage', message);

// opening the modal here

const confirmationMessage = await retrieveValue('confirmationMessage');
const response = await displayMessageModal(confirmationMessage);

if (response) {
// execute relevant code here
} else {
// execute alternative code here

In this code, the showModal function stores the message using the storeValue function. It then retrieves that message and displays it within the modal using the displayMessageModal function.

The function then waits for the user's response and triggers either the if or else block based on that response.

Overall, this approach allows you to create a generic modal that can be initialized with different messages and trigger different actions based on the user's response.