Pages - Adapting to Different Screen Sizes (Adaptations)

Adaptations automatically change the look, feel, actions and navigation route in an app based on the screen size that the device the app is running on makes available to the app.
When an app is running on a device (a phone, a desktop, a tablet, etc.) the app knows how much physical screen space is available to it. In devices like phones this will be the entire screen size but on desktops and some tablets it could be a portion of the screen size.
The available screen size is measured in terms of width and height. Equally, each Adaptation is based on the width or the height of the available screen space being at or below a certain size. There are standard screen sizes and also standard screen resize points and Evoke offers these as dropdown options for each width or height option.
A full list and examples of use of each Adaptations available within Evoke is provided at the full list of Evoke Adaptations link.
This section included examples of using Adaptations to make a single design fit to whatever screen size your app is running on.
Multi Entity Grids
There are multiple adaptations that you should use when displaying a multiple entity grid on a smaller screen e.g. phone or tablet. The most common are:
  • Hiding Columns from the data grid when the screen width is below x

  • Adding or removing additional Navigation to other Pages to see the data that is hidden on a small screen by enabling or disabling click navigation

  • Using alternate column headers that are shorter to fit the available space (ShowAlternateColumnHeaders)

Although other adaptations for use with Grids exist and reference should be made to demonstration apps or Evoke support for helps and guidence with these.
Single Entity Data Segments
There are adaptations that you should consider when displaying single entity data on a smaller screen e.g. phone or tablet. The most common are:
  • Displaying the prompt/label above the data instead of before it on the same line

  • Hiding segments that are next to each other and showing them in a vertical column (Hide or Show segments)

  • Using alternate prompts that are shorter to fit the available space (ShowAlternatePrompts)

Other adaptations for use with Grids exist and reference should be made to demonstration apps or Evoke support for helps and guidence with these.
Other frequently used adaptations
There are adaptations that you should consider when displaying single entity data on a smaller screen e.g. phone or tablet. The most common are:
  • Displaying the prompt/label above the data instead of before it on the same line

  • Hiding segments that are next to each other and showing them in a vertical column (Hide or Show segments)

  • Using alternate prompts that are shorter to fit the available space (ShowAlternatePrompts)

Other adaptations for use with Grids exist and reference should be made to demonstration apps or Evoke support for helps and guidence with these.
Example of the Adaptations used on the images on this page
The adaptations set on the Grid on the screens above are: