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.

Example

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

Methods


<static> Views#initialize( [params])

Initialize a views menu

Parameters:
Name Type Argument Description
params Object <optional>

Parameters to control behavior of the menu

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

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

nameValueStore CIQ.NameValueStore <optional>
CIQ.NameValueStore

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

renderCB Object <optional>
null

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

cb Object <optional>

Get a callback when the nameValueStore has retrieved the data.

Since:
  • 4.1.0 ViewMenu helper has been deprecated. Please call document.querySelector("cq-views").initialize() now.

Examples

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) self.params.cb.call(self);
	self.renderMenu();
});

<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.