Modal windows and prompts - lmparppei/BeatPlugins GitHub Wiki

Note: If you want to create a more elaborate UI, see Displaying HTML Content.

Simple Input

Beat.alert("Alert title", "Informative Text") – simple alert box
Beat.confirm("Title", "Informative text") — ask for confirmation, returns true or false
Beat.prompt("Title", "Informative Text", "Placeholder string") – get text input from the user, returns a string
Beat.dropdownPrompt("Title", "Informative Text", [value, value, value]) – allow the user to select a value from an array, returns a string

Advanced Modal Windows

You can create more advanced modal windows with multiple types of inputs using Beat.modal(). It takes in an object with the following properties: title (title of the modal), info (informative text) and items: [] (an array of inputs).

Beat.modal({
     title: "Title",
     info: "Informative text",
     items: [...]
})

For the input objects, you need to set type, name and label. Valid types are text, dropbdown and checkbox.

let items = [
    {
        type: "text",
        name: "myTextInput",
        label: "Label for the input"
    }, 
...]

See the full example below to get an idea on how advanced modals work.

Examples

User confirmation

let result = Beat.confirm("Are you sure you want to continue?", "Changes cannot be undone")

if (result) {
     // Do something
}

Text input

This example adds a line of dialogue at the end of document.

let characterName = Beat.prompt("Character name", "The name of your character", "Doe")
let dialogue = Beat.prompt("Line of dialogue", "What should they say?", "Hello World!")

// Do nothing if the user didn't give any input
if (!dialogue.length || !characterName.length) return;

// Get the length of text
let idx = Beat.getText().length

// Add a dialogue block at the end of document
Beat.addString("\n\n" + characterName.toUpperCase() + "\n" + dialogue + "\n\n", idx)

Advanced modal example

This example logs the modal window results as JSON.

Beat.modal({
    title: "This is a test modal",
    info: "You can input stuff into multiple types of fields",
    items: [
        {
            type: "text",
            name: "characterName",
            label: "Character Name",
            placeholder: "First Name"
        },
        {
            type: "dropdown",
            name: "characterRole",
            label: "Role",
            items: ["Protagonist", "Supporting Character", "Other"]
        },
        {
            type: "space"
        },
        {
            type: "checkbox",
            name: "important",
            label: "This is an important character"
        },
        {
            type: "checkbox",
            name: "recurring",
            label: "Recurring character"
        }
    ]
}, function(response) {
    if (response) {
        // The user clicked OK
        Beat.log(JSON.stringify(response))
    } else {
        // The user clicked CANCEL
    }
})