DesignOps - Sample - Travel Agency multi-experience

Unofficial Content
This documentation is valid for:

This article refers to a design file for a Travel Agency mobile with multiple layouts made with the Sketch design tool and exported by GxDesignOps plugin in .gxsketch format.

Sample download

Download Icon Material Travel Agency Multiexperience.gxsketch

Importing gxsketch file

Basically, you must follow the instructions described in the Sketch Import option article.

Once you select the .gxsketch file from your filesystem, the Sketch to GeneXus dialog will be shown as follows:

ImportDesign-Dialog-MultipleLayouts_20211025162742_1_png

Warning: When you select/unselect nodes, there is no dependency check between nodes. So, for example, if you unselect a node, make sure there is no dependency with another node (e.g. an image used in a panel). Otherwise, some import errors may occur.

As it is described in Multiple Layouts conventions article, every panel will be displayed as a root node with a set of child nodes for each alternative layout. Then, once you import the design, you can open any Panel and you will see there are three layouts for it: Any Platform (phone), Any Tablet 10" (tablet), and Any Web (browser).

ImportDesign-MultipleLayouts_png

Runtime execution

Finally, run the generated Main menu object in order to see the generated panels on every platform.

Warning: Do not expect it to be perfect. It is highly probable that you or your designer must fix something in the design file or the generated objects (abstract layout or theme-class).

Here is a preview of all four panels, showing how they were designed (Artboard column) and how they look at runtime on a specific platform without making any changes (Android/iOS/Browser columns).

Designer Developer
Sketch Artboard GeneXus Android iOS Browser
Home TravelAgency-Mux-Sketch-Home_20211025161332_1_png ViewHome
(Execution: Phone)
TravelAgency-MultiExperience-AndroidPhone-Home_20211025162825_1_png TravelAgency-MultiExperience-iOSPhone-Home_png --
Home - Tablet TravelAgency-Mux-Sketch-Home-Tablet_png ViewHome
(Execution: Tablet)
TravelAgency-MultiExperience-AndroidTablet-Home_png TravelAgency-MultiExperience-iOSTablet-Home_png --
Home - Web TravelAgency-Mux-Sketch-Home-Web_png ViewHome
(Execution: Desktop)
N/A N/A TravelAgency-MultiExperience-WebDesktop-Home_png
Attractions TravelAgency-Mux-Sketch-Attractions_png ViewAttractions
(Execution: Phone)
TravelAgency-MultiExperience-AndroidPhone-Attracions_2021102516303_1_png TravelAgency-MultiExperience-iOSPhone-Attractions_png --
Attractions - Tablet TravelAgency-Mux-Sketch-Attractions-Tablet_png ViewAttractions
(Execution: Tablet)
TravelAgency-MultiExperience-AndroidTablet-Attractions_png TravelAgency-MultiExperience-iOSTablet-Attractions_png --
Attractions - Browser TravelAgency-Mux-Sketch-Attractions-Web_png ViewAttractions
(Execution: Desktop)
N/A N/A TravelAgency-MultiExperience-WebDesktop-Attractions_png
Attraction TravelAgency-Mux-Sketch-Attraction_png ViewAttraction
(Execution: Phone)
TravelAgency-MultiExperience-AndroidPhone-Attracion_png TravelAgency-MultiExperience-iOSPhone-Attraction_png --
Attraction - Tablet TravelAgency-Mux-Sketch-Attraction-Tablet_png ViewAttraction
(Execution: Tablet)
TravelAgency-MultiExperience-AndroidTablet-Attraction_png TravelAgency-MultiExperience-iOSTablet-Attraction_png --
Attraction - Web TravelAgency-Mux-Sketch-Attraction-Web_png ViewAttraction
(Execution: Desktop)
N/A N/A TravelAgency-MultiExperience-WebDesktop-Attraction_png
Trips TravelAgency-Mux-Sketch-Trips_png ViewTrips
(Execution: Phone)
TravelAgency-MultiExperience-AndroidPhone-Trips_png TravelAgency-MultiExperience-iOSPhone-Trips_png --
Trips - Tablet TravelAgency-Mux-Sketch-Trips-Tablet_png ViewTrips
(Execution: Tablet)
TravelAgency-MultiExperience-AndroidTablet-Trips_png TravelAgency-MultiExperience-iOSTablet-Trips_png --
Trips - Web TravelAgency-Mux-Sketch-Trips-Web_png ViewTrips
(Execution: Desktop)
N/A N/A TravelAgency-MultiExperience-WebDesktop-Trips_png

Notes

  • The web application is generated from Panel objects (not Web Panel objects). Learn more about Angular generator.
  • For mobile layouts, in order to display the "Chatbot" option as a floating button, you should set Autogrow with "False" and Overflow Behaviour with "Add Scroll" in the table with Control Name = "Body".
  • Remember to set Rendering Mode = Original in the Image objects when running on iOS. For more information refer to this section.

Scope

Generators Android, Apple, Angular

See also

Availability

This sample has been made for GeneXus 17 Upgrade 5.