Create Custom HTML, CSS, and JavaScript Pages

Sometimes you may need to create a page with a custom design or a very specific functionality that Totalum does not offer by default.

This is why this section is so useful, because it allows you to insert your own HTML, CSS, and JavaScript code, and even use libraries like react.js or vue.js without limits.

Additionally, from your custom HTML code you can access TotalumSdk, which allows you to easily read, filter, edit, create and delete data from your Totalum database. It also allows you to create PDFs, upload documents, etc.

Insert Your Custom Code

• Go to the settings section of the side menu, and then to Custom HTML/CSS/JS Codes.

• Enter a name for your page, and then the HTML, CSS, and JavaScript code that you want to run on your page.

• Choose where you want to add the custom code, such as the entire page, above the table, or as an expanded element.

Getting Data from Your Custom Code

In the HTML example, you will see that the totalumSdk library is instantiated, which allows you to read, filter, edit, create, and delete data from your Totalum database.

    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);
    });

You can use the "totalumClient" to execute any function of totalumSdk, more information in the totalumSdk section of the documentation.

Getting Data from the Current Page from Your Custom Code

You can get the data from the current page from your custom code, for this you can use the following code:

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

• window.context.data contains the data of the current page. To see the structure, you can do a console.log(window.context.data)

• window.context.subscribeToChanges is a function that allows you to subscribe to changes in the current page. Every time the page data is updated, the function you pass as an argument will be executed.

Every time the user adds, edits, or deletes a record, or performs a filtering operation, the subscribeToChanges action will be executed.

Updating the Form from Your Custom Code

If you make a change to the database from the side panel using the API or SDK, and you want the current form to be updated to avoid losing data when saving you can do the following:

    window?.context?.updateForm();

Add this code after performing your database update operations. Remember that for it to work correctly, you must wait for the database update operation to complete.

Keep in mind that since the form will be updated, unsaved changes will be lost.