Documentos de API

Crear hoja inferior

Crear hoja inferior - kintone.mobile.createBottomSheet()

Crea una hoja inferior en la pantalla móvil.
El contenido mostrado dentro de la hoja inferior se puede personalizar libremente.

Función

Escritorio

Para escritorio, use la siguiente API:
Crear diálogo

Móvil

kintone.mobile.createBottomSheet(config)

Parámetros

Parámetro Tipo Obligatorio Descripción
config Object Sí La configuración de la hoja inferior
config.title String Opcional El título.
Si se omite, no se mostrará.
config.body Element object Opcional El elemento del cuerpo de la hoja inferior.
Si se omite, no se mostrará.
config.showOkButton Boolean Opcional La visibilidad del botón OK.
  • true: Mostrar
  • false: No mostrar
Si se omite, se mostrará.
config.okButtonText String Opcional El texto a mostrar en el botón OK.
Si se omite, se mostrará "OK" según el idioma del usuario que ha iniciado sesión.
config.showCancelButton Boolean Opcional La visibilidad del botón Cancel.
  • true: Mostrar
  • false: No mostrar
Si se omite, no se mostrará.
config.cancelButtonText String Opcional El texto a mostrar en el botón Cancel.
Si se omite, se mostrará "Cancel" según el idioma del usuario que ha iniciado sesión.
config.showCloseButton Boolean Opcional La visibilidad del botón Close.
  • true: Mostrar
  • false: No mostrar
Si se omite, no se mostrará.
config.beforeClose Function Opcional Una función que se ejecuta antes de cerrar la hoja inferior mediante cualquiera de las siguientes operaciones: botón OK/botón Cancel/botón Close.
La operación seleccionada por el usuario se pasa como argumento a la función.
  • OK: Se hace clic en el botón OK
  • CANCEL: Se hace clic en el botón Cancel
  • CLOSE: Se hace clic en el botón Close
Si la función devuelve false o un valor que se convierte en false después de que se resuelva la Promise, la hoja inferior no se cerrará.

Devuelve

Un objeto Promise.
Cuando se cumple el objeto Promise, se pueden recuperar los siguientes valores:

Propiedad Tipo Descripción
show Function Una función asíncrona que muestra la hoja inferior creada.
No tiene argumentos.
El valor de retorno es un objeto Promise.
Cuando se cierra la hoja inferior, la Promise se resuelve y se pueden recuperar los siguientes valores:
  • OK: Cuando el usuario hace clic en el botón OK
  • CANCEL: Cuando el usuario hace clic en el botón Cancel
  • CLOSE: Cuando el usuario hace clic en el botón Close
  • FUNCTION: Cuando se llama a la función de cierre
close Function Una función que cierra la hoja inferior.
No tiene argumentos ni valor de retorno.

Páginas disponibles (móvil)

Solicitud de ejemplo

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

const wrapper = document.createElement('div');

const description = document.createElement('p');
description.textContent = 'Please share your feedback and suggestions.';

const input = document.createElement('input');
input.type = 'text';
input.style.width = '99%';

wrapper.append(description, input);

// Un panel inferior para enviar comentarios 
const bottomSheet = await kintone.mobile.createBottomSheet({
  title: 'Submitting feedback',
  body: wrapper,
  okButtonText: 'Send',
  showCancelButton: true,
  cancelButtonText: 'Cancel',
  showCloseButton: true,
  beforeClose: (action) => {
    if (action === 'OK') {
      const feedback = input.value.trim();
      console.log('Feedback:', feedback);
    }
  }
});

// Mostrar el panel inferior
await bottomSheet.show();

Imagen de UI

La siguiente imagen muestra la hoja inferior en el móvil.
Esto puede cambiar en futuras actualizaciones del producto.

Notas

El objeto Element especificado en el argumento config.body se usa directamente como el elemento del cuerpo de la hoja inferior.
Realice el procesamiento de saneamiento según sea necesario.