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.
...
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
...
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
...
Sample Code Snippet:
| Code Block | ||
|---|---|---|
| ||
cbxcanvas.lib.List = Class(cbx.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 = !cbx.isEmpty(this.extraParams) && cbx.isObject(this.extraParams)?cbx.apply(ajaxParams,this.extraParams):ajaxParams; cbx.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,
...