Updating Visualizations with Scripted Panels

Siren Platform/Investigate Tech Support Community
1

Say that I have a scripted panel with a checkbox and a submit button. When the box is checked and the user clicks submit, a field in the index is updated according to some logic embedded in the updateByQuery method of the sirenapi. I have a record table in my dashboard that shows the values of this field for each record, but it requires a refresh of the page to show the changes after clicking the submit button. Is there a Dashboard or Visualization method in the scripting API that can help in automatically updating the visualizations without a refresh?

2

Hi Trevor,

Yes you can use the method .applyState(); We have detailed documentation about how to use it here:
Building an interactive table:

https://docs.siren.io/siren-platform-user-guide/14.3/scripting/examples.html#_building_an_interactive_table

Please check and let me know how it goes.

Regards
Manu

3

Here is a draft of what I’m trying to do:

...
// Updates field values on index 
async function onSubmit(formData) {
  var selected = formData.get('boxChecked');

  if (selected) {
    await sirenapi.es.updateByQuery({
          index: 'my_index',
          body: {
            script: {
              source: `
                 // Logic goes here to change values of fields
                 // Separate visualizations need to reflect these changes upon submit.
              `,
              lang: 'painless'
            },
            query: {
              match_all: {}
            }
          }
        });
  } else {
    await sirenapi.es.updateByQuery({
        index: 'my_index',
        body: {
          script: {
            source: `
              // Logic goes here to change values back to initial state.
              // Separate visualizations need to reflect these changes too.
            `,
            lang: 'painless'
          },
          query: {
            match_all: {}
          }
        }
      });
  }

  // This should update the entire dashboard but it doesn't.
  currentDashboard.applyState();
}

sirenapi.Dashboard.getCurrentDashboard().then(dash => {
  const checkbox = currentVisualization.getHtmlCheckboxInputElement('boxChecked', 'Checkbox Name', false);
  const submit = currentVisualization.getHtmlSubmitButtonElement('Submit');
  const form = currentVisualization.getHtmlFormElement(onSubmit);

  form.appendChild(checkbox);
  form.appendChild(submit);
  currentVisualization.appendHtmlElement(form);
});

The .applyState() function doesn’t update the other visualizations (i.e., separate record tables and other charts) without a refresh of the dashboard page. I can’t find any other way to update the dashboard upon submit other than to generate a new filter every time, but that approach is clunky and doesn’t always work either.

Thanks for your help, as always.

TC

4

Update: I found a satisfactory solution with re-opening the current dashboard on every submit. I invoked the following redirectToDashboard() function at the end of my onSubmit() function:

async function redirectToDashboard() {
  const dashboardId = 'dashboard:<dashboard-id>';
  const dash = await sirenapi.Dashboard.fetchDashboardById(dashboardId);
  
  await dash.open();
}

The overall script is now like so:

...
// Re-opens dashboard
async function redirectToDashboard() {
  const dashboardId = 'dashboard:<dashboard-id>';
  const dash = await sirenapi.Dashboard.fetchDashboardById(dashboardId);
  
  await dash.open();
}

// Updates field values on index 
async function onSubmit(formData) {
  var selected = formData.get('boxChecked');

  if (selected) {
    await sirenapi.es.updateByQuery({
          index: 'my_index',
          body: {
            script: {
              source: `
                 // Logic goes here to change values of fields
                 // Separate visualizations need to reflect these changes upon submit.
              `,
              lang: 'painless'
            },
            query: {
              match_all: {}
            }
          }
        });
  } else {
    await sirenapi.es.updateByQuery({
        index: 'my_index',
        body: {
          script: {
            source: `
              // Logic goes here to change values back to initial state.
              // Separate visualizations need to reflect these changes too.
            `,
            lang: 'painless'
          },
          query: {
            match_all: {}
          }
        }
      });
  }

  // This updates the entire dashboard
  redirectToDashboard();
}

sirenapi.Dashboard.getCurrentDashboard().then(() => {
  const checkbox = currentVisualization.getHtmlCheckboxInputElement('boxChecked', 'Checkbox Name', false);
  const submit = currentVisualization.getHtmlSubmitButtonElement('Submit');
  const form = currentVisualization.getHtmlFormElement(onSubmit);

  form.appendChild(checkbox);
  form.appendChild(submit);
  currentVisualization.appendHtmlElement(form);
});
1 Like