K2BTools Tutorial - Exercise 2.2: Using K2BTrnForm

Introduction

In this exercise you will learn how to use the K2BTrnForm pattern. You will improve the Web Form in a transaction with a lot of 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.
  4. Save the transaction.
  5. 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 - 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 “Attributes” node as shown in this image:
    AddLineSeparator
    Add Line Separator

  3. Select the LineSeparartor node created in the previous step, and set the properties “ControllName (Id)” and “Title” to “PersonalInformation” and “Personal Information” (The first property serves as an identifier and cannot include spaces).
  4. Cut and Paste the following attributes into the LineSeparator: "CustomerDNI", “CustomerPrefix”, “CustomerSex”, “CustomerMaritialStatus” and “CustomerBirthDay”.
  5. Add another “LineSeparator” node called “Occupation”. Remember to set both the “ControlName (Id)” and “Title” properties.
  6. Cut and Paste the “CustomerOccupation”, “CustomerSalary” and “CustomerWorkHours” attributes into this node.
  7. Set the “Start Collapsed” property on the “Occupation” Line Separator to “True”.
  8. Save the transaction and see the effect on the Web Form.

Tip: When using patterns, two options are available: The first one is to edit the pattern instance inside the transaction (as we have done until now). The other option is to edit the Pattern object directly, by opening the object in the Folder View.

TutorialPatternObject
Pattern object in the folder view

Opening this object you can edit the pattern instance directly.

The advantage of the second option is that the pattern is not applied each time it is saved, it is automatically applied before generating the application instead. If you need to force the application of the pattern before that, you can use the “Apply Pattern” action, as seen below.

TutorialApplyPatternAction
Apply Pattern Action

We suggest you try this on the following sections.

3 - 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 between the “LineSeparators” created in the previous section.
  5. Add a “Tab” node to the “Tabs” node created in the step 2. Set its description to “Location” and cut and paste the following attributes to this node: “CityId”, “CityName”, “CountryId”, “CountryName”, “CustomerStreetName”, “CustomerStreetNumber” and “CustomerApartmentNumber”.
  6. 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”.

Your instance should look like this at this point:

Tutorial22IntermediateResult
Intermediate result

4 - 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. Inside the “Location” tab created in the previous section, add a new “Group” node.
  2. In the newly created node, set the “Control Name (Id)” and "Title" property to “Country”.
  3. Cut and paste the following attributes into this node: “CityId”, “CityName”, “CountryId”, and “CountryName”.
    TutorialGroupDefinition
    Group Definition

  4. Delete the CityName and CountryId attributes.
  5. Add another group to the “Location” tab. Set its “Caption” property to “Address”.
  6. Place these attributes in this node: “CustomerStreetName”, “CustomerStreetNumber” and “CustomerApartmentNumber”.
  7. Apply K2BTrnForm pattern instance.
  8. Go to the TrnFrom node and execute the action "Show Preview"
    ShowPreviewAction WebFormPreview
    Show Preview Action Web Form 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.

5 - 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 “Attributes” node.
  2. Set the property "ControlName (Id)" to "MainColumns"
  3. Create two “Column” nodes inside the “Columns” node you just created.
  4. Move the node created in step 1 to the top, just below the “Attributes” node, like this:
    TutorialColumnsDefinition
    Columns Definition

  5. Move the attributes “CustomerId”, “CustomerFirstName”, “CustomerLastName” and “CustomerDNI” to the first column.
  6. Move the “CustomerPhoto” attribute to the second column.

You should have something like this in your instance now:

Tutorial22IntermediateResult2
Intermediate Result (2)

6 - Moving attributes

  1. Remove "CustomerName" attribute.
  2. Place "CustomerObservations" and "CustomerState" attribute after the "Occupation" line separator.
  3. Set the "CustomerId" attribute's visible property to false.

You should have something like this in your instance now:

Tutorial22FinalResult
Final Result

7 - Run!

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