PAR Dashboard in UI Builder page - globalFilters seem to be ignored when exporting/printing

[David Hubbard]

Hi

I have managed to embed a PAR Dashboard component in a Viewport using UI Builder - with this I can inject filters into the dashboard (see pic below) - and when run within application workspace I can see the dashboard is filtered.

Two questions:

1) when actions are used from the shown dashboard - "Export" (to PDF or Powerpoint) or "Printer Friendly" - both of these ignore the filters - e.g. counts are across all records, rather than filtered.

2) is there a way to force a refresh from the app?  I don't see an option on the config (below) - but am considering added (say) a timestamp into the filters - which I could update to (possibly) force a refresh - but seems a bit of a sledgehammer.

UI Builder Dashboard Component Config

Once I load data I use a client script to inject the `globalFilters` link this.

function handler({api, event, helpers, imports}) {

    try {
        const { sysId } = api.context.props;

        const detail = event.payload.data.output.data;

        const ids = detail.items.map((r) => { return r.sys_id; });

        const globalFilters = {
            encodedQueries: {
                x_myscope_app_table1: `sys_id=${sysId}`,
                x_myscope_app_table2: `sys_idIN${ids.join()}`,
                x_myscope_app_table3: `table1_ref=${sysId}`,
                x_myscope_app_table4: `table1IN${ids.join()}`,
            }
        };

        api.setState('globalFilters', JSON.stringify(globalFilters));
        api.setState('dashboardId', 'b9c101f91b271a10357dc883604bcbfb');
        api.setState('loading', false);

    }
    catch (e) {
        console.error(`Error [ui-details]`, e, e.stack);
    }

}

[nityabans27]

Hi @David Hubbard ,

1. Export/Printer Friendly Actions Ignore Filters

• When using "Export to PDF/PowerPoint" or "Printer Friendly", the exported results ignore applied filters, showing unfiltered data.

Reason:
These actions likely invoke the original dashboard (not the embedded/filtered version) from the back-end, where dynamic runtime filters aren't passed.

Workaround Options:

• Consider using a custom export mechanism (e.g., script or Flow Designer logic).

• Submit an enhancement request if native support for exporting with dynamic filters is required.

---

2. Force Dashboard Refresh from the App

• You want to programmatically refresh the embedded dashboard.

• No native refresh option available in UI Builder config.

Possible Workaround:

• Use a dynamic filter like a timestamp or GUID, which you update to trigger a filter change – forcing a refresh.

  • Yes, it’s a bit of a "sledgehammer", but it can work.

Alternative Ideas:

• Re-render the component by toggling its visibility or using a state variable to simulate reloading.

[MaxMixali]

Quick diagnosis

• Works on screen, ignored on export/print? → the data components aren’t receiving the encoded query / conditions at export time.

• Why: Export/print uses a new render context; page state from Global Filters isn’t automatically reapplied.

---

Fast checklist (often enough)

1. Bind filters explicitly

   • On each Report/Data Visualization/PA widget in UIB, bind Filter conditions / Encoded query to the Global Filters output (e.g., {{globalFilters.appliedConditions}} or {{globalFilters.encodedQuery}} depending on the component).

   • Don’t rely on “page listens for filters” defaults—wire it.

2. Use URL params as source of truth

   • Add a URL parameter sink/source in the page so that when filters change, you push them to the URL (e.g., sysparm_query, gfq).

   • Then your widgets read from the URL param (not ephemeral client state). Exports/prints re-request the page with the same params → filters persist.

3. Turn on “Apply filter conditions”

   • For DV/Report components, ensure the property that applies external conditions is enabled and is actually bound.

If that still doesn’t stick, use one of the patterns below.

---

Pattern A — “Export view” with server-driven filters (most reliable)

Idea: Create a dedicated Export/Print view (variant of your UIB page) that reads filters from page parameters and rebuilds the query server-side.

Steps

1. In your main view, when user clicks Export/Print, run an Action that:

   • Reads globalFilters.appliedConditions (or encodedQuery).

   • Writes it into a URL param (e.g., sysparm_query), then navigates to the Export view (or opens it in a new window) with ?sysparm_query=<encoded_query>.

2. In the Export view:

   • Add a Server Script data resource that converts sysparm_query into the exact encoded query for your data source (or passes it straight through).

   • Bind every Report/PA/DV widget’s Filter/Encoded query to that server data resource output (not to Global Filters).

3. Trigger print/export to PDF on that view.

✅ Result: The export render uses the same encoded query coming from the URL → filters are honored.

---

Pattern B — Force binding from Global Filters → component input (no URL)

Idea: Avoid implicit listening; bind the Global Filter outputs directly into each component’s “Filter conditions” (or “Encoded query”) property.

Steps

1. Place Global Filters on the page.

2. Identify the output model from the Global Filters component:

   • Some components expect structured conditions (array of conditions).

   • Others expect encodedQuery (Glide query string).

3. On each visualization/report widget:

   • Bind the appropriate property to that output (e.g., {{globalFilters.encodedQuery}}).

4. When you export/print from the same view, add a UIB Action “Rebuild data” (or refresh) before calling print to ensure the component re-queries with the current binding.

⚠️ Limitation: If print/export spins up a separate render root without the client state, it may still miss the binding; in that case switch to Pattern A.

---

Special notes for

PA (Performance Analytics) / Reporting

• PA Time Series / PA Score widgets: Look for inputs like “Filter conditions”, “Encoded query”, or “Apply page filters”. Always bind explicitly.

• Classic Reports in UIB (Report viewer): The component typically takes encodedQuery. Feed it from URL param or server data resource.

• Data Visualization (ui-dv-*): Many accept a filter object or encoded query. Prefer encoded query for exports.

---

Example wiring (conceptual)

Global Filters → outputs:

• appliedConditions (object)

• encodedQuery (string)

Server Script data resource (Export view):

(function() {
var query = $sp.getParameter('sysparm_query') || '';
// Optionally validate/sanitize here
data.encodedQuery = query;
})();

Report/DV widget → properties:

• Encoded query: {{dataResource.data.encodedQuery}}

Button “Export” (main view) → Action sequence:

1. Set URL parameter: sysparm_query = {{globalFilters.encodedQuery}}

2. Open page: Export view (new tab or modal) with that param

3. (On Export view) Call Print/Export to PDF

---

Workarounds if you can’t change the page

• Use the underlying Report export endpoint with sysparm_query= and download the PDF/CSV directly (bypassing UIB print).

• For PA, generate a PA Snapshot or PA Report server-side using the same query/indicator and provide the export link.

---

Why this happens (short)

UIB Global Filters maintain client state; print/export often re-renders from a clean context that doesn’t inherit that state unless you bind via parameters or server data. Once you bind queries to URL or server data, export respects them.

[MaxMixali]

ServiceNow PAR Dashboard in UI Builder (Viewport) — Filters, Export, and Refresh

Overview
You embedded a PAR Dashboard component in a UI Builder Viewport and inject filters successfully. In Application Workspace you see the filtered dashboard, but:
1) Export to PDF/PowerPoint and Printer Friendly ignore the filters.
2) You want a reliable way to force a refresh from the embedding app.

Why Exports Ignore Filters
- The embedded dashboard applies filters in the client session (browser).
- Export/Print are server-side jobs that read the dashboard definition and its saved defaults, not the client-state filters injected by UI Builder.
- Result: Exports/Prints are unfiltered (or use default filters).

Solutions for Export/Print
Option A — Use PAR Export REST API with Filters
- Call: /api/now/pa/dashboard/<sys_id>/export
- Pass current filter as a parameter (e.g., sysparm_filter with an encoded query or component-specific filter JSON).
Example:
/api/now/pa/dashboard/abc123/export?sysparm_filter=assignment_group=ITSD&sysparm_format=pdf
Programmatic (server-side):
var r = new sn_ws.RESTMessageV2();
r.setHttpMethod('GET');
r.setEndpoint('/api/now/pa/dashboard/abc123/export?sysparm_filter=' + encodeURIComponent('assignment_group=ITSD'));
r.setRequestHeader('Accept','application/pdf');
var resp = r.execute();

- Expose your own “Export with Filters” button in UI Builder that reads the current filters and calls the API above.
- This is the only approach that guarantees filtered exports.

Option B — Snapshot Filter Sets (Saved Filters)
- Create Filter Sets/saved views on the dashboard with the desired filters.
- Export using those saved sets. Reliable for fixed, repeatable exports; less flexible for ad-hoc filters.

Option C — Override Native Buttons
- Hide/disable built-in Export/Print buttons in the embedded component.
- Provide custom buttons that:
1) Read current filter state from your page binding,
2) Call the PAR Export API with those filters,
3) Download the file.

Refreshing the Embedded Dashboard
- The component has no public refresh() method. It re-runs when bound filters change.
Clean Refresh Options:
A) Update any bound filter value (recommended pattern)
- Add a dummy field (e.g., refresh_key) to your filter object and set it to a new timestamp to force re-query.
Example:
state.filters = { ...state.filters, refresh_key: Date.now() }
B) Re-render the component by changing a parent container “key” or visibility
- Wrap the dashboard component and bind the container key to a reactive variable (e.g., state.refreshKey). Update it to force re-mount.
C) Page-level Action
- Create a UI Builder action (e.g., “Refresh Dashboard”) that updates the dummy filter value or triggers re-render of the section.

Production Best Practices
- In embedded scenarios, hide the native export controls and provide custom “Export (with filters)” using the PAR export API.
- Normalize your filters to an encoded query/JSON that you can append to the export call.
- Keep a “Refresh” button that updates a refresh_key on the filter binding or re-renders the component.

TL;DR
- Exports/Printer Friendly ignore injected filters because they run server-side without your client state.
- Use /api/now/pa/dashboard/<sys_id>/export with your filter as a parameter (custom buttons) to export filtered results.
- To refresh, change any bound filter value (e.g., inject a timestamp) or re-render the component; there is no native refresh() call.

[David Hubbard]

@MaxMixali hi,

Do you know if you can pass multiple filters using this approach? - as per my initial post - there are multiple tables referenced in the dashboard and therefore the filters I pass are a set of filters - one per table.