K2BTools Tutorial - Exercise 2.2: Using K2BTrnForm


In this exercise you will learn how to use the K2BTrnForm pattern. You will improve the Web Form in a transaction that contains multiple attributes.

1 - Apply the TrnForm pattern for the first time

  1. Open the Customer transaction
  2. Go to the “Patterns” part and select the “TrnForm” pattern.
  3. Select the “Apply this pattern on save” option.
    Apply this pattern on save

  4. Delete the following attributes: CustomerId, CountryId, CustomerObservations, CustomerStatus, CustomerName and CustomerSearchResult.
  5. Save the transaction.
  6. Observe the contents of the Web Form part of the transaction. From this moment on, the Web From for the Customer transaction will be maintained by the K2BTrnForm pattern. Now we can start using its features to improve this interface.

2 - Groups

Groups can be used to place related attributes in an enclosed section with a descriptive title. Follow these steps to create an example:

  1. Add a new “Group” node inside the "Attributes" node.
  2. In the newly created node, set the following properties:
    1. Control Name (Id): "GeneralInformation".
    2. Title: "General Information".
  3. Cut and paste "CustomerPhoto" attribute inside the node.
    Group Definition

  4. Save and apply K2BTrnForm pattern instance.

3 - Columns

Columns can be used to organize elements in vertical sections. To create a Columns node, follow these steps:

  1. Create a “Columns” node inside the “GeneralInformation” node created in the previous step.
  2. Set the property "ControlName (Id)" to "GeneralInformationColumns"
  3. Create two “Column” nodes inside the “Columns” node you just created.
  4. Cut and paste the following attributes inside the first column: CustomerFirstName, CustomerLastName, CustomerNumber, CustomerBirthDay, CityId, CountryName, CustomerSex, CustomerPrefix and CustomerMaritialStatus.
  5. Cut and paste the following attributes inside the second column: CustomerAddressStreet, CustomerAddressCity and CustomerAddressPostalCode
  6. Group your attributes so they look like in the image below (Intermediate Result).

This is how your instance should look by now:

Intermediate Result

4 - Line Separator Node

The “Line Separator” node allows the developer to group a set of related attributes, and gives the end user the choice of whether to see them or not. This is usually used in interfaces with many attributes to simplify the form. Create your first Line Separators following these steps:

  1. Go to the “K2BTrnForm” pattern definition.
  2. Add a “Line Separator” Node inside the “Column” node that contains address attributes with the following properties:
    1. Control Name(Id): ShippingAddressLineSeparator
    2. Title: Shipping Address
  3. Cut and Paste the following attributes into the LineSeparator: "CustomerAddressStreet", “CustomerAddresCity” and “CustomerAddressPostalCode”.
  4. Save the transaction and see the effect on the Web Form.

Intermediate Result (2)

5 - Tabs node

Using this node (along with the Tab node) you can add tabs to the generated interface. To create these nodes, follow these steps:

  1. Enter the K2BTrnForm instance for the “Customer” transaction.
  2. Add a “Tabs” node to the “Attributes” node.
  3. Set the “Control Name” property in this node to “Tabs1”.
  4. Place this node in the bottom of the TrnForm.
  5. Add a “Tab” node to the “Tabs” node created in the step 2. Set its description to “Contact” and cut and paste the following attributes to this node: “CustomerPhoneNumber" and “CustomerEmail”.
  6. Add a “Tab” node to the “Tabs” node created in the step 2. Set its description to “Occupation” and cut and paste the following attributes to this node: “CustomerOcupation” and “CustomerWorkhours”.
  7. Go to the TrnFrom node and execute the action "Show Preview"
    Show Preview

Note: The "Show preview" action allows the developer to see how the web form will look before specifying, generating and compiling the object. This action is also avaiable in WorkWith, EntityManager, and SubWorkWith nodes in the EntityServices pattern.

Your instance should look similar to this by now:

Intermediate result (3)

6 - Run!

It’s time to see the result of all this! Execute your application and see the results in runtime.