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


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:
  • TBC ViewMenu helper has been deprecated. Please call $("cq-views")[0].initialize() now.
Example
//
		// To have the views web component menus use a different storage function, 
		// just 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);
		 };

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.