Add a category
Add a group
CREATE NEW PAGE
Before you start
Lesson 1: K2B Entity Services Pattern
1.1: K2B Entity Services basic usage
1.2: Loading Data
1.3: Advanced Features
1.4: Edit Mode
1.5: Improving your Entity Managers
Lesson 2: Customizing your application
2.1: Customizing objects generated with K2BEntityServices
2.2: Using K2BTrnForm
2.3: Advanced properties in forms
2.4: Using K2BTools Control Types
2.5: Multi-level transactions
2.6: Summing Up
Lesson 3: K2BPrompt Pattern
3.1: Applying K2BPrompt
3.2: Inserting elements from prompt
Lesson 4: Responsive Web Design
4.1: Experimenting with Responsive Web Design
4.2: ShowInX Properties
4.3: Responsive Sizes property
Lesson 5: Adding actions in K2BTools patterns
5.1: In-Grid Actions
5.2: Multirow actions
5.3: Overflow actions menu
Lesson 6: Introduction to Web Panel Designer
6.1: Creating the customer selection grid
6.2: Create the detailed view for the selected customer
6.3: Create the invoices grid
6.4: Add custom code to the Events
6.5: Improving the design
Lesson 7: Creating grids from Data Providers in Web Panel Designer
7.1: Creating a Web Panel with a grid based on a Data Provider
Lesson 8: Filtering Data
8.1: Generic Filters
8.2: Simple Filters
8.3 Multiple Filters
8.4 Date Range Filters
8.5 Advanced Filters
8.6 Column Filters
8.7 Grid View Persistance
Lesson 9: Improving the UI using Dynamic Layouts
Exercise 9.1: Simple Customers List
Exercise 9.2: Simple Product List
Exercise 9.3: Inside a Dynamic Layout
Exercise 9.4: Changing the Dynamic Layout of a Grid
Exercise 9.5: Adding a view to a Work With
Lesson 10: Business Analysis View
Exercise 10.1 - Adding a Business Analysis View to a grid
Exercise 10.2 - Improving the UI of the Business Analysis View
Lesson 11: Design System Configuration
Exercise 11.1 - Design System Configuration basic usage
Exercise 11.2 - Customizing the Design System
Lesson 12: Selection Summary in grids
Exercise 12.1 - Selection Summary Usage
Lesson 13: Wizard User Interfaces
Exercise 13.1 - Creating the Wizard User Interface
Exercise 13.2 - Invoice Selection
Exercise 13.3 - Payment Detail
Exercise 13.4 - Payment Confirmation
Exercise 13.5 - Finishing the Wizard
Lesson 14: Creating a multi-level menu with K2BTools
Exercise 14.1 - Creating a Menu Object
Exercise 14.2 - Using Menu Sublevels
Exercise 14.3 - Using icons in menu options
Exercise 14.4 - Configuring the menu’s RWD properties
Lesson 15: Integrating GAM
Exercise 15.1 - Importing the GAM integration module
Exercise 15.2 - Executing the GAM integration module
Lesson 16: Notifications and Collaboration module
Exercise 16.1 - Installing the notifications and Collaboration module
Exercise 16.2 - Allowing event subscriptions and user comments
Exercise 16.3 - Subscribing to a transaction and adding user comments
Exercise 16.4 - Creating a new event type
Exercise 16.5 - Adding a new action
Exercise 16.6 - Enabling desktop notifications
K2BTools Tutorial - Exercise 9.3: Inside a Dynamic Layout
This documentation is valid for:
In this exercise you will see how dynamic layouts work and how you can change their user interface.
Open the "ProductList" WebPanel.
Go to the "Content" Node.
Run the "Open Dynamic Layout" action.
Open Dynamic Layout Action
See the "Components" section. In this section the dynamic layout's content is declared.
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.
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
Save the Dynamic Layout.
On the contextual menu of the dynamic layout, select the "Update Related Panels" action.
Update Related Panels
Build and see in runtime how both Product and Customer lists now show the image on top of the title.
Was this page helpful?
Your feedback about this content is important. Let us know what you think.
Thank you for your feedback!
More from jreyes
CREATED: 19 MAY 2017 02:07 PM -
UPDATED: 24 FEBRUARY 2022