cómo personalizar la apariencia de la interfaz de usuario para la notificación emergente de mensajes en GridJs

Guía de Notificaciones Personalizadas para GridJs

Resumen

GridJs ofrece un sistema flexible de notificaciones emergentes personalizadas que te permite reemplazar los mensajes de alerta predeterminados con tu propia implementación de notificación. Esta guía demuestra varias formas de personalizar las notificaciones emergentes según las necesidades de tu aplicación.

Tabla de Contenidos

Basic Usage

Simple Alert Example

The most basic custom toast can be implemented using the native alert() function:

const xs = x_spreadsheet('#spreadsheet');

// Define custom toast function
function myToast(title, content, callback) {
  alert(`${title}: ${content}`);
  if (callback) callback();
}

// Set custom toast
xs.customToast(myToast);

Parámetros:

  • title (cadena): Título de la notificación toast
  • content (cadena): Contenido del mensaje toast
  • callback (función, opcional): Función de devolución de llamada a ejecutar después de cerrar el toast

Integration Examples

1. Beautiful Custom Toast

Create a visually appealing toast notification without external dependencies:

function beautifulToast(title, content, callback) {
  // Create dimmer overlay
  const dimmer = document.createElement('div');
  Object.assign(dimmer.style, {
    position: 'fixed',
    top: 0, left: 0, right: 0, bottom: 0,
    background: 'rgba(0,0,0,0.5)',
    zIndex: 9999
  });

  // Create toast element
  const toast = document.createElement('div');
  Object.assign(toast.style, {
    position: 'fixed',
    top: '50%', left: '50%',
    transform: 'translate(-50%, -50%)',
    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
    color: 'white',
    padding: '20px 30px',
    borderRadius: '10px',
    boxShadow: '0 10px 40px rgba(0,0,0,0.3)',
    zIndex: 10000,
    minWidth: '300px'
  });

  toast.innerHTML = `
    <div style="display: flex; justify-content: space-between; margin-bottom: 10px; font-weight: bold;">
      <span>${title}</span>
      <span class="close" style="cursor: pointer;">×</span>
    </div>
    <div>${content}</div>
  `;

  const remove = () => {
    document.body.removeChild(toast);
    document.body.removeChild(dimmer);
    if (callback) callback();
  };

  toast.querySelector('.close').onclick = remove;
  dimmer.onclick = remove;

  document.body.appendChild(dimmer);
  document.body.appendChild(toast);

  // Auto-dismiss after 3 seconds
  setTimeout(remove, 3000);
}

xs.customToast(beautifulToast);

Características:

  • Fondo en gradiente
  • Superposición modal
  • Hace clic para cerrar
  • Cierre automático después de 3 segundos
  • Botón de cerrar

2. Toastr Library Integration

Integrate the popular Toastr library for toast notifications.

Prerequisites:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

Implementación:

xs.customToast((title, content, callback) => {
  toastr.options = {
    closeButton: true,
    progressBar: true,
    positionClass: 'toast-top-right',
    timeOut: 3000
  };
  toastr.info(content, title);
  if (callback) callback();
});

Opciones de personalización:

  • closeButton: Muestra un botón de cerrar
  • progressBar: Muestra una barra de progreso regresiva
  • positionClass: Controla la posición del toast (arriba-derecha, abajo-izquierda, etc.)
  • timeOut: Duración de cierre automático en milisegundos

3. SweetAlert2 Integration

Use SweetAlert2 for beautiful, customizable alert dialogs.

Prerequisites:

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

Implementación:

xs.customToast((title, content, callback) => {
  Swal.fire({
    title: title,
    html: content,
    icon: 'info',
    confirmButtonText: 'OK'
  }).then(() => {
    if (callback) callback();
  });
});

Iconos disponibles:

  • success
  • error
  • warning
  • info
  • question

4. Vue + Element UI

Integration with Vue.js and Element UI’s notification component.

new Vue({
  el: '#app',
  mounted() {
    const xs = x_spreadsheet('#spreadsheet');

    xs.customToast((title, content, callback) => {
      this.$notify({
        title: title,
        message: content,
        type: 'info',
        duration: 3000,
        onClose: callback
      });
    });
  }
});

Tipos de notificación:

  • success
  • warning
  • info
  • error

5. React + Ant Design

Integration with React and Ant Design’s message component.

import { message } from 'antd';

const App = () => {
  useEffect(() => {
    const xs = x_spreadsheet('#spreadsheet');

    xs.customToast((title, content, callback) => {
      message.info({
        content: `${title}: ${content}`,
        duration: 3,
        onClose: callback
      });
    });
  }, []);

  return <div id="spreadsheet"></div>;
};

Componentes alternativos de Ant Design:

  • message.success()
  • message.error()
  • message.warning()
  • notification.open() (para notificaciones más complejas)

Advanced Use Cases

6. Logging and Analytics

Combine custom toast with logging and analytics tracking:

xs.customToast((title, content, callback) => {
  // Log to console
  console.log(`[Toast] ${title}:`, content);

  // Track in analytics system
  if (window.analytics) {
    analytics.track('toast_shown', {
      title: title,
      content: content,
      timestamp: new Date().toISOString()
    });
  }

  // Display custom notification
  showMyCustomToast(title, content, callback);
});

Casos de uso:

  • Registro de depuración
  • Seguimiento del comportamiento del usuario
  • Monitoreo de errores
  • Métricas de rendimiento

7. Mobile-Friendly Toast

Create a mobile-optimized toast notification:

function mobileToast(title, content, callback) {
  const toast = document.createElement('div');
  Object.assign(toast.style, {
    position: 'fixed',
    bottom: '20px',
    left: '50%',
    transform: 'translateX(-50%)',
    background: '#323232',
    color: 'white',
    padding: '12px 24px',
    borderRadius: '24px',
    fontSize: '14px',
    zIndex: 10000,
    maxWidth: '80%',
    textAlign: 'center',
    boxShadow: '0 4px 12px rgba(0,0,0,0.3)'
  });

  toast.textContent = `${title}: ${content}`;
  document.body.appendChild(toast);

  setTimeout(() => {
    document.body.removeChild(toast);
    if (callback) callback();
  }, 2000);
}

xs.customToast(mobileToast);

Funciones de optimización móvil:

  • Posicionamiento en la parte inferior (fachada a la mano)
  • Ancho basado en porcentaje (máximo 80%)
  • Duración más corta (2 segundos)
  • Objetivos de toque más grandes
  • Sin superposición (no bloqueante)

API Reference

customToast(toastFunction)

Sets a custom toast notification function for the spreadsheet instance.

Parameters:

  • toastFunction (Function | null): Custom toast function with signature (title, content, callback) => void
    • Pass null to restore default toast behavior

Returns:

  • The spreadsheet instance (for method chaining)

Example:

// Set custom toast
xs.customToast(myToastFunction);

// Restore default
xs.customToast(null);

// Method chaining
xs.customToast(myToast)
  .loadData(data)
  .setActiveSheet(0);

Best Practices

1. Always Handle the Callback

Ensure you call the callback function if provided, as it may contain important cleanup or continuation logic:

function myToast(title, content, callback) {
  // ... show toast ...
  if (callback) callback();  // ✅ Always call
}

2. Notificaciones no bloqueantes

Para una mejor experiencia de usuario, usa notificaciones tipo toast no bloqueantes en lugar de alertas modales:

// ❌ Blocks user interaction
alert(`${title}: ${content}`);

// ✅ Non-blocking
showToastNotification(title, content);

3. Duración apropiada

Elige duraciones automáticas de descarte apropiadas según la longitud del contenido:

const duration = content.length > 50 ? 5000 : 3000;
setTimeout(remove, duration);

4. Accesibilidad

Asegúrate de que tu toast personalizado sea accesible:

toast.setAttribute('role', 'alert');
toast.setAttribute('aria-live', 'polite');
toast.setAttribute('aria-atomic', 'true');

5. Manejo de errores

Envuelve tu función de toast en try-catch para evitar que rompa la hoja de cálculo:

xs.customToast((title, content, callback) => {
  try {
    // Your toast implementation
    myCustomToast(title, content);
  } catch (error) {
    console.error('Toast error:', error);
  } finally {
    if (callback) callback();
  }
});

6. Limpieza de recursos

Siempre limpia los elementos DOM y los listeners de eventos:

function myToast(title, content, callback) {
  const toast = document.createElement('div');
  // ... setup toast ...

  const remove = () => {
    document.body.removeChild(toast);
    // Clean up any event listeners
    toast.onclick = null;
    if (callback) callback();
  };

  document.body.appendChild(toast);
  setTimeout(remove, 3000);
}

7. Restaurar por defecto cuando sea necesario

Proporcione una manera de restaurar el comportamiento predeterminado de las notificaciones emergentes:

// Set custom toast
xs.customToast(myToast);

// Later, restore default
xs.customToast(null);

Troubleshooting

Toast Not Showing

Problem: Custom toast function is called but nothing appears.

Solutions:

  1. Check z-index values (ensure they’re higher than spreadsheet elements)
  2. Verify the toast element is appended to document.body
  3. Check browser console for JavaScript errors

Callback Not Working

Problem: Operations after toast don’t execute.

Solution: Ensure you’re calling the callback function:

if (callback) callback();  // Don't forget this!

Fugas de Memoria

Problema: La página se vuelve lenta después de muchas notificaciones emergentes.

Solución: Limpiar los elementos DOM y los oyentes de eventos:

const remove = () => {
  document.body.removeChild(toast);
  toast.onclick = null;  // Remove event listeners
  if (callback) callback();
};

Problemas de Pantalla Móvil

Problema: La notificación parece mal en dispositivos móviles.

Soluciones:

  1. Usa anchos en porcentajes: maxWidth: '80%'
  2. Add viewport meta tag: <meta name="viewport" content="width=device-width, initial-scale=1">
  3. Usa tamaños de fuente relativos: fontSize: '14px' en lugar de píxeles fijos
Función de Descarga Personalizada para GridJs