Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Multi-Form is an advanced option, which allows the developer to show a same form on a parent form as many times as required.
Similarly, Sub Form is a form added attached on a form using the Form Panel as a regular form items.

For Example: Consider the below information for creating a multi-form:

  1. Biller Info form – this form is the parent form containing a sub form with labels and a multi-form.
  2. Biller Label form – this form is a sub form just containing the labels Biller Name, Biller Amount, and the Area Code.
  3. Biller Detail form – this form contains the only 3 form items to capture the Biller Info but rendered on the parent form as many times using its Initial Multiplicity property.


Form Creation

Use the following table to create a sample Form and Multi-form.Also, see Form and Multi-Form for further details.

Form ID

Form Title

Data Source Class

BILLER_INFO

LBL_BILLER_INFO

 


BILLER_LABELS

BILLER_LBLS

 


BILLER_DETAILS

BILLER_DT

 




Form Items Creation

Use the following table to insert the required form items. Also, see Configuring Form Items Definitions for further details.

Form ID

Item ID

Form Item

Display Name Key

Category: Adding the multi-form and Sub Form on the main

form

 

 

 

form 

BILLER_INFO

BILLER_LABELS

FORM

 


BILLER_INFO

BILLER_DETAILS

FORM

 


Category: Adding the items in the Sub Form

 

 

 




BILLER_LABELS

BILLER_NAME

LABEL

BILLER_ NAME

BILLER_LABELS

BILLER_AMOUNT

LABEL

BILLER_ AMOUNT

BILLER_LABELS

AREA_CODE

LABEL

AREA_C ODE

Category: Adding the items on the Multi-

Form

 

 

 

Form 

BILLER_DETAILS

BILLER_COMPOSIT

FORM COMPOSIT

 


BILLER_DETAILS

OPT_BILLER

RADIO GROUP

 


BILLER_DETAILS

TXT_BILLER_NAME

TEXT

 


BILLER_DETAILS

TXT_BILLER_AMT

AMOUNT

 


BILLER_DETAILS

CMB_AREA_CODE

COMBO

 



Form Container Creation

Use the following table to create the form container. Also, see Form Containers for further details.

Form ID

Container Id

Title

Action Id

Action Type

Position

BILLER_INFO




CONT_BILLER_INFO




BILLER_INFO




BTN_SAVE

Positive

1

 

 

 

BTN_ADD

Positive

2

 

 

 

BTN_DEL

Positive

3

 

 

 

BTN_CANCEL

Negative

4


After configuring, write the handlers to launch the form on a menu click. See Showing the form on Menu click for more details.

The form should appear as shown:

Image Modified
To add an instance of the form, use the fm.addNext('FORM_ID') API as shown:

Code Block
languagejs
CABR.registerHandler('BTN_ADD','CONT_BILLER_INFO', function (config){ this.fm = config.frmObj;

...


this.fm.fm.addNext('BILLER_DETAILS');

...


}); 


To delete an instance of the form, use the fm.removeAt(formIndex,'FORM_ID'); API as shown:

Code Block
languagejs
cbx.ns("my.listner.namespace"); my.listner.namespace.BillerInfoForm = Class(cbx.Observable,
 {

...

 
	constructor : function (config)

...


		{ 
	this.fm = config.fm;

...


		},

...

 
registerHandlers : function ()

...


	{
		var formIndex=null;

...

 
		this.fm.registerHandler("cbxchange","OPT_BILLER", function(fm, event, fieldname, value, index, parent)

...

 
			{ 
				//finding the index of the instance to be deleted formIndex=index;

...

 
				var count = fm.getNumberOfSubForms('BILLER_DETAILS'); for(var i=0; i<count; i++)

...

 {
					if(i!=index)
						{ 
							fm.model.setValue('OPT_BILLER',"",false,i,parent);

...


						}
			} 
	});

...


}

...

 
});

...

 
CFLR.registerListener("BILLER_INFO", my.listner.namespace.BillerInfoForm);

...

 
CABR.registerHandler('BTN_ADD','CONT_BILLER_INFO', function (config)
{

...


	fm.removeAt(formIndex, 'FORM_BBAR_MULTI');

...

 
});