K2BTools Tutorial - Exercise 10.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.3OpenDynamicLayoutAction
    Open Dynamic Layout Action

  4. See the "Components" section. In this section the dynamic layout's content is declared.
  5. Go to the WebForm. 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.3ChangingDynamicLayouts
    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.3UpdateRelatedPanels
    Update Related Panels

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