Canvas Launch API

Canvas Launch API enables you to launch or open other apps (widgets) from the current app. Using this API you can launch the following:

This is a core API which can be invoked in any event. The usage of canvas.launch() API has been explained with the following task as an example:

Launch (open) another workspace

Let us assume a scenario where a user wants to transfer funds to a beneficiary by accessing the DOMESTIC FUND TRANSFER form in the PAYMENTS workspace on CT ModelHouse application. The user specifies the details and submits the form.

After submitting the transaction, the user may now want to view the account summary in the ACCOUNT SERVICES workspace. In this case, when the user clicks the Submit button and after successful transaction, the ACCOUNT SERVICES workspace must be launched.

In order to launch the ACCOUNT SERVICES workspace, the canvas.launch API has been used in the form’s listener JS file. The sample code is as follows:

CFLR.registerListener("CT_PAYMENT_FORM", canvas.form.listeners.paymentForm);
CABR.registerHandler('PAY_SUMBIT', 'PAYMENTS_FORM_CONTAINER', function(config) {
	var fm = config.formObj;
	var refNo = fm.additionalConfig['reference_no'] || '';
	if (canvas.isEmpty(fm.model.getValue('ACC_NO'))) {
		fm.markInvalid("ACC_NO");
		return;
	} else if (canvas.isEmpty(fm.model.getValue('BENE_ACC_NO'))) {
		fm.markInvalid("BENE_ACC_NO");
		return;
	} else if (canvas.isEmpty(fm.model.getValue('TRANSACTION_AMT'))) {
		fm.markInvalid("TRANSACTION_AMT");
		return;
	} else if (canvas.isEmpty(fm.model.getValue('TRAN_DATE'))) {
		fm.markInvalid("TRAN_DATE");
		return;
	}
	var ajaxParams = {
		"INPUT_ACTION": "SUBMIT",
		"INPUT_FUNCTION_CODE": "VSBLTY",
		"INPUT_PRODUCT": "CUSER",
		"INPUT_SUB_PRODUCT": "CUSER",
		"PAGE_CODE_TYPE": "TXN_CODE",
		"PRODUCT_NAME": "CUSER",
		"REFERENCE_NO": refNo
	};
	canvas.apply(ajaxParams, fm.getModelData());
	canvas.ajax({
		params: ajaxParams,
		success: function(response) {
			var referenceNo = response.REFERENCE_NO;
			var text = response.STATUS == "SUCCESS" ? CRB.getBundleValue("common", "LBL_TRAN_SUCCESS") : CRB.getBundleValue("common", "LBL_TRAN_FAILURE");
			text = String.format(text, referenceNo);
			var successDialog = new canvas.Dialog({
				dialogType: "MESSAGE",
				title: "Confirmation Window",
				message: text,
				okHandler: function() {
					successDialog.close();
					if (window.transactionComplete) {
						window.dispatchEvent(window.transactionComplete);
						return true;
					} else {
						CBXFORMCONTAINER.exit(config);
						if (fm.additionalConfig['widgetObj']) {
							widget = fm.additionalConfig['widgetObj'];
							widget.refreshWidgetData();
						}
					}
					canvas.launch({
						workspaceId : "ACC_SERV_WSPACE"
					});
				}
			});
			successDialog.show();
		}
	});
});

Following are the syntax for the task that you want to achieve:

Launch another workspace

Syntax

canvas.launch(
{ 
	workspaceId: '<WORKSPACE_ID>', 
	callback: <function(){}> (Optional) 
});

Example

canvas.launch({
	'workspaceId':'ACC_SERV_WSPACE'
});

Launch a workspace and layout

Syntax

canvas.launch(
{ 
	workspaceId: '<WORKSPACE_ID>',
	layoutId: '<LAYOUT_ID>', 
	callback: <function(){}> (Optional) 
});

Example

canvas.launch(
{
	'workspaceId' : 'CHART_WS', 'layoutId':'CHART_LYT'
});

Launch a workspace, layout, then a widget

Syntax

canvas.launch(
{ 
	workspaceId: '<WORKSPACE_ID>', 
	layoutId: '<LAYOUT_ID>', 
	widgetId: '<WIDGET_ID>', 
	callback: <function(){}> (Optional) 
});

Example

canvas.launch(
{
	'renderType':'WINDOW', 'widgetId':'CT_LOAN_SUMMARY_WGT'
});

Launch a widget in modal window

Syntax

canvas.launch(
{ 
	renderType:'WINDOW',
	widgetId: '<WIDGET_ID>',
	width: '<WIDTH_IN_%_OR_PXL>', (Optional) 
	height: '<HEIGHT_IN_%_OR_PXL>', (Optional) 
	fullScreenInd: <TRUE | FALSE>, (Optional) 
	closeOnEsc: <TRUE | FALSE>, (Optional) 
	modalDialog: <TRUE | FALSE>, (Optional) 
	draggable : <TRUE | FALSE>,	(Optional) 
	callback: <function(){}> (Optional) 
});

Example

canvas.launch(
{
	'renderType':'WINDOW', 'widgetId':'CT_LOAN_SUMMARY_WGT'
});

Launch a form with container in Modal window

Syntax

canvas.launch(
{ 
	renderType:'WINDOW',
	formId: '<FORM_ID>', 
	containerId: '<CONTAINER_ID>', 
	width: '<WIDTH_IN_%_OR_PXL>', (Optional) 
	height: '<HEIGHT_IN_%_OR_PXL>', (Optional) 
	fullScreenInd: <TRUE | FALSE>, (Optional) 
	closeOnEsc: <TRUE | FALSE>, (Optional) 
	modalDialog: <TRUE | FALSE>, (Optional) 
	draggable : <TRUE | FALSE>,	(Optional) 
	callback: <function(){}> (Optional) 
});

Example

canvas.launch(
{
	'renderType':'WINDOW','formId':'CT_PAYMENT_FORM',
	'containerId':'PAYMENTS_FORM_CONTAINER'
});

Launch a form without container in Modal window
Syntax

canvas.launch(
{ 
	renderType:'WINDOW',
	formId: '<FORM_ID>', 
	width: '<WIDTH_IN_%_OR_PXL>', (Optional) 
	height: '<HEIGHT_IN_%_OR_PXL>', (Optional) 
	fullScreenInd: <TRUE | FALSE>, (Optional) 
	closeOnEsc: <TRUE | FALSE>, (Optional) 
	modalDialog: <TRUE | FALSE>, (Optional) 
	draggable : <TRUE | FALSE>,	(Optional) 
	callback: <function(){}> (Optional) 
});

Example

canvas.launch(
{
'renderType':'WINDOW','formId':'CT_PAYMENT_FORM'
});

Form rendered in an app with container

Syntax

canvas.launch(
{ 
	formId: '<FORM_ID>', 
	containerId: '<CONTAINER_ID>', 
	RenderType : 'APP',
	workspaceId: '<WORKSPACE_ID>', 
	layoutId: '<LAYOUT_ID>', 
	widgetId: '<WIDGET_ID>',
	width: '<WIDTH_IN_%_OR_PXL>', (Optional) 
	height: '<HEIGHT_IN_%_OR_PXL>', (Optional) 
	fullScreenInd: <TRUE | FALSE>, (Optional) 
	closeOnEsc: <TRUE | FALSE>, (Optional) 
	modalDialog: <TRUE | FALSE>, (Optional) 
	draggable : <TRUE | FALSE>,	(Optional) 
	callback: <function(){}> (Optional) 
});

Example

canvas.launch(
{
	'formId':'CT_PAYMENT_FORM',
	'containerId':'PAYMENTS_FORM_CONTAINER', 
	'renderType':'APP', 
	'workspaceId': 'ACC_SERV_WSPACE', 
	'layoutId': 'ACC_SERV_LYT', 
	'widgetId': 'EMPTYAPP'
});

Form renders with form object and container in Modal Window:

Syntax

canvas.launch(
{ 
	fm: '<fm_Obj>',
	containerId: '<CONTAINER_ID>', 
	width: '<WIDTH_IN_%_OR_PXL>', (Optional) 
	height: '<HEIGHT_IN_%_OR_PXL>', (Optional) 
	fullScreenInd: <TRUE | FALSE>, (Optional) 
	closeOnEsc: <TRUE | FALSE>, (Optional) 
	modalDialog: <TRUE | FALSE>, (Optional) 
	draggable : <TRUE | FALSE>, (Optional) 
	callback: <function(){}> (Optional) 
});

Example

var frmMgr = new ct.form.FormManager({formId: 'CT_PAYMENT_FORM'});
canvas.launch({'fm': frmMgr, 'containerId':'PAYMENTS_FORM_CONTAINER'});

Form renders with form object and without container in Modal Window:

Syntax

canvas.launch(
{ 
	fm: '<fm_Obj>', 
	width: '<WIDTH_IN_%_OR_PXL>', (Optional) 
	height: '<HEIGHT_IN_%_OR_PXL>', (Optional) 
	fullScreenInd: <TRUE | FALSE>, (Optional) 
	closeOnEsc: <TRUE | FALSE>, (Optional) 
	modalDialog: <TRUE | FALSE>, (Optional) 
	draggable : <TRUE | FALSE>, (Optional) 
	callback: <function(){}> (Optional) 
});

Example

var frmMgr = new ct.form.FormManager(
{	
	formId: 'CT_PAYMENT_FORM'
});
canvas.launch({'fm': frmMgr});

Launch a custom HTML Content in Modal Window

Syntax

canvas.launch(
{ 
	modalContent: '<HTML_DOM>', 
	title: '<TITLE_OF_WINDOW>', (Optional) 
	width: '<WIDTH_IN_%_OR_PXL>', (Optional) 
	height: '<HEIGHT_IN_%_OR_PXL>', (Optional) 
	fullScreenInd: <TRUE | FALSE>, (Optional) 
	closeOnEsc: <TRUE | FALSE>, (Optional) 
	modalDialog: <TRUE | FALSE>, (Optional) 
	draggable : <TRUE | FALSE>,	(Optional) 
	callback: <function(){}> (Optional) 
});

Example

canvas.launch(
{ 
'modalContent': 'Hello'
});

Launch pre-defined dialog messages in the modal window

Syntax

canvas.launch(
{ 
	message: '<MESSAGE_OF_DIALOG>', 
	dialogType:'CONFIRMATION'|'MESSAGE'|'WARN_EDIT_OK'|'SUCCESS'|'ERROR'|'WARNING' 
	width: '<WIDTH_IN_%_OR_PXL>', (Optional) 
	height: '<HEIGHT_IN_%_OR_PXL>', (Optional) 
	fullScreenInd: <TRUE | FALSE>, (Optional) 
	closeOnEsc: <TRUE | FALSE>, (Optional) 
	modalDialog: <TRUE | FALSE>, (Optional) 
	draggable : <TRUE | FALSE>,	(Optional) 
	callback: <function(){}> (Optional) 
});

Example

canvas.launch(
{
	'message': 'The mandatory fields are not filled-in' , 'dialogType' : 'ERROR'
});