K2BTools Tutorial - Exercise 13.2 - Invoice Selection Step

Now it is time to add the steps that implement the wizard. Each step is implemented by a WebPanel. First, we have to create the Web Panel for this step:

1. Creating the Web Panel

  1. Create a new Web Panel, name it as "SelectInvoice" and activate WebPanelDesigner.
  2. Go to the Web Panel properties and change the type to "Component".
    ComponentType
    Component Type

2. Associating the step with the Web Panel

There are two options in order to create a step. If the WebPanel exists, which is this case, a WizardStep Node can be added, and then set the WebComponent property to the WebPanel that implements the step.

  1. Open the "InvoicePaymentWizard" Web Panel and add a new step to the Wizard.
    AddWizardStep
    Add Wizard Step

  2. Click on the step and change the "WebComponent" property to "SelectInvoice".
  3. Save the changes and Build (F5) your application.

3. Adding a Grid from a Transaction

  1. Go back to "SelectInvoice" web panel.
  2. On the root node, go to "Actions>Add Grid From Transaction" and choose the Invoice transaction.
  3. Select the "Standard Grid".
  4. Use "Attributes".
  5. Delete all attributes except from "InvoiceCode", "InvoiceDate", "InvoiceExpirationDate" and "InvoiceTotal". Save the changes.
    GridInvoices
    GridInvoices

  6. Delete all filters except from generic filter.

4. Customizing the grid

Click on the GridInvoices node and do the following changes to the properties:

  1. Name (Id): Detail
  2. Title: Invoices
  3. Collapsible: True
  4. Conditions: "CustomerId=&CustomerId;InvoicePaymentReceived=false;"
  5. Allow Selection: True
  6. Force MultiRow: True

5. Adding custome code to the events

  1. Go to events node.
  2. Scroll down to 'U_OpenPage' subrutine.
  3. Add the following code:
    CustomeCode123
    Custom Code