K2BTools Tutorial - Exercise 1.4: Edit Mode

As we saw in runtime, every time the user performs an operation (insert, update or delete) an EntityManager interface is displayed and the operation is performed using the EntityManager. This interaction can be modified by the developer using the "Edit Mode" property.

Standard Edit Mode

"Edit Mode" is a property included in WorkWith and SubWorkWith nodes that allows the developer to choose a different behaviour when editing instances inside that interface. The values available for this property are "Standard" (default mode), "TwoPane", and "Popup".

In this exercise we are going to learn how to use the PopUp and TwoPane edit modes.

Edit Mode - PopUp

In this mode, the WorkWith interface is equal to the Work With interface in the "Standard" mode. The main difference is that in this case, when executing the "Insert", "Display", "Update" and "Delete" actions the transaction is opened in a Popup screen instead of the EntityManager.

  1. Open the EntityServices instance for the Product transaction.
  2. Select its "WorkWith" node
  3. Change the "Edit Mode" property to "PopUp".
  4. Apply the pattern.
  5. Run.
  6. Insert, update and delete a product.

Edit Mode - Two Pane

In this mode, the WorkWith screen is divided in two areas. The first one contains the controls found in the "Standard" Work With interface, while the second one contains a Web Component that will contain the transaction associated with the Work With. The Web Component is empty when the user enters the interface, and a "Select Record" message is shown. The Insert, Display, Update, and Delete actions trigger an update on the Web Component, to show the transaction in the correct mode.

  1. Oepn the EntityServices instance associated with the Product transaction.
  2. Select its "WorkWith" node.
  3. Change "Edit Mode" property to "TwoPane"
  4. Apply the pattern.
  5. Run
  6. In runtime:
    1. Select a product and see how the Web Component shows the selected product in display mode.
    2. Click on "More Information..." to go the EntityMangaer for that product.
    3. Add a new product
    4. After the insert is completed, component should display the product using the transaction's display mode. See how in this mode the update and delete actions are available
      Update and Delete in Two Pane component

    5. Update the recently added product.
    6. Delete that product.