Form Component

Overview

The "Form Component Container" component shows one Form Component inside it. It has no additional UI decorations.

The contained form component can optionally show related data.

It is suited for use in both Advanced (Responsive) and Simple CSS forms.

Get Started

Placing a container on the form

Here are the steps for placing a container on the form:

1. Open the Form Editor of the form where you need to place an Form Component Container

2. Find FormComponentContainer in Form Containers section in the components' pallet

3. Drag and drop the FormComponentContainer component in the desired place of the form

4. Select the containedForm property, where you set the name of the form component you want to be displayed in the container

5. Edit the elements of the contained Form Component, when it's necessary

6. Edit other FormComponentContainer properties if needed

Working with the Form Component instance

Connecting event bindings

Because a Form Component form doesn't have its own logic (.js file), events like onAction of a button must be assigned to the form.js file of the containing form, or to top-level scopes or entity methods.

Example:

You can add logic for a button created in a Form Component form (placed in a Form Component Container) by accessing that button in the main form and assign the button events to the main form's scope (.js file):

/**
 * Fired when the button is clicked.
 *
 * @param {JSEvent} event
 *
 * @private
 *
 * @properties={typeid:24,uuid:"28F80574-DBD2-4631-89F1-090CB57049DB"}
 */
function onAction(event) {
	var record = foundset.getSelectedRecord()
	forms.customers.controller.loadRecords(record.foundset);
	application.showForm('customers');
}

Programmatic interaction with elements

Elements of a Form Component can be accessed in the main form where its Form Component Container is placed, using the following convention:

elements.my_form_component.containedForm.my_sub_element.property

Example:

/**
 * Callback method for when form is shown.
 *
 * @param {Boolean} firstShow form is shown first time after load
 * @param {JSEvent} event the event that triggered the action
 *
 * @private
 *
 * @properties={typeid:24,uuid:"476A4F16-1F03-400A-B89C-7CE92E01B443"}
 */
function onShow(firstShow, event) {
	
	elements.fc_id_name_details.containedForm.label.visible = false;
  	//fc_id_name_details = the name of the Form Component Container
}