Tabulator AJAX-like Loader for JSON object data source

Question

I'm currently utilising Tabulator 4.8 inside a custom NetSuite (suitelet) form, and it's working really well.

The reactive data feature is quite effective for what I'm doing which is a full replacement for NetSuite's Order Items page and subsequent purchase order creation.

However, when the user selects a large number of items to order, there is a delay while the data is processed inside the client script.

Purely for the user experience I would be able to grey out the screen with an "Ajax" like loader, but as the data source is a preloaded Javascript object, I don't believe the Tabulator Ajax Loader is an object.

From a suitescript point of view, the Suitelet loads all the required data as the page is loaded (server-side) then stores this as a JSON object in an inline html field.

Then the PageInit client script grabs the data and stores it in a client side variable for use in the table and subsequent actions performed.

Functionally it's great, no problems. I'd just love to be able to grey out the tabulator element with an animated gif loader while all the client side calculations are happening.

score 0 · Answer 1 · answered Feb 03 '22 at 18:16

Is what you are saying is that after displaying and selecting fields you go to process the selection you want a waiting indicator?

If so there are a number of ways to get that:

set the body cursor to wait until the processing is finished. document.querySelector('body').style.cursor = 'wait';
dynamically add any sort of waiting widget that you like using plain Javascript
add another inlineHTML field to your form that has the css for your waiting state and attach that to the body and set a class when waiting

If your waiting state is by making a call N/https.post on the client side you have promises there now in SS2 and async/await in SS2.1 so you can pretty easily manage the start and end of your procsessing while staying in Suitescript.

score 0 · Answer 2 · answered Feb 07 '22 at 14:26

"However, when the user selects a large number of items to order,"

This sounds to me like an ongoing concern and the same suitelet might be running for a while with many modifications ... are there any events in the Tabulator that you already hook into?

If not i would look at that. The api shows many callbacks options for different events and context that are based on data events, dom events and ajax events. http://tabulator.info/docs/3.5#callbacks-cell

For example (and note i'm using their jQuery versions here) you could hook into a render start to display and animation.

$("#example-table").tabulator({
    renderStarted:function(){
          toggleWaitScreen();
    },{
    renderStarted:function(){
          toggleWaitScreen();
    }
});

Oli Folkerd · Accepted Answer · 2022-03-08T23:40:22.503

I would suggest that you upgrade to Tabulator v5.1. It has been rebuilt with exactly this situation in mind.

You can now build out a Custom Module that hooks into the lifecycle events of the table. The new internal data manager will then display the loading spinner for you while you are accessing your data.

There is as luck would have it, already an example module for asynchronously querying a client side database, you can find full details on the Example Page

Tabulator AJAX-like Loader for JSON object data source

3 Answers3