Page Comparison

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:

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:

1. Anchor
   launch_another_workspace launch_another_workspace

   Launch another workspace
   

   Syntax
   

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

   Example
   

   Code Block
   language text
   canvas.launch( { workspaceId : 'ACC_SERV_WSPACE' });

   
   

2. Anchor
   launch_workspace_layout launch_workspace_layout

   Launch a workspace and layout
   

   Syntax
   

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

   Example

   Code Block
   language text
   canvas.launch( { workspaceId : 'CHART_WS', layoutId : 'CHART_LYT' });

   
   

3. Anchor
   launch_workspace_layout_widget launch_workspace_layout_widget

   Launch a workspace, layout, then a widget
   

   Syntax

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

   Example

   Code Block
   language text
   canvas.launch( { workspaceId : 'LOANS_WS', layoutId : 'LOANS_LYT', widgetId : 'CT_LOAN_SUMMARY_WGT' });

   
   

4. Anchor
   launch_ws_layout_widget_appshortcut launch_ws_layout_widget_appshortcut

   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.

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

   Syntax

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

   Example

   Code Block
   language js
   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);

   
   

5. Anchor
   launch_widget_modal_window launch_widget_modal_window

   Launch a widget in modal window
   

   Syntax

   Code Block
   language text
   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

   Code Block
   language text
   canvas.launch( { renderType : 'WINDOW', widgetId : 'CT_LOAN_SUMMARY_WGT' });

   
   

6. Anchor
   launch_form_modal_window launch_form_modal_window

   Launch a form with container in Modal window
   

   Syntax

   Code Block
   language text
   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

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

   
   

7. Anchor
   launch_from_without_modal_window launch_from_without_modal_window

   Launch a form without container in Modal window
   Syntax

   Code Block
   language text
   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

   Code Block
   language text
   canvas.launch( { renderType : 'WINDOW', formId : 'CT_PAYMENT_FORM' });

   
   

8. Anchor
   form_rendered_app form_rendered_app

   Form rendered in an app with container
   

   Syntax

   Code Block
   language text
   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

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

   
   

9. Anchor
   from_rendered_with_object_container from_rendered_with_object_container

   Form renders with form object and container in Modal Window:
   

   Syntax

   Code Block
   language text
   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

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

   
   

10. Anchor
    from_without_container from_without_container

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

    Syntax

    Code Block
    language text
    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

    Code Block
    language text
    var frmMgr = new canvas.form.FormManager( { formId : 'CT_PAYMENT_FORM' }); canvas.launch( { fm : frmMgr });

    
    

11. Anchor
    html_content html_content

    Launch a custom HTML Content in Modal Window
    

    Syntax

    Code Block
    language text
    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

    Code Block
    language text
    canvas.launch( { modalContent : 'Hello' });

    
    

12. Anchor
    predefined_dialog predefined_dialog

    Launch pre-defined dialog messages in the modal window
    

    Syntax
    

    Code Block
    language text
    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

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