Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.activeviam.com/llms.txt

Use this file to discover all available pages before exploring further.

Atoti UI reads a filters parameter from the dashboard URL’s hash. When present, the URL filters are merged into the loaded dashboard’s pinned filters and the dashboard opens marked as unsaved. This is useful for sharing a dashboard with specific filter values applied, instead of saving a filtered copy.
  • Filters in the URL replace any existing pinned filter on the same (dimensionName, hierarchyName). If the URL contains multiple filters for the same hierarchy, all are applied. The cube combines them at query time.
  • The dashboard opens marked as unsaved. The recipient can save their own copy using File > Save as.
  • If the filters parameter is missing or empty, the saved dashboard loads unchanged.
  • If the filters parameter is malformed, the dashboard loads without URL filters. A red banner notifies the recipient: “The filters from this link could not be applied. The dashboard is shown without them.” Diagnostic detail is written to console.warn.

​
URL format

A filters URL parameter is added to the URL of a dashboard as follows: 
https://example.com/#/dashboard/<id>?filters=<encoded>
The encoded value is produced from a Filter<"deserialized">[] through the following pipeline:
  1. Map serializeFilter over the array to get a Filter<"serialized">[].
  2. Call JSON.stringify on the resulting array.
  3. UTF-8 encode the JSON string with TextEncoder.
  4. gzip-compress the bytes using CompressionStream("gzip") (or fflate’s gzipSync in environments without native stream support).
  5. Base64-encode the compressed bytes using btoa, then convert to URL-safe form: replace + with -, / with _, and strip trailing = padding.

​
How to construct the URL

The following TypeScript function, encodeURLFilters, implements the encoding pipeline. It accepts deserialized filters and returns the encoded string ready to append to a dashboard URL.
The snippet uses the browser’s native CompressionStream (Chrome 80+, Firefox 113+, Safari 16.4+). In Node.js or older browsers, swap the compression block for fflate’s gzipSync.
import { type Filter, serializeFilter } from "@activeviam/atoti-ui-sdk";

/**
 * Encodes an array of filters as a URL-safe string for the `filters` hash parameter.
 * The pipeline is: serialize → JSON → gzip → URL-safe Base64.
 */
async function encodeURLFilters(
  filters: Filter<"deserialized">[],
): Promise<string> {
  const json = JSON.stringify(filters.map(serializeFilter));
  const bytes = new TextEncoder().encode(json);

  const source = new ReadableStream({
    start(controller) {
      controller.enqueue(bytes);
      controller.close();
    },
  });
  const compressedBuffer = await new Response(
    source.pipeThrough(new CompressionStream("gzip")),
  ).arrayBuffer();
  const compressed = new Uint8Array(compressedBuffer);

  let binary = "";
  for (const byte of compressed) {
    binary += String.fromCharCode(byte);
  }
  // URL-safe Base64 replaces `+` with `-` and `/` with `_`, and strips `=` padding.
  return btoa(binary)
    .replaceAll("+", "-")
    .replaceAll("/", "_")
    .replaceAll("=", "");
}

// Build a shareable dashboard URL.
async function buildDashboardURL(
  baseURL: string,
  dashboardId: string,
  filters: Filter<"deserialized">[],
): Promise<string> {
  const encoded = await encodeURLFilters(filters);
  return `${baseURL}/#/dashboard/${dashboardId}?filters=${encoded}`;
}
See also Share content for sharing a saved dashboard through the Share popup.