How to: Add extensibility form to a web panel

This guide explains how to integrate an Extension Form into a Web Panel using K2BTools, allowing you to display and manage custom fields defined at runtime.

Step 1: Insert the Extensibility Form Node

Add extension form action

1. In GeneXus, open your Knowledge Base.

2. Navigate to the Web Panel where you want to add the Extension Form.

3. Open the Designer part of the Web Panel.

4. In the designer, locate the node (e.g., a Column, Group, or Section) where you want the Extension Form to appear.

5. Right-click on the desired node.

6. Select Add from the context menu.

7. Choose Extension Form to insert the node into the layout.

Step 2: Configure the Extension Form Node Properties

Extension form properties

After adding the node, configure the following properties:

• Name:
  Set the name of the control as it will appear in the web form. This should be unique within the form.

• Load Strategy:
  If the Extensibility Forms module is installed, set this property to ExtensionForm. This will automatically load the first form associated with the web panel.

Step 3: Build the Application

• Save your changes and build the application.

• At this point, the extension form area will be empty or not visible, as no forms have been defined yet.

Step 4: Define and Associate a Form at Runtime

• Go to the Extensibility Forms module in your application.

• Open the Work With interface for forms.

• Add a new form:

  • Set the Reference Type to Web Panel.

  • Associate it with your web panel by specifying the web panel’s qualified name.

  • Edit the form as described in How to: Edit extensibility form definition.

Step 5: Implement Retrieval and Persistence of Form Values

To manage the data entered in the Extension Form, you must use the variable named <FormName>_Values. This variable is based on an SDT (Structured Data Type) that implements a collection of items, where each item represents a variable in the form and is identified by its name.

Loading Data

• Before displaying the form (typically in the U_Start or U_Open subroutines), load the data you want to show into the <FormName>_Values variable.

• Each item in the collection should correspond to a field in the form, with the value set appropriately.

Storing Data

• After the user interacts with the form, the data entered will be available in the <FormName>_Values variable.

• You are responsible for persisting this data as needed in your application logic.

Important Considerations

• We recommend reviewing and applying the validations described in the Extensibility forms module - Form validation page.

• Always validate and sanitize data received from the user before storing or processing it, following the best practices outlined in the validation documentation.

Step 6: Test the Integration

• Open the web panel in the application.

• The fields defined in your extensibility form will now appear in the UI.

• Ensure that your manual logic for loading and saving the form data is working as expected.