@disy/cadenza.js 1.2.0 → 1.4.0

package/cadenza.d.ts

@@ -37,6 +37,10 @@ export function cadenza(baseUrl: string, options?: {
  * @property {string} workbookId - The ID of the workbook
  * @property {string} viewId - The ID of the view
  */
+/**
+ * @typedef PageSource - A well-known Cadenza page
+ * @property {'welcome'} page - The name of the page (Only `"welcome"` is currently supported.)
+ */
 /** @typedef {EmbeddingTargetId | WorkbookKey} WorkbookSource - A workbook source */
 /** @typedef {EmbeddingTargetId | WorksheetKey} WorksheetSource - A worksheet source */
 /** @typedef {EmbeddingTargetId | WorkbookViewKey} WorkbookViewSource - A workbook view source */
@@ -58,6 +62,12 @@ export function cadenza(baseUrl: string, options?: {
  * _Note:_ The GeoJSON geometry type "GeometryCollection" is currently not supported.
  */
 /** @typedef {[number,number,number,number]} Extent - An array of numbers representing an extent: [minx, miny, maxx, maxy] */
+/**
+ * @typedef {string} MediaType - A media type
+ *
+ * See {@link https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types}
+ */
+/** @typedef {'columns' | 'values' | 'totals'} TablePart - A part of a table to export. */
 /**
  * _Notes:_
  * * Most public methods can be aborted using an [AbortSignal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal).
@@ -85,26 +95,30 @@ export class CadenzaClient {
     /** The iframe this client is using for embedding Cadenza. */
     get iframe(): HTMLIFrameElement | undefined;
     /**
-     * Show a workbook, worksheet or workbook view in an iframe.
+     * Show a page, workbook, worksheet or workbook view in an iframe.
      *
-     * @param {WorkbookSource | WorksheetSource | WorkbookViewSource} source - The source to show
+     * @param {PageSource | WorkbookSource | WorksheetSource | WorkbookViewSource} source - The source to show
      * @param {object} [options]
      * @param {UiFeature[]} [options.disabledUiFeatures] - Cadenza UI features to disable
+     * @param {boolean} [options.expandNavigator] - Indicates if the navigator should be expanded.
      * @param {boolean} [options.hideMainHeaderAndFooter] - Whether to hide the main Cadenza header and footer
      * @param {boolean} [options.hideWorkbookToolBar] - Whether to hide the workbook toolbar
      * @param {GlobalId} [options.highlightGlobalId] - The ID of an item to highlight / expand in the navigator
-     * @param {string} [options.mediaType] - Set to 'application/pdf' for views of type "JasperReports report"
+     * @param {String} [options.labelSet] - The name of a label set defined in the `basicweb-config.xml` (only supported for the welcome page)
+     * @param {MediaType} [options.mediaType] - Set to 'application/pdf' for views of type "JasperReports report"
      *     to show the report PDF directly, without any Cadenza headers or footers.
      * @param {OperationMode} [options.operationMode] - The mode in which a workbook should be operated
      * @param {AbortSignal} [options.signal] - A signal to abort the iframe loading
      * @return {Promise<void>} A Promise for when the iframe is loaded
      * @throws For invalid arguments
      */
-    show(source: WorkbookSource | WorksheetSource | WorkbookViewSource, { disabledUiFeatures, hideMainHeaderAndFooter, hideWorkbookToolBar, highlightGlobalId, mediaType, operationMode, signal, }?: {
+    show(source: PageSource | WorkbookSource | WorksheetSource | WorkbookViewSource, { disabledUiFeatures, expandNavigator, hideMainHeaderAndFooter, hideWorkbookToolBar, highlightGlobalId, labelSet, mediaType, operationMode, signal, }?: {
         disabledUiFeatures?: UiFeature[] | undefined;
+        expandNavigator?: boolean | undefined;
         hideMainHeaderAndFooter?: boolean | undefined;
         hideWorkbookToolBar?: boolean | undefined;
         highlightGlobalId?: string | undefined;
+        labelSet?: string | undefined;
         mediaType?: string | undefined;
         operationMode?: OperationMode | undefined;
         signal?: AbortSignal | undefined;
@@ -115,6 +129,7 @@ export class CadenzaClient {
      * @param {WorkbookViewSource} mapView - The workbook map view to show
      * @param {object} [options] - Options
      * @param {UiFeature[]} [options.disabledUiFeatures] - Cadenza UI features to disable
+     * @param {boolean} [options.expandNavigator] - Indicates if the navigator should be expanded.
      * @param {Geometry} [options.geometry] - A geometry to show on the map
      * @param {boolean} [options.hideMainHeaderAndFooter] - Whether to hide the main Cadenza header and footer
      * @param {boolean} [options.hideWorkbookToolBar] - Whether to hide the workbook toolbar
@@ -127,8 +142,9 @@ export class CadenzaClient {
      * @return {Promise<void>} A Promise for when the iframe is loaded
      * @throws For invalid arguments
      */
-    showMap(mapView: WorkbookViewSource, { disabledUiFeatures, geometry, hideMainHeaderAndFooter, hideWorkbookToolBar, highlightGlobalId, locationFinder, mapExtent, operationMode, useMapSrs, signal, }?: {
+    showMap(mapView: WorkbookViewSource, { disabledUiFeatures, expandNavigator, geometry, hideMainHeaderAndFooter, hideWorkbookToolBar, highlightGlobalId, locationFinder, mapExtent, operationMode, useMapSrs, signal, }?: {
         disabledUiFeatures?: UiFeature[] | undefined;
+        expandNavigator?: boolean | undefined;
         geometry?: Geometry | undefined;
         hideMainHeaderAndFooter?: boolean | undefined;
         hideWorkbookToolBar?: boolean | undefined;
@@ -139,6 +155,12 @@ export class CadenzaClient {
         useMapSrs?: boolean | undefined;
         signal?: AbortSignal | undefined;
     } | undefined): Promise<void>;
+    /**
+     * Expand/collapse the navigator.
+     *
+     * @param {boolean} expanded - The expansion state of the navigator
+     */
+    expandNavigator(expanded?: boolean): void;
     /**
      * Create a geometry.
      *
@@ -209,11 +231,13 @@ export class CadenzaClient {
      * * 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' (Excel)
      * * 'text/csv'
      * @param {object} options - Options
+     * @param {TablePart[]} [options.parts] - Table parts to export; If not specified, all parts are exported.
      * @param {AbortSignal} [options.signal] - A signal to abort the data fetching
      * @return {Promise<Response>} A Promise for the fetch response
      * @throws For invalid arguments
      */
-    fetchData(source: WorkbookViewSource, mediaType: MediaType, { signal }?: {
+    fetchData(source: WorkbookViewSource, mediaType: MediaType, { parts, signal }?: {
+        parts?: TablePart[] | undefined;
         signal?: AbortSignal | undefined;
     }): Promise<Response>;
     /**
@@ -229,10 +253,12 @@ export class CadenzaClient {
      * * 'text/csv'
      * @param {object} options - Options
      * @param {string} [options.fileName] - The file name to use; The file extension is appended by Cadenza.
+     * @param {TablePart[]} [options.parts] - Table parts to export; If not specified, all parts are exported.
      * @throws For invalid arguments
      */
-    downloadData(source: WorkbookViewSource, mediaType: MediaType, { fileName }: {
+    downloadData(source: WorkbookViewSource, mediaType: MediaType, { fileName, parts }: {
         fileName?: string | undefined;
+        parts?: TablePart[] | undefined;
     }): void;
     #private;
 }
@@ -328,6 +354,15 @@ export type WorkbookViewKey = {
      */
     viewId: string;
 };
+/**
+ * - A well-known Cadenza page
+ */
+export type PageSource = {
+    /**
+     * - The name of the page (Only `"welcome"` is currently supported.)
+     */
+    page: 'welcome';
+};
 /**
  * - A workbook source
  */
@@ -377,6 +412,10 @@ export type Extent = [number, number, number, number];
  * See {@link https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types}
  */
 export type MediaType = string;
+/**
+ * - A part of a table to export.
+ */
+export type TablePart = 'columns' | 'values' | 'totals';
 /**
  * - A Cadenza `postMessage()` event
  */

package/cadenza.js

@@ -43,6 +43,10 @@ globalThis.cadenza = Object.assign((/** @type Parameters<cadenza> */ ...args) =>
  * @property {string} workbookId - The ID of the workbook
  * @property {string} viewId - The ID of the view
  */
+/**
+ * @typedef PageSource - A well-known Cadenza page
+ * @property {'welcome'} page - The name of the page (Only `"welcome"` is currently supported.)
+ */
 /** @typedef {EmbeddingTargetId | WorkbookKey} WorkbookSource - A workbook source */
 /** @typedef {EmbeddingTargetId | WorksheetKey} WorksheetSource - A worksheet source */
 /** @typedef {EmbeddingTargetId | WorkbookViewKey} WorkbookViewSource - A workbook view source */
@@ -64,6 +68,12 @@ globalThis.cadenza = Object.assign((/** @type Parameters<cadenza> */ ...args) =>
  * _Note:_ The GeoJSON geometry type "GeometryCollection" is currently not supported.
  */
 /** @typedef {[number,number,number,number]} Extent - An array of numbers representing an extent: [minx, miny, maxx, maxy] */
+/**
+ * @typedef {string} MediaType - A media type
+ *
+ * See {@link https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types}
+ */
+/** @typedef {'columns' | 'values' | 'totals'} TablePart - A part of a table to export. */
 /**
  * _Notes:_
  * * Most public methods can be aborted using an [AbortSignal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal).
@@ -133,33 +143,42 @@ export class CadenzaClient {
         return /** @type {HTMLIFrameElement} */ (iframe);
     }
     /**
-     * Show a workbook, worksheet or workbook view in an iframe.
+     * Show a page, workbook, worksheet or workbook view in an iframe.
      *
-     * @param {WorkbookSource | WorksheetSource | WorkbookViewSource} source - The source to show
+     * @param {PageSource | WorkbookSource | WorksheetSource | WorkbookViewSource} source - The source to show
      * @param {object} [options]
      * @param {UiFeature[]} [options.disabledUiFeatures] - Cadenza UI features to disable
+     * @param {boolean} [options.expandNavigator] - Indicates if the navigator should be expanded.
      * @param {boolean} [options.hideMainHeaderAndFooter] - Whether to hide the main Cadenza header and footer
      * @param {boolean} [options.hideWorkbookToolBar] - Whether to hide the workbook toolbar
      * @param {GlobalId} [options.highlightGlobalId] - The ID of an item to highlight / expand in the navigator
-     * @param {string} [options.mediaType] - Set to 'application/pdf' for views of type "JasperReports report"
+     * @param {String} [options.labelSet] - The name of a label set defined in the `basicweb-config.xml` (only supported for the welcome page)
+     * @param {MediaType} [options.mediaType] - Set to 'application/pdf' for views of type "JasperReports report"
      *     to show the report PDF directly, without any Cadenza headers or footers.
      * @param {OperationMode} [options.operationMode] - The mode in which a workbook should be operated
      * @param {AbortSignal} [options.signal] - A signal to abort the iframe loading
      * @return {Promise<void>} A Promise for when the iframe is loaded
      * @throws For invalid arguments
      */
-    show(source, { disabledUiFeatures, hideMainHeaderAndFooter, hideWorkbookToolBar, highlightGlobalId, mediaType, operationMode, signal, } = {}) {
+    show(source, { disabledUiFeatures, expandNavigator, hideMainHeaderAndFooter, hideWorkbookToolBar, highlightGlobalId, labelSet, mediaType, operationMode, signal, } = {}) {
         this.#log('CadenzaClient#show', source);
         if (mediaType) {
             assertSupportedMediaType(mediaType, [MediaType.PDF]);
         }
+        if (labelSet) {
+            assert(typeof source !== 'string' &&
+                'page' in source &&
+                source.page === 'welcome', 'labelSet is only supported on the welcome page');
+        }
         const params = createParams({
             disabledUiFeatures,
+            expandNavigator,
             hideMainHeaderAndFooter,
             hideWorkbookToolBar,
             highlightGlobalId,
-            operationMode,
+            labelSet,
             mediaType,
+            operationMode,
             webApplication: this.#webApplication,
         });
         return this.#show(resolvePath(source), params, signal);
@@ -170,6 +189,7 @@ export class CadenzaClient {
      * @param {WorkbookViewSource} mapView - The workbook map view to show
      * @param {object} [options] - Options
      * @param {UiFeature[]} [options.disabledUiFeatures] - Cadenza UI features to disable
+     * @param {boolean} [options.expandNavigator] - Indicates if the navigator should be expanded.
      * @param {Geometry} [options.geometry] - A geometry to show on the map
      * @param {boolean} [options.hideMainHeaderAndFooter] - Whether to hide the main Cadenza header and footer
      * @param {boolean} [options.hideWorkbookToolBar] - Whether to hide the workbook toolbar
@@ -182,13 +202,14 @@ export class CadenzaClient {
      * @return {Promise<void>} A Promise for when the iframe is loaded
      * @throws For invalid arguments
      */
-    async showMap(mapView, { disabledUiFeatures, geometry, hideMainHeaderAndFooter, hideWorkbookToolBar, highlightGlobalId, locationFinder, mapExtent, operationMode, useMapSrs, signal, } = {}) {
+    async showMap(mapView, { disabledUiFeatures, expandNavigator, geometry, hideMainHeaderAndFooter, hideWorkbookToolBar, highlightGlobalId, locationFinder, mapExtent, operationMode, useMapSrs, signal, } = {}) {
         this.#log('CadenzaClient#showMap', mapView, geometry);
         if (geometry) {
             assertValidGeometryType(geometry.type);
         }
         const params = createParams({
             disabledUiFeatures,
+            expandNavigator,
             hideMainHeaderAndFooter,
             hideWorkbookToolBar,
             highlightGlobalId,
@@ -201,6 +222,15 @@ export class CadenzaClient {
         await this.#show(resolvePath(mapView), params, signal);
         this.#postEvent('setGeometry', { geometry });
     }
+    /**
+     * Expand/collapse the navigator.
+     *
+     * @param {boolean} expanded - The expansion state of the navigator
+     */
+    expandNavigator(expanded = true) {
+        this.#log('CadenzaClient#expandNavigator', expanded);
+        this.#postEvent('expandNavigator', { expandNavigator: Boolean(expanded) });
+    }
     /**
      * Create a geometry.
      *
@@ -366,14 +396,15 @@ export class CadenzaClient {
      * * 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' (Excel)
      * * 'text/csv'
      * @param {object} options - Options
+     * @param {TablePart[]} [options.parts] - Table parts to export; If not specified, all parts are exported.
      * @param {AbortSignal} [options.signal] - A signal to abort the data fetching
      * @return {Promise<Response>} A Promise for the fetch response
      * @throws For invalid arguments
      */
-    fetchData(source, mediaType, { signal } = {}) {
+    fetchData(source, mediaType, { parts, signal } = {}) {
         this.#log('CadenzaClient#fetchData', source, mediaType);
         assertSupportedMediaType(mediaType);
-        const params = createParams({ mediaType });
+        const params = createParams({ mediaType, parts });
         return this.#fetch(resolvePath(source), params, signal);
     }
     async #fetch(
@@ -406,12 +437,13 @@ export class CadenzaClient {
      * * 'text/csv'
      * @param {object} options - Options
      * @param {string} [options.fileName] - The file name to use; The file extension is appended by Cadenza.
+     * @param {TablePart[]} [options.parts] - Table parts to export; If not specified, all parts are exported.
      * @throws For invalid arguments
      */
-    downloadData(source, mediaType, { fileName }) {
+    downloadData(source, mediaType, { fileName, parts }) {
         this.#log('CadenzaClient#downloadData', source, mediaType);
         assertSupportedMediaType(mediaType);
-        const params = createParams({ fileName, mediaType });
+        const params = createParams({ fileName, mediaType, parts });
         this.#download(resolvePath(source), params);
     }
     #download(/** @type string */ path, /** @type URLSearchParams */ params) {
@@ -441,11 +473,16 @@ export class CadenzaClient {
     }
 }
 function resolvePath(
-/** @type WorkbookSource | WorksheetSource | WorkbookViewSource */ source) {
+/** @type PageSource | WorkbookSource | WorksheetSource | WorkbookViewSource */ source) {
     if (typeof source === 'string') {
         assert(validEmbeddingTargetId(source), `Invalid embedding target ID: ${source}`);
         return `/w/${source}`;
     }
+    else if ('page' in source) {
+        const page = source.page;
+        assert(validPageName(page), `Invalid page name: ${page}`);
+        return `/public/pages/${page}`;
+    }
     else {
         const { repositoryName, workbookId } = source;
         assert(validRepositoryName(repositoryName), `Invalid repository name: ${repositoryName}`);
@@ -478,6 +515,9 @@ function validUrl(/** @type string */ value) {
         return false;
     }
 }
+function validPageName(/** @type string */ value) {
+    return ['welcome'].includes(value);
+}
 function validEmbeddingTargetId(/** @type string */ value) {
     return /^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(value);
 }
@@ -512,17 +552,15 @@ function validGeometryType(/** @type string */ value) {
         'MultiPolygon',
     ].includes(value);
 }
+function validTablePart(/** @type TablePart */ value) {
+    return ['columns', 'values', 'totals'].includes(value);
+}
 function validOperationMode(/** @type string */ value) {
     return ['normal', 'simplified'].includes(value);
 }
 function validUiFeature(/** @type string */ value) {
     return ['workbook-design', 'workbook-view-management'].includes(value);
 }
-/**
- * @typedef {string} MediaType - A media type
- *
- * See {@link https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types}
- */
 const MediaType = /** @type {Record<string, MediaType>} */ {
     CSV: 'text/csv',
     EXCEL: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
@@ -532,27 +570,30 @@ const MediaType = /** @type {Record<string, MediaType>} */ {
 function assertSupportedMediaType(
 /** @type MediaType */ type, 
 /** @type MediaType[] */ supportedTypes = Object.values(MediaType)) {
-    return assert(supportedTypes.includes(type), `Invalid media type: ${type}`);
+    assert(supportedTypes.includes(type), `Invalid media type: ${type}`);
 }
 /**
  * @param {object} params - Options
  * @param {string} [params.action]
  * @param {UiFeature[]} [params.disabledUiFeatures]
+ * @param {boolean} [params.expandNavigator]
  * @param {string} [params.fileName]
  * @param {GeometryType} [params.geometryType]
  * @param {boolean} [params.hideMainHeaderAndFooter]
  * @param {boolean} [params.hideWorkbookToolBar]
  * @param {GlobalId} [params.highlightGlobalId]
+ * @param {string} [params.labelSet]
  * @param {string} [params.locationFinder]
  * @param {Extent} [params.mapExtent]
- * @param {string} [params.mediaType]
+ * @param {MediaType} [params.mediaType]
  * @param {number} [params.minScale]
  * @param {OperationMode} [params.operationMode]
+ * @param {TablePart[]} [params.parts]
  * @param {boolean} [params.useMapSrs]
  * @param {ExternalLinkKey} [params.webApplication]
  * @return {URLSearchParams}
  */
-function createParams({ action, fileName, geometryType, hideMainHeaderAndFooter, hideWorkbookToolBar, highlightGlobalId, locationFinder, mapExtent, mediaType, minScale, useMapSrs, webApplication, operationMode, disabledUiFeatures, }) {
+function createParams({ action, expandNavigator, fileName, geometryType, hideMainHeaderAndFooter, hideWorkbookToolBar, highlightGlobalId, labelSet, locationFinder, mapExtent, mediaType, minScale, parts, useMapSrs, webApplication, operationMode, disabledUiFeatures, }) {
     if (disabledUiFeatures) {
         disabledUiFeatures.forEach((feature) => assert(validUiFeature(feature), `Invalid UI feature: ${feature}`));
     }
@@ -562,21 +603,27 @@ function createParams({ action, fileName, geometryType, hideMainHeaderAndFooter,
     if (operationMode) {
         assert(validOperationMode(operationMode), `Invalid operation mode: ${operationMode}`);
     }
+    if (parts) {
+        parts.forEach((part) => assert(validTablePart(part), `Invalid table part: ${part}`));
+    }
     return new URLSearchParams({
         ...(action && { action }),
         ...(disabledUiFeatures && {
             disabledUiFeatures: disabledUiFeatures.join(),
         }),
+        ...(expandNavigator && { expandNavigator: 'true' }),
         ...(fileName && { fileName }),
         ...(geometryType && { geometryType }),
         ...(hideMainHeaderAndFooter && { hideMainHeaderAndFooter: 'true' }),
         ...(hideWorkbookToolBar && { hideWorkbookToolBar: 'true' }),
         ...(highlightGlobalId && { highlightGlobalId }),
+        ...(labelSet && { labelSet }),
         ...(locationFinder && { locationFinder }),
         ...(mapExtent && { mapExtent: mapExtent.join() }),
         ...(mediaType && { mediaType }),
         ...(minScale && { minScale: String(minScale) }),
         ...(operationMode && { operationMode }),
+        ...(parts && { parts: parts.join() }),
         ...(useMapSrs && { useMapSrs: 'true' }),
         ...(webApplication && {
             webApplicationLink: webApplication.externalLinkId,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@disy/cadenza.js",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "license": "Apache-2.0",
   "repository": "github:DisyInformationssysteme/cadenza.js",
   "type": "module",
@@ -11,6 +11,7 @@
     "cadenza.js",
     "cadenza.d.ts",
     "CHANGELOG.md",
+    "sandbox.cjs",
     "sandbox.html"
   ],
   "scripts": {

package/sandbox.cjs

@@ -0,0 +1,7 @@
+const { execSync } = require('child_process');
+const { URL } = require('url');
+
+const DEFAULT_CADENZA_URL = 'http://localhost:8080/cadenza';
+const cadenzaUrl = new URL((process.argv[2] === '--cadenza-url' && process.argv[3]) || process.env.CADENZA_URL || DEFAULT_CADENZA_URL);
+
+execSync(`npx --yes http-server -a localhost -c-1 -d false --proxy ${cadenzaUrl.origin} --proxy-options.headers.Origin ${cadenzaUrl.origin} -o /sandbox.html${cadenzaUrl.pathname !== '/' ? `?contextPath=${cadenzaUrl.pathname}` : ''}`, { stdio: 'inherit' });

package/sandbox.html

@@ -41,7 +41,7 @@
     label {
       font-weight: 600;
     }
-    select, input:is(:not([type], [type=text])), textarea {
+    select, input:is(:not([type]), [type=text], [type=number]), textarea {
       display: block;
       width: 100%
     }
@@ -71,8 +71,9 @@
     const contextPath = new URLSearchParams(location.search).get('contextPath') ?? '';
     const cadenzaClient = cadenza(location.origin + contextPath, { iframe: 'iframe', debug: true });
     const actionHandlers = {
-      show ({ embeddingTargetId, hideMainHeaderAndFooter, hideWorkbookToolBar, jasperReportAsPdf, highlightGlobalId, operationMode, disabledUiFeatures }) {
+      show ({ embeddingTargetId, expandNavigator, hideMainHeaderAndFooter, hideWorkbookToolBar, jasperReportAsPdf, highlightGlobalId, operationMode, disabledUiFeatures }) {
         cadenzaClient.show(embeddingTargetId, {
+          expandNavigator: (expandNavigator === 'on'),
           hideMainHeaderAndFooter: (hideMainHeaderAndFooter === 'on'),
           hideWorkbookToolBar: (hideWorkbookToolBar === 'on'),
           highlightGlobalId,
@@ -81,6 +82,15 @@
           disabledUiFeatures: disabledUiFeatures && disabledUiFeatures.split(',')
         });
       },
+      showPage ({ page, expandNavigator, highlightGlobalId }) {
+        cadenzaClient.show({ page: page }, {
+          expandNavigator: (expandNavigator === 'on'),
+          highlightGlobalId
+        });
+      },
+      expandNavigator ({ expandNavigator }) {
+        cadenzaClient.expandNavigator(expandNavigator === 'on');
+      },
       showMap ({ embeddingTargetId, useMapSrs, geometry, mapExtent, locationFinder, highlightGlobalId }) {
         cadenzaClient.showMap(embeddingTargetId, {
           useMapSrs: useMapSrs === 'on',
@@ -106,13 +116,16 @@
           locationFinder
         });
       },
-      fetchData ({ embeddingTargetId, mediaType }) {
+      fetchData ({ embeddingTargetId, mediaType, parts }) {
         console.log('Inspect the fetchData() request in the devtools.');
-        cadenzaClient.fetchData(embeddingTargetId, mediaType);
+        cadenzaClient.fetchData(embeddingTargetId, mediaType, {
+          parts: parts && parts.split(',')
+        });
       },
-      downloadData ({ embeddingTargetId, mediaType, fileName }) {
+      downloadData ({ embeddingTargetId, mediaType, fileName, parts }) {
         cadenzaClient.downloadData(embeddingTargetId, mediaType, {
-          fileName
+          fileName,
+          parts: parts && parts.split(',')
         });
       }
     };
@@ -150,6 +163,8 @@
       <label for="action">Action</label>
       <select name="action" id="action">
         <option value="show">Show</option>
+        <option value="showPage">Show Page</option>
+        <option value="expandNavigator">Expand Navigator</option>
         <option value="showMap">Show Map</option>
         <option value="createGeometry">Create Geometry</option>
         <option value="editGeometry">Edit Geometry</option>
@@ -180,6 +195,12 @@
       Show Jasper Report as PDF
     </label>
   </div>
+  <div>
+    <label>
+      <input type="checkbox" name="expandNavigator">
+      Expand navigator tree
+    </label>
+  </div>
   <div>
     <label>
       <input type="checkbox" name="hideMainHeaderAndFooter">
@@ -208,6 +229,35 @@
   </div>
 </template>
 
+<template data-action="showPage">
+  <div>
+    <label for="page">Page *</label>
+    <select name="page" id="page" required>
+      <option>welcome</option>
+      <option>an-invalid-page-name</option>
+    </select>
+  </div>
+  <div>
+    <label>
+      <input type="checkbox" name="expandNavigator">
+      Expand navigator tree
+    </label>
+  </div>
+  <div>
+    <label for="highlightGlobalId">Highlighted Global ID</label>
+    <input name="highlightGlobalId" id="highlightGlobalId">
+  </div>
+</template>
+
+<template data-action="expandNavigator">
+  <div>
+    <label>
+      <input type="checkbox" name="expandNavigator">
+      Expand navigator tree
+    </label>
+  </div>
+</template>
+
 <template data-action="showMap">
   <div>
     <label for="embeddingTargetId">Embedding target ID of the map view *</label>
@@ -223,10 +273,6 @@
     <label for="geometry">Geometry (GeoJSON)</label>
     <textarea name="geometry" id="geometry" rows="5"></textarea>
   </div>
-  <div>
-    <label for="useMapSrs">Use map SRS</label>
-    <input type="checkbox" name="useMapSrs" id="useMapSrs" />
-  </div>
   <div>
     <label for="mapExtent">Map extent coordinates</label>
     <input name="mapExtent" id="mapExtent" placeholder="minX,minY,maxX,maxY">
@@ -246,6 +292,12 @@
     <label for="embeddingTargetId">Embedding target ID of the map view *</label>
     <input name="embeddingTargetId" id="embeddingTargetId" required>
   </div>
+  <div>
+    <label>
+      <input type="checkbox" name="useMapSrs">
+      Use map SRS
+    </label>
+  </div>
   <div>
     <label for="geometryType">Geometry type</label>
     <select name="geometryType" id="geometryType">
@@ -261,10 +313,6 @@
     <label for="minScale">Minimum Scale</label>
     <input type="number" name="minScale" id="minScale">
   </div>
-  <div>
-    <label for="useMapSrs">Use map SRS</label>
-    <input type="checkbox" name="useMapSrs" id="useMapSrs" />
-  </div>
   <div>
     <label for="mapExtent">Map extent coordinates</label>
     <input name="mapExtent" id="mapExtent" placeholder="minX,minY,maxX,maxY">
@@ -280,6 +328,12 @@
     <label for="embeddingTargetId">Embedding target ID of the map view *</label>
     <input name="embeddingTargetId" id="embeddingTargetId" required>
   </div>
+  <div>
+    <label>
+      <input type="checkbox" name="useMapSrs">
+      Use map SRS
+    </label>
+  </div>
   <div>
     <label for="geometry">Geometry (GeoJSON) *</label>
     <textarea name="geometry" id="geometry" rows="5" required></textarea>
@@ -288,10 +342,6 @@
     <label for="minScale">Minimum Scale</label>
     <input type="number" name="minScale" id="minScale">
   </div>
-  <div>
-    <label for="useMapSrs">Use map SRS</label>
-    <input type="checkbox" name="useMapSrs" id="useMapSrs" />
-  </div>
   <div>
     <label for="mapExtent">Map extent coordinates</label>
     <input name="mapExtent" id="mapExtent" placeholder="minX,minY,maxX,maxY">
@@ -307,6 +357,10 @@
     <label for="embeddingTargetId">Embedding target ID *</label>
     <input name="embeddingTargetId" id="embeddingTargetId" required>
   </div>
+  <div>
+    <label for="parts">Parts</label>
+    <input name="parts" id="parts" placeholder="columns,values,totals">
+  </div>
   <div>
     <label for="mediaType">Media type *</label>
     <select name="mediaType" id="mediaType" required>
@@ -327,6 +381,10 @@
     <label for="embeddingTargetId">Embedding target ID *</label>
     <input name="embeddingTargetId" id="embeddingTargetId" required>
   </div>
+  <div>
+    <label for="parts">Parts</label>
+    <input name="parts" id="parts" placeholder="columns,values,totals">
+  </div>
   <div>
     <label for="mediaType">Media type *</label>
     <select name="mediaType" id="mediaType" required>