View components

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

• LIST
• PAGING
• CLASSIC_GRID
• ADVGROUP
• GROUP
• FORM
• EMPTY
• MAP
• IFRAME
• ADS
• APP
• CHART
• ORG

ct.preferences.isLangDirectionRTL() → Indicates if the direction of rendering is right to left.

What developers are expected to do: Developers have to fetch the business data for their view with configured, product, sub product, and the function code. They have to use this JSON data to construct their component accordingly. The developers should also be aware of the on demand loading strategies and should register their JavaScript files is the following format in canvasondemandjs.xml.

      on demand file set id = MV_(framework Id)_(VIEW_TYPE),
For example, if a component developer is trying to develop a List view component in jQuery UI framework, the file set ID would be MV_jqui_LIST.
Registry Signature:

CLCR.registerCmp({'COMP_TYPE':'<<VIEW_TYPE>>'}, <<Your view class name>>);

APIs to be supported: NA

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

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

           Supported views: All

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

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

           Supported views: LIST, PAGING, CLASSIC-GRID

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

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

           Supported views: LIST, PAGING, CLASSIC-GRID, CHART

           Arguments to be passed:

           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

For all the other supported views,

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

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

              Supported views: LIST, PAGING, CLASSIC-GRID

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

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

              Supported views: GROUP, ADVGROUP

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

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

              Supported views: GROUP, ADVGROUP

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

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

               Supported views: FORM

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

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

               Supported views: FORM

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

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

                Supported views: TREE

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

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

              Supported views: CHART

             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:

Scope: View definition meta data and the parent element on which the rendered view is to be appended, i.e. ideally the content space of the portlet.

Sample Code Snippet:

canvas.lib.List = Class(canvas.core.Component, 
{
	widgetID:null,
	md: '',
	appendTO: '', 
	constructor: function(config) 
	{ 
		canvas.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 = !canvas.isEmpty(this.extraParams) && canvas.isObject(this.extraParams)?canvas.apply(ajaxParams,this.extraParams):ajaxParams;

		canvas.ajax(
		{
			params : ajaxParams,
			success : function(metadata)
			{
				/*
				* TODO:Render your view using the JSON received
				*/
			}
		});
	}
})

CLCR.registerCmp({'COMP_TYPE':'LIST'}, canvas.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);
});