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:

Launch another workspace
Launch a Workspace and Layout
Launch a workspace, layout, and then a widget
Launch a workspace, layout, widget, and trigger a non-contextual app handler
Launch a widget in modal window
Launch a form with container in Modal window
Launch a form without container in Modal window
Launch a form in an app with container
Launch a form with form object and container in Modal window
Launch a form with form object and without container in Modal window
Launch a custom HTML Content in Modal Window
Launch pre-defined dialog messages in Modal window

This is a core API that can be invoked in any event. The usage of canvas.launch() API is explained here 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(
{
	workspaceId : 'LOANS_WS', 
	layoutId : 'LOANS_LYT', 
	widgetId : 'CT_LOAN_SUMMARY_WGT'
});

Launch a workspace, layout, widget, and trigger a non-contextual app handler

Consider a scenario where you need to launch a non-contextual app (e.g. app shortcut) on an empty widget. The app shortcut when clicked will take the user to the linked app (widget). To achieve this via canvas.launch() API, you can use the customLauncher parameter, which is the handler for app shortcut item.

This variant of canvas.launch() API is enabled in TBS only.

Syntax

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

Example

ACHR.registerHandler(<APP_SHORTCUT_ID>, function (config)
{
	// implementation code
});

var config = {};
config.workspaceId = workspaceId;
config.layoutId = LayoutId;
config.widgetId = WidgetId;
var appId = <APP_SHORTCUT_ID>;
if (appId != null && appId != undefined)
{
	config.customLauncher = ACHR.getHandler(appId);
}
canvas.launch(config);

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 canvas.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 canvas.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'
});