Page Comparison

Class Description: Views are those entities that hold the actual business data of the end users. Hence this layer may or may not require server calls to fetch the business data from the server. Since the UI here renders the actual business data, the business app developers will be more interested in configuring UI related functionalities like cell click, context click, etc. It becomes the prime responsibility of the component developers to raise these events with appropriate JSON data.

Called By: cbx canvas.core.widget

Meta data to be considered: All the configurations done against the view in VIEW_DEFINITION and VIEW_DEFINITON_TOOL_PREF are to be considered while rendering this layer. The various view types supported today are as follows:

...

Events to be raised: The list of available events and the view event mapping for component developers are as follows:

• viewchange CWEC.SWITCH_VIEW_CHANGE → The event lets the business app developers perform certain operations when the view is being activated or being switched.

...

           Arguments to be passed: view ID → of the view that is being activated

• cellclick CWEC.CELL_CLICK → The event that needs to be raised when the user performs a double-click on any of the records in the view.

...

           Arguments to be passed: record → The JSON of the record on which the action has been performed

• contextclick CWEC.CONTEXT_CLICK → The event that needs to be raised when the user performs a context click on any of the records in the view.

...

           For chart view, a JavaScript object containing the following information is expected:

'VIEW_ID': The view ID of the chart component

'X_LABEL': The x-axis label corresponding to the drill-down operation

'X_VALUE': The x-axis value corresponding to the drill-down operation

'Y_LABEL': The y-axis label corresponding to the drill-down operation

'Y_VALUE': The y-axis value corresponding to the drill-down operation

...

record → The JSON of the record on which the action has been performed.

• cellsingleclick CWEC.CELL_CLICK → The event that needs to be raised when the user performs a single-click on any of the records in the view.

...

              Arguments to be passed: record → The JSON of the record on which the action has been performed.

• groupcontextmenuclick CWEC.GROUP_CONTEXT_CLICK → The event that needs to be raised when the user performs a context click on any of the records in the group view.

...

              Arguments to be passed: record → The JSON of the record on which the action has been performed.

• groupdoubleclick CWEC.GROUP_DBLCLICK → The event that needs to be raised when the user performs a double-click on any of the records in the group view.

...

              Arguments to be passed: record → The JSON of the record on which the action has been performed.

• forminitialized CFEC.FORM_INITIALIZE → The form event allows the user to do certain operations when the form view has been just initialized.

...

              Arguments to be passed: fm → The form manager object that corresponds to the configured form ID.

• formbeforeinitialize CFEC.FORM_BEFORE_INITIALIZE → The form event that allows the user to do certain operations before the form view has been initialized.

...

                Arguments to be passed: fm → The form manager object that corresponds to the configured form ID.

• treeclick CWEC.NODE_CLICK → The event allows the developers to do certain business operations while a tree panel has been clicked.

...

               Arguments to be passed: nodeId → The ID of the tree node that is clicked.

• graphdrilldown CWEC.DRILL_DOWN → The drill-down event on charts that allows the developers to perform certain business operations when a chart element has been drilled down to reveal more information.

...

             Arguments to be passed: object with the following information:

'VIEW_ID': The view ID of the chart component

'X_LABEL': The x-axis label corresponding to the drill-down operation

'X_VALUE': The x–axis value corresponding to the drill-down operation

'Y_LABEL': The y-axis label corresponding to the drill-down operation

'Y_VALUE': The y-axis value corresponding to the drill-down operation

The following table provides a mapping of the view types and the supported business events:

...

Sample Code Snippet:

cbxcanvas.lib.List = Class(cbxcanvas.core.Component, 
{
	widgetID:null,
	md: '',
	appendTO: '', 
	constructor: function(config) 
	{ 
		cbxcanvas.lib.List.$super.call(this);
		this.widgetID = config.widgetId;

		/*

		View meta data of the configured views
		*/
		this.md = config.md;
		this.scope = config.scope;

		/*
		DOM element of widget to append the list control
		*/
		this.appendTo = config.appendTO;

		/*
		The extra params handler to be considered. This has to be a function
		*/
		this.extraParamsHandler=config.extraParamsHandler;

		/*
		The extra params which is to be applied. This has to be an object
		*/
		this.extraParams=config.extraParams;

		/*
		The reference of the core class which contains the events for this view
		*/
		this.appEvents = config.appEvents; 
		this.createList();
	},

	/**
	* The API which will fetch the business data and initiate rendering of the view with the JSON received
	*/
	createList : function()
	{
		var baseparams = 
		{
			"__LISTVIEW_REQUEST" : "Y",
			"PAGE_CODE_TYPE" : 'VDF_CODE',
			"INPUT_ACTION" : "INIT_DATA_ACTION",
			"INPUT_PRODUCT" : this.md.PRODUCT_CODE,
			"PRODUCT_NAME" : this.mdPRODUCT_CODE,
			"INPUT_FUNCTION_CODE" : this.md.FUNCTION_CODE,
			"INPUT_SUB_PRODUCT" : this.md.SUB_PRODUCT_CODE,
			"WIDGET_ID" : this.widgetID,
			"VIEW_ID" : this.md.SYSTEM_VIEW_ID
		};

		/*
		Call the function to get the extra params
		*/
		var ajaxParams = this.extraParamsHandler?this.extraParamsHandler.apply(this.scope,[baseparams]):baseparams;

		/*
		Apply the extra params passed to the base params object
		*/
		ajaxParams = !cbxcanvas.isEmpty(this.extraParams) && cbxcanvas.isObject(this.extraParams)?cbxcanvas.apply(ajaxParams,this.extraParams):ajaxParams;
/*
*/
cbx
		canvas.ajax(
		{
			params : ajaxParams,
			success : function(metadata)
			{
				/*
				* TODO:Render your view using the JSON received
				*/
			}
		});
	}
})

CLCR.registerCmp({'COMP_TYPE':'LIST'}, cbxcanvas.lib.List); 

To

...

raise

...

business

...

events,

...

one

...

would

...

simply

...

have

...

to

...

do,

...

$('<<element>>').on('click',function()
{
	var parentMV = this.appEvents.getMVObj();
	/**
	* Calling an utility API that returns a JSON object 
	* for the clicked Table row
	*/
	var rowData = this.getRowData(this);
	var record = 
	{
		"data":rowDatas
	};
	parentMV.raiseEvent(CWEC.CELL_CLICK,record);
});

...