K2BTools Tutorial - Exercise 9.3: Inside a Dynamic Layout

In this exercise you will see how dynamic layouts work and how you can change their user interface.

  1. Open the "ProductList" WebPanel.
  2. Go to the "Content" Node.
  3. Run the "Open Dynamic Layout" action.
    Lesson10.3OpenDynamicLayoutAction2
    Open Dynamic Layout Action

  4. See the "Components" section. In this section the dynamic layout's content is declared.
  5. Go to the "Web Layout" tab. In this part the developer specifies where the components are located in the user interface and how are going to be visualized.
  6. Swap the Variable_Photo with the Varible_Title so that the Variable_Photo appears on top of the Title.
    Lesson10.3ChangingDynamicLayouts1
    Changing the UI of a Dynamic Layout

  7. Save the Dynamic Layout.
  8. On the contextual menu of the dynamic layout, select the "Update Related Panels" action.
    Lesson10.3UpdateRelatedPanels1
    Update Related Panels

  9. Build and see in runtime how both Product and Customer lists now show the image on top of the title.