Home > Products > BPC PowerForms > Knowledge Base > API Reference > The ListAndForm control

The ListAndForm control

The ListAndForm control is suitable for implementing interactive Master-Detail views inside a PowerForm, as it helps you to create a fully functional subform inside a form. It contains 2 controls, a list query datagrid and a subform enriched with New/Edit/Delete buttons.

You can view an in depth tutorial on how to use the List and Form control here.



Designer Properties

Type : ListandForm


Provides a unique name for the control.



Not applicable for DataGrig control. Always unbound. 


Enabled for new records

Sets if the control will be enabled or disabled when the forms handles a new record

Enabled for existing records

Sets if the control will be enabled or disabled when the forms handles an existing record


Marks the cotnrol as Required.

By default, the system recognizes required fields and marks them with this flag. Additionaly, controls can be marked as required event if the bound column is not.

Enabled Formula

Set an expression then will be evaluated during run-time and enable or disable the control.

The expression must be in javascript and should return a boolean value.

Dependencies between controls are automatically identified and the expression is re-calculated every time a control affecting the formula changes.

Example :


form.GetControl("c_Status").GetValue() != "Open" && form.UserInGroup("Administrators")

Visibility Formula

Define a valid formula (using javascript) that will be evaluated during runtime to show or hide the control.

The expression should return a boolean value.

For example :


form.FieldValue("c_Status") != "Rejected" || form.UserID() == "1"


Value Properties

List Query

A predefined list query is bound to the value of the control. So during form initialization, the specified list query is executed and binds the data grid

IMPORTANT: In order for the control to work as expected, you will have to include the ID column in your list query. 

Layout Properties


Defines the width of the control.

When the value is zero, the maximum allowed width will be used.


Defines the control height.

If the value is zero, the height property will not be set. 


Defines the horizontal alignment of the parent cell (values : left, right, center)


Defines the vertical alignment of the parent cell (values : top, bottom, center)

Fore Color

Defines the fore color of the control

Back Color

Defines the Background color of the control.

Cell Color

Defines the color of the parent cell.

Font Size

Declares the font size of the text


Sets the margin applied to the control, that is, the spacing between the control and the cell borders.

Font Bold

Changes the weight of the font used


Changes the font style for the control text


Extra Configuration


Add the column internal names for the fields that the list should be filtered by (eg ID;Title)


Shows or Hides the filter control


Shows or Hides the Search Grid


Automatically selects the first record (if any) 


Define the form content type


Define the grid height


Script to be executed after record update  


You can write a script that will be executed once the data to be bound to the datagrid are loaded, just BEFORE they are placed in the grid. The 'items' variable is available containing the items retrieved. This event is used if you want to alter the items before they are shown.


for (var i=0; i < items.length; i++)
items[i].KPILookup = GetNameFromLookup(items[i].KPILookup);



Add the fields of the data entry grid


Name : The name of the field. It should begin with a letter and only contain letters, numbers and the underscore character

Header : The field header

Width :  The grid column width. Leave blank for Auto sizing.

DisplayFormat : Indicates the way the value will be presented inside the data grid. (The value as-is, the ValueField or DisplayField for lookup controls (ID;#TITLE).

ForeColor : The cell foreground color

FontBold :  The text weight

FontSize : The size of the font used

HAlign :  Sets the Horizontal Alignment. (Left, Center, Right)

Default Values

Add Name/Value pairs to set default values for the control. The 'Name' property should be the column internal name and the value should be either static or calculated. (i.e. Name=Priority, Value=High or Name=Customer, Value={value:c_ID}


Name : The column internal name

Value: The default value of the column. Set either static values or calculated values based on form controls (i.e. {value:Field1})


Sets the script that will be executed at the value-change event of the control.

Example :


var value = form.GetControl("c_Title").GetValue();

if (value == "Open") form.HideSection("Details");

else form.ShowSection("Details");