Showing the form on Menu click

Canvas provides the CWMH(CanvasWorkspace Menu Handler), a global handler variable that allows to register the menu click event in any handler files; you can write menu click handler anywhere in the application with the CWMHvariable.

See section Form Container APIs to view the list of form container APIs and their usage.

It is always better to maintain all the menu handlers in a separate JavaScript file than having those handlers cluttered across different locations.

Create a new JS handler file (myapplication.menus.js) and then add the following code snippet for the Payment Form menu Id INIT_PAYMENT:

CWMH.registerHandler('INIT_PAYMENT', CWMC.EVENT_CLICK, function (config)
	{
		//Create Form Manager Object using the Form ID first
		var fm = new cbx.form.FormManager
				  ({
					 formId : "PAYMENT_FORM",
					 mode : 'edit', // default mode is 'view'
					 modelData : { } //Model data provides options to preset default values on the form items
					}); 
		//Using the CBXFORMCONTAINER.getWindowByFormObj method call the container 
        CBXFORMCONTAINER.getWindowByFormObj(fm, "PAYMENT_CONTAINER", null); 
	}); 

Build your sources and run the application. The form appears as shown in the following screenshot: