Namespace: cq-views

WebComponents. cq-views

Views web component <cq-views>.

This web component has two functions. The first is displaying available views in a menu. The second is providing a views dialog for entering a new view.


<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


<static> Views#connectedCallback( [params])

Initialize a views menu

Name Type Argument Description
params Object <optional>

Parameters to control behavior of the menu

Name Type Argument Default Description
viewObj Object <optional>

Specify the object which contains the "views" objects. If omitted, will create one.

nameValueStore CIQ.NameValueStore <optional>

Specify the storage class. If omitted, will use CIQ.NameValueStore. See example for storage class function signatures and CB requirements.

renderCB Object <optional>

callback executed on menu after rendering. Takes the menu as argument.

cb Object <optional>

Get a callback when the nameValueStore has retrieved the data.

  • 4.1.0 ViewMenu helper has been deprecated. Please call $("cq-views")[0].initialize() now.


Have the views web component menus use a different storage source:

// Add it to the 'parameters.nameValueStore' like so:

$("cq-views").each(function () {
	this.initialize({ nameValueStore: new MyNameValueStore() });

//And make sure you create your own MyNameValueStore functions in the following format:

MyNameValueStore = function () {};

MyNameValueStore.prototype.set = function (field, value, cb) {
	// Add code here to send the view object ('value') to your repository and store under a key of 'field'
	if (cb) cb(errorCode);

MyNameValueStore.prototype.get = function (field, cb) {
	// Add code here to get the views object for key 'field' from your repository and rerun it in the callback.
	if (cb) cb(errorCode, yourViewObject);

MyNameValueStore.prototype.remove = function (field, cb) {
	// Add code here to remove the view object under the key 'field' from your repository
	if (cb) cb(errorCode);

Run this at any time to reload the drop down with the latest stored data:
(Useful if you are sharing the data with other applications that may also be modifying it real time.)

$("cq-views").each(function () {
	var self = this;
	this.params.nameValueStore.get("stx-views", function (err, obj) {
		if (!err && obj) self.params.viewObj.views = obj;
		else self.params.viewObj.views = { views: [] };
		if (self.params.cb);

<static> Views#renderMenu()

Creates the menu. You have the option of coding a hardcoded HTML menu and just using CIQ.UI.ViewsMenu for processing stxtap attributes, or you can call renderMenu() to automatically generate the menu.