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.
    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.
    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.
    Update Related Panels

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