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:

Name	Type	Default	Description	Remark
icon	string	""	The icon displayed in upper left of content area	Available options: "info" : "success" : "error" : "warning" : "question" : "" : No icon
title	string	""	Header Title	If header is unspecified, the value of title will be displayed In other cases, the title will be ignored
content *1	string/HTMLElement	""	DOM inside content	If a string with HTML is set, it will be automatically converted to HTML and displayed as it is
footer *1	string/HTMLElement	""	DOM inside footer	If a string with HTML is set, it will be automatically converted to HTML and displayed as it is
header *1	string/HTMLElement	""	DOM inside header	If a string with HTML is set, it will be automatically converted to HTML and displayed as it is
container	HTMLElement	document.body	Target element to append the component	By 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
footerVisible	boolean	true	Show/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:

Name	Type	Description	Remark
close	function	Event handler when the component has been closed	It will pass the event object as the argument

Constructor

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

Parameter

Name	Type	Default	Description	Remark
options	object	{}	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,
  header: '<div>This is Header</div>',
  icon: 'info',
  container: document.body,
  footerVisible: true
});

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

dialog.open();
dialog.close();

---

Related Articles

• Format setting plug-in
• Search box customization with TypeScript