Skip to main content
Version: 1.3.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
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
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


Sample Code

Here is a sample code when all parameters are specified:

const dialog = new Kuc.Dialog({
title: 'Title',
content: '<div>This is Content</div>',
footer: 'Footer'
});

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

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