cancel
Showing results for 
Search instead for 
Did you mean: 
Carlosr

Building responsive, consistent and reusable apps in your organization - Part 3 : Finalizing the App

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”.

Carlosr_6-1643842962097.png

 

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.

Carlosr_7-1643842962101.png

 

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

 

Parent.Width=10

 

Carlosr_8-1643842962105.png

 

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

Carlosr_9-1643842962106.png

 

 on Chrome.

Carlosr_10-1643842962106.png

 

 

Carlosr_11-1643842962125.png

 

… 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. 

 

 

Comments

A small error: it says to set the DataCard width to 

Parent.Width=10

but it should actually say

Parent.Width-10

 

Otherwise, I'm glad effort is being spent on helping set up best practices for responsive apps! I just built my first and I'll admit that nesting containers can get confusing very quickly!