Post Widget JAQL And Refresh Embedded Widget To Show Results

[intapiuser]

Question: How can I update an embedded widget using a JAQL query and post to /jaql using sisenseJS?

Answer:

JAQL is just the syntax for querying data - it is not inherently bound to any specific widget or dashboard, which in turn means that executing any JAQL query has no affect on any widgets or dashboards, just like executing a SQL query against MySQL would not affect any web components that visualize data based on that same MySQL.

To make a widget show data from a different query, you need to update that widget's metadata. and then refresh it. But before diving into how that's done, it's important to clarify your last sentence: "just for the local user":

• If you mean the changes should be applied only to one given user and not other users who can view the same dashboard, but persisted for these users, hen you do want to have those changes saved. Each user has their own instance of a dashboard - and changes they make are not reflect to other user, with the exception of the dashboard's owner who can make changes and re-publish the dashboard to apply these changes to all users with whom the dashboard is shared.
• If you mean these changes should apply only immediately, for a given person looking at the widget, and not persist upon refresh of the page, then you would make changes to the widget's metadata  on the client side (no REST calls required) and make it reload, and below is an example of how that can be done

And this is a simple and crude example of how you could change a widget's metadata in runtime and make it re-render with new data, on client only:

prism.on('beforemenu', (ev, args) => {
    // we want to add an item to a specific menu - widget in dashboard
    if (args.settings.name === 'widgetindashboard') {
        // save the widget instance to use in the closure
        const widget = args.settings.scope.widget;
        // add a button to the menu
        args.settings.items.push({
            command: {
                title: 'Remove brand',
                canExecute: () => { return true; },
                execute: () => {
                    // Get the columns panel
                    const panel = widget.metadata.panel('columns');
                    // Find the index of the 'brand' column in the panel
                    const idxToRemove = panel.items.findIndex(i => i.jaql.title == 'Brand')
                    // remove the item
                    panel.items.splice(idxToRemove, 1)
                    // refresh the widget, without saving these changes
                    widget.refresh();
                }
            }
        });
    }
});

In this example the change is done via a menu item added to the "widgetindashboard" menu but of course as long as you have the widget object accessible you could implement similar logic anywhere else.