xd-dialog-helper

xd-dialog-helper

  • Docs
  • WYSIWYG-Editor
  • GitHub

›Examples

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

Replace text dialog

Screenshot

Screenshot of the resulting dialog

Description

A dialog to find and replace text. It includes a simple explanation text, text inputs for the searched and replace texts, a checkbox to "ask" whether finding the text is case-sensitive and the Ok- and Cancel-buttons (where we labelthe Ok-button with "Replace text").

Code

const DialogHelper = require('xd-dialog-helper');

function myFunction(selection) {
    DialogHelper.showDialog('replace-text-dialog', 'Replace text', [
        {
            type: DialogHelper.types.HR,
            id: 'myHR'
        },
        {
            type: DialogHelper.types.TEXT,
            id: 'explanation',
            label: 'Enter the text you want to replace and the one you want to ' +
                'replace it with and hit the "Replace text" button below.'
        },
        {
            type: DialogHelper.types.TEXT_INPUT,
            id: 'match',
            label: 'Find'
        },
        {
            type: DialogHelper.types.TEXT_INPUT,
            id: 'replace',
            label: 'Replace with'
        },
        {
            type: DialogHelper.types.CHECKBOX,
            id: 'caseInsensitive',
            label: 'Ignore casing',
            value: false
        }
    ], {
        okButtonText: 'Replace text'
    }).then((results) => {
        // Repalce the text
        results.match // The value of the first text input
        results.replace // The value of the second text input
        results.caseInsensitive // Boolean: Checkbox checked?
    }, (reason) => {
        // Dialog got rejected
        console.log('The dialog got rejected');
    });
}
← Hello World DialogLorem Ipsum dialog →
  • Screenshot
  • Description
  • Code
xd-dialog-helper
Docs
Getting StartedExamplesAPI Reference
Community
User ShowcaseTwitter
More
GitHubLegal NoticePrivacy Policy
Copyright © 2019 Pablo Klaschka