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#initialize( [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 document.querySelector("cq-views").initialize() now.


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

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

	document.querySelector("cq-views").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.)

var 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 = { 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.