xd-dialog-helper

xd-dialog-helper

  • Docs
  • WYSIWYG-Editor
  • GitHub

›Reference

Getting started

  • Installation
  • The first dialog
  • WYSIWYG-Editor
  • Dialog validation
  • Options for showDialog()
  • Custom types

Examples

  • Hello World Dialog
  • Replace text dialog
  • Lorem Ipsum dialog

Reference

  • showDialog()
  • ActionList
  • ContentElementDeclaration
  • ContentElement
  • ContentElementType
  • Types

    • Checkbox
    • Header
    • Horizontal Rule
    • Select / Dropdown
    • Slider
    • Text
    • Text area
    • Text input

function DialogHelper.showDialog()

Signature

function showDialog(dialogId: string, elements: ContentElementDeclaration[], options): Promise<object>

Type

Exported function of the xd-dialog-helper module

Paramters

dialogId: string

The dialog id. Must be unique when showing the dialog. Gets used to prefix element ids. Important element ids are:

  • [dialogId]: The dialog element itself
  • [dialogId]-dialogHelperBtnOk: The Submit button
  • [dialogId]-dialogHelperBtnCancel: The Cancel button

elements?: ContentElementDeclaration[] = []

(optional)

A list of content element declarations (ContentElementDeclaration) which will get displayed in their order in the array as dialog content. The ids determine the value key in the return value.

options?: object = {}

(optional)

Options for the dialog like custom CSS, texts etc.

options.okButtonText?: string = 'Ok'

(optional)

The text in the "ok" button (e.g., "ok", "insert" or similar)

option.cancelButtonText?: string = 'Cancel'

(optional)

The text in the "cancel" button (e.g., "cancel", "abort" or similar)

css?: string = ''

(optional)

CSS code that gets injected into the style

width?: number = 360

(optional)

The dialog width in px

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

A function that gets triggered before the dialog gets shown. You can – for example – inject custom code here.

Parameters:

  • dialogElement: HTMLDialogElement – The dialog element that gets shown
  • elements: ContentElement[] – The dialog's elements in a key-value based manner (the key corresponds to the name of an input) – see ContentElement
  • actions: ActionList – Actions which can get performed like closing or canceling the dialog – see ActionList

onValidate?: (values: object): boolean

A function that gets triggered when inputs change. Its return value determines if the inputs are value and thus, if the ok button is clickable

Paramters:

  • values: object The dialog values in a key-value-pair form (as an object), in the same format as the showDialog() return value.

Returns: boolean – true if the values are valid, false if they're not

Returns

Type: Promise<object>

A promise that

  1. resolves with an object containing the form values of the dialog in an object in key-value-pair form. For example, for a dialog containing a text field with the id 'name', the resulting object will look like this:
    {
        name: 'Entered name'
    }
    
  2. rejects with 'reasonCancelled' if the user cancels the dialog
← Lorem Ipsum dialogActionList →
  • Signature
  • Type
  • Paramters
    • dialogId: string
    • elements?: ContentElementDeclaration[] = []
    • options?: object = {}
  • Returns
xd-dialog-helper
Docs
Getting StartedExamplesAPI Reference
Community
User ShowcaseTwitter
More
GitHubLegal NoticePrivacy Policy
Copyright © 2019 Pablo Klaschka