options for showDialog()

The fourth argument of DialogHelper.showDialog() is an object containing further options for the dialog. Among them, there are

• The width of the dialog
• Texts of the two footer buttons
• and many more

We've already seen one example of this with the onValidate() callback in the dialog validation section before. Now, let's take a look at some more options we can pass here.

Please note that all the options for a dialog mentioned below are optional. We'll not explicitly mention this for every option.

options are simply an object passed as argument to the showDialog() function:

try {
    const results = DialogHelper.showDialog('my-dialog',
        'My dialog',
        [ /* [...] */ ],
        {
            // [1]
        }
    );
    // [...]
} catch (e) {
    // [...]
}

All dialog options can simply get put at the section of the code above marked with // [1].

width: number = 360

First, there is width, with which you can set the width of the dialog. Please note that, depending on the platform, dialog width can get intrepreted differently by XD, so check if your selected width works on both platforms.

Example

// [1]
width: 480,

okButtonText: string = 'Ok'

The text displayed in the ok button. Defaults to 'Ok', but can be anything you'd like.

Example

// [1]
okButtonText: 'Insert text',

cancelButtonText: string = 'Cancel'

The text displayed in the cancel button. Defaults to 'Cancel', but can be anything you'd like.

Example

// [1]
cancelButtonText: 'Stop',

css: string = ''

CSS styles that get applied to the dialog.

Example

// [1]
css: `
    input {
        background: black;
        color: white;
    }
`,

onBeforeShow(dialogElement: HTMLDialogElement, elements: ContentElement[], actions: ActionList): void

A callback that gets called before the dialog gets shown. Can get used to inject custom logic, elements etc, when needed.

Arguments:

• dialogElement: HTMLDialogElement – The dialog element
• elements: ContentElement[] – The content elements
• actions: ActionList – set of actions that can get performed for the dialog

For more details, please take a look at the showDialog() reference.

Example

// [1]
onBeforeShow: (dialog, elements, actions) => {
    dialog.appendChild(
        document.createElement('header')
    );
}

In conjunction with some CSS, e.g.,

header {
    postion: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: #00ffff;
}

we can create a corporate-colored bar at the top of the dialog (as seen in Lorem Ipsum, Text Toolbox etc.).

onValidate(values: object): boolean

A function that gets called whenever a value in the dialog changes. Returns true if the dialog is valid and false if it isn't. For more info, see the previous section or the relevant section in the reference.

Example

// [1]
onValidate: values => values['text'].length > 5,