Skip to main content
Version: 1.23.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
classNamestring""Component class name
iconstring""The icon displayed in upper left of content areaAvailable options:
  • "info" : info
  • "success" : success
  • "error" : error
  • "warning" : warning
  • "question" : question
  • "" : No icon
idstring""Component id name
titlestring""Header TitleIf header is unspecified, the value of title will be displayed
In other cases, the title will be ignored
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
header *1string/HTMLElement""DOM inside headerIf 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',
  header: '<div>This is Header</div>',
  content: '<div>This is Content</div>',
  footer: divEl,
  className: 'options-class',
  id: 'options-id',
  icon: 'info',
  container: document.body,
  footerVisible: true
});

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

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