Showing results for 
Search instead for 
Did you mean: 

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



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






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


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. 




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


but it should actually say



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!