Dialog
Overview
Item | Description |
---|---|
Item-1 | Header section |
Item-2 | Content section |
Item-3 | Footer section |
Constructor
Parameter
Name | Type | Required | Description |
---|---|---|---|
options | Object | No | The object contains params of constructor. |
options.header | String, DOM, React Element | No | Header of dialog. |
options.content | String, DOM, React Element | No | Content of dialog. |
options.footer | String, DOM, React Element | No | Footer of dialog. |
options.isVisible | Boolean | No | If set to true, Dialog will show up. Otherwise Dialog will hide. Default: true |
options.showCloseButton | Boolean | No | If set to true, close button in Item-1 will show up. Otherwise close button will hide. Default: true |
Sample
Javascript
var myDialog = new kintoneUIComponent.Dialog({
header: "Dialog header",
content: "This is content",
footer: "Footer",
isVisible: true,
showCloseButton: true
});
React
import {Dialog} from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
constructor(props) {
super(props);
this.state = {
isVisible: true
};
}
onClose = () => {
this.setState({isVisible: false})
}
render() {
return (
<Dialog
showCloseButton={true}
header="Dialog header"
content="This is content"
footer="Footer"
isVisible={this.state.isVisible}
onClose={this.onClose}
/>
);
}
}
Methods
render()
Get dom element of component.
Parameter
None
Returns
Dom element
Sample
Javascript
var myDialog = new kintoneUIComponent.Dialog({
header: "Dialog header",
content: "This is content",
footer: "Footer",
isVisible: true,
showCloseButton: true
});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(myDialog.render());
React
import {Dialog} from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
constructor(props) {
super(props);
this.state = {
isVisible: true
};
}
onClose = () => {
this.setState({isVisible: false})
}
render() {
return (
<Dialog
showCloseButton={true}
header="Dialog header"
content="This is content"
footer="Footer"
isVisible={this.state.isVisible}
onClose={this.onClose}
/>
);
}
}
show()
Display the Dialog.
Parameter
None
Returns
None
Sample
Javascript
var myDialog = new kintoneUIComponent.Dialog({
header: "Dialog header",
content: "This is content",
footer: "Footer",
isVisible: false,
showCloseButton: true
});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(myDialog.render());
myDialog.show();
React
import { Dialog } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
constructor(props) {
super(props);
this.state = {
isVisible: true
};
}
onClose = () => {
this.setState({
isVisible: false
})
}
render() {
return (
<Dialog
showCloseButton={true}
header="Dialog header"
content="This is content"
footer="Footer"
isVisible={this.state.isVisible}
onClose={this.onClose}
/>
);
}
}
hide()
Hide the Dialog.
Parameter
None
Returns
None
Sample
Javascript
var myDialog = new kintoneUIComponent.Dialog({
header: "Dialog header",
content: "This is content",
footer: "Footer",
isVisible: true,
showCloseButton: true
});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(myDialog.render());
myDialog.hide();
React
import { Dialog } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
render() {
return (
<Dialog
showCloseButton={true}
header="Dialog header"
content="This is content"
footer="Footer"
isVisible={false}
/>
);
}
}
setHeader()
Set header for Dialog.
Parameter
Name | Type | Required | Description |
---|---|---|---|
header | String, DOM, React Element | Yes | Header of dialog. |
Returns
Dialog instance
Sample
Javascript
var myDialog = new kintoneUIComponent.Dialog();
var elements = 'Announcement'
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(myDialog.render());
myDialog.setHeader(elements);
myDialog.show();
React
import { Dialog } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
constructor(props) {
super(props);
this.state = {
isVisible: true
};
}
onClose = () => {
this.setState({
isVisible: false
})
}
render() {
return (
<Dialog
showCloseButton={true}
header="Announcement"
isVisible={this.state.isVisible}
onClose={this.onClose}
/>
);
}
}
getHeader()
Get header for Dialog.
Parameter
None
Returns
Header of Dialog: string | DOM | React Element
Sample
Javascript
var myDialog = new kintoneUIComponent.Dialog({
header: "Dialog header",
content: "This is content",
footer: "Footer",
isVisible: true,
showCloseButton: true
});
document.body.append(myDialog.render());
myDialog.getHeader(); // return "Dialog header"
React
import { Dialog } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
constructor(props) {
super(props);
this.state = {
isVisible: true,
header: 'Announcement'
};
}
onClose = () => {
this.setState({
isVisible: false
})
}
handleClick= () => {
console.log(this.state.header);
};
render() {
return (
<div>
<Dialog
showCloseButton={true}
header={this.state.header}
isVisible={this.state.isVisible}
onClose={this.onClose}
/>
<button onClick={this.handleClick}>Get Header</button>
</div>
);
}
}
setContent()
Set content for Dialog.
Parameter
Name | Type | Required | Description |
---|---|---|---|
content | String, DOM, React Element | Yes | Content of dialog. |
Returns
Dialog instance
Sample
Javascript
var myDialog = new kintoneUIComponent.Dialog();
var elements = 'Content'
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(myDialog.render());
myDialog.setContent(elements);
myDialog.show();
React
import { Dialog } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
constructor(props) {
super(props);
this.state = {
isVisible: true
};
}
onClose = () => {
this.setState({
isVisible: false
})
}
render() {
return (
<Dialog
showCloseButton={true}
content="content"
isVisible={this.state.isVisible}
onClose={this.onClose}
/>
);
}
}
getContent()
Get content for Dialog.
Parameter
None
Returns
Content of Dialog: string | DOM | React Element
Sample
Javascript
var myDialog = new kintoneUIComponent.Dialog({
header: "Dialog header",
content: "This is content",
footer: "Footer",
isVisible: false,
showCloseButton: true
});
document.body.append(myDialog.render());
myDialog.getContent(); // return "This is content"
React
import { Dialog } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
constructor(props) {
super(props);
this.state = {
content: "Dialog content",
isVisible: true
};
}
onClose = () => {
this.setState({
isVisible: false
})
}
handleClick= () => {
console.log(this.state.content);
};
render() {
return (
<div>
<Dialog
showCloseButton={true}
content={this.state.content}
isVisible={this.state.isVisible}
onClose={this.onClose}
/>
<button onClick={this.handleClick}>Get Content</button>
</div>
);
}
}
setFooter()
Set footer for Dialog.
Parameter
Name | Type | Required | Description |
---|---|---|---|
footer | String, DOM, React Element | Yes | Footer of dialog. |
Returns
Dialog instance
Sample
Javascript
var myDialog = new kintoneUIComponent.Dialog();
var elements = 'Footer'
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(myDialog.render());
myDialog.setFooter(elements);
myDialog.show();
React
import { Dialog } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
constructor(props) {
super(props);
this.state = {
isVisible: true
};
}
onClose = () => {
this.setState({
isVisible: false
})
}
render() {
return (
<Dialog
showCloseButton={true}
footer="footer"
isVisible={this.state.isVisible}
onClose={this.onClose}
/>
);
}
}
getFooter()
Get footer for Dialog.
Parameter
None
Returns
Footer of Dialog: string | DOM | React Element
Sample
Javascript
var myDialog = new kintoneUIComponent.Dialog({
header: "Dialog header",
content: "This is content",
footer: "Footer",
isVisible: true,
showCloseButton: true
});
document.body.append(myDialog.render());
myDialog.getFooter(); // return "Footer"
React
import { Dialog } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
constructor(props) {
super(props);
this.state = {
footer: "Dialog footer",
isVisible: true
};
}
handleClick= () => {
console.log(this.state.footer);
};
onClose = () => {
this.setState({
isVisible: false
})
}
render() {
return (
<div>
<Dialog
showCloseButton={true}
footer={this.state.footer}
isVisible={this.state.isVisible}
onClose={this.onClose}
/>
<button onClick={this.handleClick}>Get Footer</button>
</div>
);
}
}