Saltar al contenido principal

Crea pagias con tu HTML, CSS y JAVASCRIPT personalizado

En ocasiones puedes llegar a necesitar crear una página con un diseño personalizado, o con una funcionalidad muy concreta que no ofrece Totalum por defecto.

Por esto es tan útil esta sección, porque te deja insertar tu propio código HTML, CSS y Javascript, e incluso usar librarias como react.js o vue.js sin límites.

Además desde tu código personalizado html puedes acceder a TotalumSdk, lo que permite que puedas fácilmente leer, filtrar, editar, crear y eliminar datos de tu base de datos de Totalum. También te permite crear pdf, subir documentos, etc.

Inserta tu código personalizado​

En el video anterior se explica paso por paso como crear una página con código personalizado, pero aquí te dejamos los pasos resumidos:

  • Entra en la sección de configuración del menú lateral. y luego en Códigos html/css/js personalizados.

  • Introduce un nombre para tu página, y luego el código HTML, CSS y Javascript que quieras que se ejecute en tu página.

  • Elije donde quieres añadir el código personalizado, como página entera, arriva de la tabla o como elemento extandido.

Obteniendo datos desde tu código personalizado​

En el ejemplo de html verás que se instancia la libraria totalumSdk, con la que podrás leer, filtrar, editar, crear y eliminar datos de tu base de datos de Totalum.


    const token=localStorage.getItem('token');

    var totalumClient = new totalumSdk.TotalumApiSdk({
          token:{
              accessToken: token
          }
    });

    const tableElementName = 'your-table-name'; // replace with your table name

    //this is just an example of totalumSdk getItems
    const result = totalumClient.crud.getItems(tableElementName, {}).then((result) => {
      const items = result.data.data;
      console.log("THE ITEMS", items);
    });

Puedes usar el "totalumClient" para ejecutar cualquier función de totalumSdk, más información en la sección de totalumSdk de la documentación.

Obtener los datos de la página actual desde tu código personalizado​

Puedes obtener los datos de la página actual desde tu código personalizado, para ello puedes usar el siguiente código:

    if (window.context) {
      window.context.subscribeToChanges(() => {
        console.log('THE CONTEXT', window.context.data)
        // add your code here
      });
    }

  • window.context.data contiene los datos de la página actual. Para ver la estructura, puedes realizar un console.log(window.context.data)

  • window.context.subscribeToChanges es una función que te permite suscribirte a los cambios de la página actual. Cada vez que se actualicen los datos de la página, se ejecutará la función que le pases como argumento.

Cada vez que el usuario añada, edite y elimine un registro, o que realice un filtrado, se ejecutara la acción de subscribeToChanges.

Actualizar formulario des de tu código personalizado lateral​

Si des de el panel lateral realizas un cambio a la base de datos mediante la api o el sdk, y quieres que se actualice el formulario actual para evitar perder los datos al guardar puedes hacer lo siguiente:

    window?.context?.updateForm();

Añade este código después de realizar tus operaciones de actualización en la base de datos. Recuerda que para que funcione correctamente debes esperar a que la operación de actualización en la base de datos haya finalizado.

Ten en cuenta de que como se va a actualizar el formulario, se perderán los cambios no guardados.