Migrate a WebPanel to Responsive Web Design without WorkWithPlus

This item shows an example of the effort needed in order to migrate just one Web Panel developed manually with GeneXus (without WorkWithPlus) from HTML design to Responsive Web Design.

Initial Web Form - HTML

MigrateaWebPanelToRWDwithoutWorkWithPlusImg01

At runtime, it looks like this:

MigrateaWebPanelToRWDwithoutWorkWithPlusImg02

Step 1: Empty the Web Form and change the Base Web Form to abstract

MigrateaWebPanelToRWDwithoutWorkWithPlusImg03

Step 2: Delete the html node and drag tab control

MigrateaWebPanelToRWDwithoutWorkWithPlusImg04

Step 3: Customize the first tab's caption

MigrateaWebPanelToRWDwithoutWorkWithPlusImg05​​​​​​​

Step 4: Add a responsive table and drag the attributes of the first tab

MigrateaWebPanelToRWDwithoutWorkWithPlusImg06​​​​​​​

Step 5: Add an html node in order to add a bootstrap panel control

MigrateaWebPanelToRWDwithoutWorkWithPlusImg07​​​​​​​

Step 6: Double click in the html node, add panel

MigrateaWebPanelToRWDwithoutWorkWithPlusImg08​​​​​​​

Step 7: customize the panel title, and add a layout control

MigrateaWebPanelToRWDwithoutWorkWithPlusImg09​​​​​​​

Step 8: Add a responsive table in the layout with 2 columns and add the attributes inside

MigrateaWebPanelToRWDwithoutWorkWithPlusImg10​​​​​​​

Step 9: Proceed to customize second and third tab in the same way as the first one

MigrateaWebPanelToRWDwithoutWorkWithPlusImg11​​​​​​​

MigrateaWebPanelToRWDwithoutWorkWithPlusImg12​​​​​​​

Step 10: Add the actions in an action group

MigrateaWebPanelToRWDwithoutWorkWithPlusImg13​​​​​​​

MigrateaWebPanelToRWDwithoutWorkWithPlusImg14​​​​​​​

MigrateaWebPanelToRWDwithoutWorkWithPlusImg15​​​​​​​

Step 11: Customizations for different browser sizes

After migrating the Web Form to Abstract layout, you could configure the specific Responsive Web Design properties:

  • Width of the controls for the different browser's sizes
  • Visible/Hidden of the controls for the different browser's sizes​​​​​​​

Summary:

All these steps were needed in order to migrate just one Web Form from HTML to Responsive Web Design.

So, in order to migrate the whole application you would have to go through this process for each Web Form of the application, which is a tedious, manual and very hard work.