# Updating Visualizations with Scripted Panels

**URL:** <https://community.siren.io/t/updating-visualizations-with-scripted-panels/709>\
**Category:** Siren Platform/Investigate Tech Support Community\
**Created:** [August 21, 2024, 1:56pm UTC](https://community.siren.io/t/updating-visualizations-with-scripted-panels/709 "2024-08-21T13:56:22Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![trevor\_cory](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.siren.io/trevor_cory/32/300_2.png) [@trevor\_cory](https://community.siren.io/u/trevor_cory)\
**Post date:** [August 21, 2024, 1:56pm UTC](https://community.siren.io/t/updating-visualizations-with-scripted-panels/709/1 "2024-08-21T13:56:22Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Manu\_Agarwal](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.siren.io/manu_agarwal/32/120_2.png) [@Manu\_Agarwal](https://community.siren.io/u/Manu_Agarwal)\
**Post date:** [August 21, 2024, 2:28pm UTC](https://community.siren.io/t/updating-visualizations-with-scripted-panels/709/2 "2024-08-21T14:28:02Z")

</div>

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](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

---

<div class="post-metadata">

**Author:** ![trevor\_cory](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.siren.io/trevor_cory/32/300_2.png) [@trevor\_cory](https://community.siren.io/u/trevor_cory)\
**Post date:** [August 27, 2024, 4:01pm UTC](https://community.siren.io/t/updating-visualizations-with-scripted-panels/709/3 "2024-08-27T16:01:09Z")

</div>

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

```auto
...
// 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

---

<div class="post-metadata">

**Author:** ![trevor\_cory](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.siren.io/trevor_cory/32/300_2.png) [@trevor\_cory](https://community.siren.io/u/trevor_cory)\
**Post date:** [August 27, 2024, 10:49pm UTC](https://community.siren.io/t/updating-visualizations-with-scripted-panels/709/4 "2024-08-27T22:49:59Z")

</div>

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:

```auto
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:

```auto
...
// 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);
});

```