API Reference

Namespace: cq-views

WebComponents. cq-views

Views web component <cq-views>.

Displays a menu containing available saved chart views and provides a dialog for saving new views.


<cq-menu class="ciq-menu ciq-views collapse">
			<cq-heading>Saved Views</cq-heading>
				<template cq-view>
						<div class="ciq-icon ciq-close"></div>
			<cq-separator cq-partial></cq-separator>
					<cq-plus></cq-plus>Save View


Views#initialize( [params])

Initializes the views menu.

Name Type Argument Description
params object <optional>

Parameters used to initialize the menu.

Name Type Argument Default Description
viewObj object <optional>
{ views: [] }

Contains the menu items; that is, an array of objects that contain the specifications for saved views of the chart.

nameValueStore object <optional>

The class or constructor function that saves and retrieves the chart views by means of a name/value store. See the custom storage class example below. Defaults to the nameValueStore property of the chart configuration if available (see the Chart Configuration tutorial); otherwise, defaults to CIQ.NameValueStore.

renderCB object <optional>

A callback function executed on the menu after the menu has been rendered. Takes the menu as an argument.

cb object <optional>

A callback function called when the saved views have been retrieved from the name/value store. No arguments are passed to the callback function.

  • 3.0.7 Added the params.cb parameter.
  • 4.1.0 The ViewMenu helper has been deprecated. Call document.querySelector("cq-views").initialize() instead.

Create a custom name/value store for the cq-views web component.

// Set the custom name/value store as the storage location for the web component.
document.querySelector("cq-views").initialize({ nameValueStore: MyNameValueStore });

// Create the custom name/value store.
const MyNameValueStore = function () {};

// Create custom storage functions using the same signatures and callback requirements as those in CIQ.NameValueStore.
// For the cq-views web component, the data that is saved and retrieved is the array represented by params.viewObj.views.

MyNameValueStore.prototype.set = function (name, value, cb) {
	// Add code here to send the view object (value) to your repository and store it under the provided key (name).
	if (cb) cb(error);

MyNameValueStore.prototype.get = function (name, cb) {
	// Add code here to get the view object for the provided key (name) from your repository and pass it to the callback.
	cb(error, viewObj);

MyNameValueStore.prototype.remove = function (name, cb) {
	// Add code here to remove the view object associated with the provided key (name) from your repository.
	if (cb) cb(error);

Reload the drop-down menu with the latest stored data.
(Useful if you are sharing the data with other applications that may also be modifying the data in real time.)

let self = document.querySelector("cq-views");
self.params.nameValueStore.get("stx-views", function (err, obj) {
	if (!err && obj) self.params.viewObj.views = obj;
	else self.params.viewObj = { views: [] };
	if (self.params.cb) self.params.cb.call(self);


Creates the menu.