SD Designer Tutorial - Exercise 1: Creating List SD Panels

In this exercise you will see how a “List” SD Panel can be created with SD Designer.:

Before you start: Theme selection

The application’s theme must be set before starting. To do this, open the “Work With Devices” pattern configuration and select “K2BFlatAndroid” as the theme for the “Any Android” node, and “K2BFlatIOS” as the theme for the “Any iOS” node.

WorkWithDevicesConfiguration AnyAndoridExample
WorkWith Devices Configuration Any Android Selection

Create List SDPanel

  1. Find the “Customer” transaction in the KB Explorer.
  2. In its contextual menu, execute the action “Create Designer Object -> Create List SD Panel”.
    CreateListSDPanel
    Create List SD Panel


    Note: At this point, a warning may be shown, indicating that the KB’s Basic Objects are outdated. Click “OK” to import the latest version of these objects. This occurs only once, the first time the tool is used.
  3. When executing that action, we have told SD Designer that we wish to create an SD Panel containing a list of customers. Now, a dialog will be shown so that you can select the list’s design. In this exercise, select the “Simple People List” option.
    AddGridFromTransctionChooseLayoutSD
    Layout selection

  4. A dialog will appear where you must choose to create the grid using attributes or variables, choose attributes for this example.
  5. At this stage, SD Designer will analyze the transaction’s structure to infer which attributes should be used in the grid, and which filters to use. With this information, a new SD Panel will be created with the “Designer” part initialized. The generated tree will look like the following image.
    SDTutorialGridCustomer
    SD Panel initialization

  6. Select the “CustomerSearchResult” attribute in the “Summary” node.
    SDTutorialSummaryAttributeSelection
    Summary attribute selection

  7. Set the title to “Customers” in the root node.
  8. Delete the “FromCustomerBirthday”, “ToCustomerBirthDay”, and “CityName” filters.
  9. Save the panel with the name “CustomerList”.
  10. Set the “Main Program” property to “True”.
  11. If using Android, set the “Android Base Style” property in the SD Panel object to “Light”.
    SDTutorialAndroidBaseStyle
    Android Base Style property

  12. Execute the SD Panel and see the result.