The goal of this series is to build a reference app that demonstrates possible design patterns to help us make applications that are structured, predictable, and maintainable.

See Building responsive, consistent and reusable apps Part 1 : Components,  and Building responsive, consistent and reusable apps Part 2 : The App.

We will now add additional features to make this app work well on multiple device form factors.

Display Settings

The settings panel has a display tab that allows us to disable scaling and orientation lock to facilitate a more fluid layout.  We open File, Settings, Display and uncheck “Scale to fit”.

Adaptive Layout

In the previous article, we placed the form and gallery in containers to allow the sizing to fill the available space.  Unfortunately, with a vertical phone layout, we have less horizontal space, so lets hide the form until we enter edit mode and vice versa.  To determine if we need to respond to these settings, we will use ContactScreen.Size. We set the ContactGallery.Visible property to

ContactScreen.Size > ScreenSize.Medium || EditMode = FormMode.View

Also ContactForm.Visible set to

ContactScreen.Size > ScreenSize.Medium || EditMode <> FormMode.View

When one is visible, the other isn’t.  We need to set the Header and footer to flexible width by setting “Align in Container” to Stretch and reducing the minimum width to 200.

We also need to set the width of each DataCard on the form to

Parent.Width=10

This sets the width to match the parents, -10 to allow for scroll bar and margin.

Testing

To test this, you need to save and publish the app.  The preview of the app does not render properly in a mobile form factor.

Once its published, use dev tools (Ctrl-Shift-I) then click on Device Emulation on Edge or Device Toolbar

 on Chrome.

… and that’s it.   I hope you enjoyed this series.  Please reach out to me if you have any ideas that you would like me to help with.