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.

Form Components are an advanced feature. Please first see other Form Container types to explore options for nesting forms within forms.

Get Started

Form Component

Placing a container on the form

Create Form Component Container

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

Editing the elements of a contained Form Component

It is recommended to set a specific name in the Form Component Container properties in order to make it easier to use it later in scripting. Example: fc_id_name_details.

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:

assign event for a form component's button

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
}