API Docs

Create Bottom Sheet

Create Bottom Sheet - kintone.mobile.createBottomSheet()

Creates a bottom sheet on the mobile screen.
The content displayed inside the bottom sheet can be customized freely.

Function

Desktop

For desktop, use the following API:
Create Dialog

Mobile

kintone.mobile.createBottomSheet(config)

Parameters

Parameter Type Required Description
config Object Required The bottom sheet configuration
config.title String Optional The title.
If ignored, it will not be displayed.
config.body Element object Optional The bottom sheet body element.
If ignored, it will not be displayed.
config.showOkButton Boolean Optional The visibility of the OK button.
  • true: Display
  • false: Do not display
If ignored, it will be displayed.
config.okButtonText String Optional The text to display on the OK button.
If ignored, "OK" will be displayed according to the logged-in user's language.
config.showCancelButton Boolean Optional The visibility of the Cancel button.
  • true: Display
  • false: Do not display
If ignored, it will not be displayed.
config.cancelButtonText String Optional The text to display on the Cancel button.
If ignored, "Cancel" will be displayed according to the logged-in user's language.
config.showCloseButton Boolean Optional The visibility of the Close button.
  • true: Display
  • false: Do not display
If ignored, it will not be displayed.
config.beforeClose Function Optional A function to run before closing the bottom sheet by any of the following operations: OK button/Cancel button/Close button
The user's selected operation is passed as an argument to the function.
  • OK: The OK button is clicked
  • CANCEL: The Cancel button is clicked
  • CLOSE: The Close button is clicked
If the function returns false or a value that becomes false after the Promise is resolved, the bottom sheet will not close.

Returns

A Promise object. The following values can be retrieved when the Promise object is fulfilled:

Property Type Description
show Function An asynchronous function that displays the created bottom sheet.
It has no arguments.
The return value is a Promise object.
When the bottom sheet is closed, the Promise object is resolved and the following values can be retrieved:
  • OK: When the user clicks the OK button
  • CANCEL: When the user clicks the Cancel button
  • CLOSE: When the user clicks the Close button
  • FUNCTION: When the close function is called
close Function A function that closes the bottom sheet.
It has no argument or return value.

Available Pages (Mobile)

Sample Request

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

const bodyElement = document.createElement('p');
bodyElement.textContent = 'Do you want to delete this record?';

// Create a bottom sheet
const bottomSheet = await kintone.mobile.createBottomSheet({
  title: 'Confirmation',
  body: bodyElement,
  okButtonText: 'Delete',
  showCancelButton: true,
  cancelButtonText: 'Cancel',
  showCloseButton: true,
  beforeClose: (action) => {
    if (action === 'OK') {
      console.log('Record deleted');
    } else {
      console.log('Deletion canceled');
    }
  }
});

// Show the bottom sheet
await bottomSheet.show();
UI Image

The image below shows the bottom sheet on mobile.
This may change in future product updates.

Notes

The Element object specified in the config.body argument is used directly as the bottom sheet body element.
Perform sanitization processing as necessary.