Skip to main content
Version: 1.16.0

Dialog

Overview​

The Dialog component displays a dialog box.

Specification​

Property​

Here is a list of properties that can be used for modifying the component:

NameTypeDefaultDescriptionRemark
iconstring""The icon displayed in upper left of content areaAvailable options:
  • "info" : info
  • "success" : success
  • "error" : error
  • "warning" : warning
  • "question" : question
  • "" : No icon
    • titlestring""Header Title
    content *1string/HTMLElement""DOM inside contentIf a string with HTML is set, it will be automatically converted to HTML and displayed as it is
    footer *1string/HTMLElement""DOM inside footerIf a string with HTML is set, it will be automatically converted to HTML and displayed as it is
    containerHTMLElementdocument.bodyTarget element to append the componentBy default, it uses the body of the top-level document object, so it's simply document.body most of the time
    Will result an error if the value of container is not an HTMLElement
    footerVisiblebooleantrueShow/Hide the footer
    caution

    *1: [Security] Kintone UI Component does NOT sanitize this property value. It is the developer's responsibility to escape any user input when using this option so that XSS attacks would be prevented.

    Event​

    Here is a list of events that can be specified:

    NameTypeDescriptionRemark
    closefunctionEvent handler when the component has been closedIt will pass the event object as the argument

    Constructor​

    Dialog(options)
    Here is a list of available constructors:

    Parameter​

    NameTypeDefaultDescriptionRemark
    optionsobject{}Object that includes component properties

    Method​

    Here is a list of available methods:

    open()​

    Show the Dialog

    Parameter​

    none

    Return​

    none

    close()​

    Hide the Dialog

    Parameter​

    none

    Return​

    none

    Custom CSS​

    tip

    Please check Custom CSS feature guide at first.

    Here is a list of properties that can be used for modifying component style:

    Property​

    Name
    --kuc-dialog-header-font-size
    --kuc-dialog-header-color
    --kuc-dialog-max-width

    Sample Code​

    tip

    Please check the package installation method first.

    Here is a sample code when all parameters are specified:

    const Kuc = Kucs['1.x.x'];

    // Create OK and Cancel buttons
    const okButton = new Kuc.Button({
      text: 'OK',
      type: 'submit'
    });
    const cancelButton = new Kuc.Button({
      text: 'Cancel',
      type: 'normal'
    });

    okButton.addEventListener('click', () => {
      // handle click OK button
    });
    cancelButton.addEventListener('click', () => {
      // handle click Cancel button
    });

    // Wrap OK and Cancel buttons with a div
    const divEl = document.createElement('div');
    divEl.appendChild(okButton);
    divEl.appendChild(cancelButton);

    const dialog = new Kuc.Dialog({
      title: 'Title',
      content: '<div>This is Content</div>',
      footer: divEl,
      icon: 'info',
      container: document.body,
      footerVisible: true
    });

    dialog.addEventListener('close', event => {
      console.log(event);
    });

    dialog.open();
    dialog.close();
    Last updated on