{"id":32075,"date":"2022-07-04T12:43:53","date_gmt":"2022-07-04T07:13:53","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=32075"},"modified":"2023-05-31T17:56:49","modified_gmt":"2023-05-31T12:26:49","slug":"adding-custom-pages-in-model-driven-app-with-responsive-layouts","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2022\/07\/adding-custom-pages-in-model-driven-app-with-responsive-layouts\/","title":{"rendered":"Adding custom pages in model-driven app with responsive layouts"},"content":{"rendered":"

Introduction<\/strong><\/h2>\n

Microsoft is continuously working on enhancing the maker experience for app design. The new maker experience is all about designing the pages throughout. These custom pages bring the power of Canvas apps into model-driven apps.<\/p>\n

We have already seen the modern app making experience in the previous blog<\/a> when the modern app designer maker experience was in preview. But with the recent release, you will observe this modern app-maker experience is OUT OF PREVIEW and this feature is ready for production deployment. Also, you can refer this blog<\/a> to learn how to include the standalone custom page in the model-driven app navigation.<\/p>\n

In this blog, we will continue with the same example of adding a gallery component with the contacts listed. Moreover while adding custom pages in a model-driven app we will explore how with the help of container controls and the PowerApps formula we can make the custom pages responsive in nature.<\/p>\n

Checkpoints<\/strong><\/p>\n

While adding custom pages in a model-driven app make sure to maintain responsiveness because the model-driven app has the inbuilt capability of being fully responsive in nature but custom pages do not.<\/p>\n

If you scroll to different screen resolution sizes you will find the model-driven app components are responding accordingly and fit different resolution sizes without doing anything. While creating or adding pages if you want to maintain the same responsiveness you can achieve this by enabling a responsive layout with container controls. You can find more details about it in this doc<\/a>.<\/p>\n

Responsive custom pages configuration set up:<\/strong><\/p>\n

For this demonstration, I added a gallery component with contacts with and without a responsive layout as below:<\/p>\n

Contacts page without responsive layout in the app navigation:<\/strong><\/p>\n

As you can observe in the below screenshot, a page added in navigation has not filled the entire space of the screen and has not been resized based on available space.<\/p>\n

\"model-driven<\/p>\n

Contacts page with responsive layout in app navigation:<\/strong><\/p>\n

By using responsive layouts and implementing formulas you can configure custom pages to fill the entire space and to resize based on available space as shown below:<\/p>\n

\"model-driven<\/p>\n

For making the responsive page take the help of layout components of \u201cvertical container\u201d and \u201chorizontal container\u201d and adjust the properties from dropdown menu (explained later).<\/p>\n

To design responsive page simply set the topmost container to fill the entire space and go on adding another components inside this container so that they will be responsive too. Make the use of below Power Apps formula for configuring the top most container properties for responsiveness:<\/p>\n

\"model-driven<\/p>\n

In the \u201cTree view\u201d navigate to Layout and Insert the \u201cVertical container\u201d as shown below:<\/p>\n

\"model-driven<\/p>\n

Within the \u201cVertical container\u201d from the dropdown list of properties, select the \u201cX\u201d property which we are going to set to zero.<\/p>\n

\"model-driven<\/p>\n

Post changing \u201cX\u201d property to zero, observe the changes happened to vertical container. It shifted at the X=\u201c0<\/strong>\u201d position as shown below:<\/p>\n

\"model-driven<\/p>\n

Similarly, change the \u201cY\u201d property to zero, and observe the changes that happened to vertical container. Here, it shifted at the Y=\u201c0\u201d <\/strong>position as shown below:<\/p>\n

\"model-driven<\/p>\n

After this, we want the total width and height to resize based on the width and height of underlined parent whole screen.<\/p>\n

We will select the \u201cWidth\u201d property from dropdown of properties and rather than absolute value we will implement the formula here Width=\u201cParent.Width\u201d <\/strong>as shown below:<\/p>\n

\"model-driven<\/p>\n

NOTE:<\/strong> This formula makes the width same as that of parent width, which is the whole screen here.<\/p>\n

Similarly, change the \u201cHeight\u201d property from the dropdown of properties, and rather than the absolute value we will implement the formula here Height=\u201cParent.Height\u201d<\/strong> as shown below:<\/p>\n

\"model-driven<\/p>\n

NOTE:<\/strong> This formula makes the height which is same as that of the parent height, which is the whole screen here.<\/p>\n

As shown above, post properties changes above, container has now accommodated the complete whole screen as shown in above screenshot.<\/p>\n

Once done, quickly add other components like label and contact gallery etc.<\/p>\n

Adding Horizontal container:<\/strong><\/p>\n

Under the top most vertical container add a horizontal container and you will observe that it will also start working as a responsive component. For the label you can adjust the height as per desire.<\/p>\n

Provide any desired absolute value (for e.g. = 50) in the \u201cHeight\u201d property by turning off the \u201cFlexible height\u201d property as highlighted below:<\/p>\n

\"model-driven<\/p>\n

Adding Label within the Horizontal container:<\/strong><\/p>\n

After adding label under the horizontal container, you can configure \u201cAlignment\u201d, \u201cColor\u201d, and \u201cFlexible width\u201d as highlighted below:<\/p>\n

\"model-driven<\/p>\n

Adding Contact Gallery within the top most Vertical container:<\/p>\n

Add contact gallery under the top most vertical container. It will also work as aresponsive component and will accommodate the whole space.<\/p>\n

\"model-driven<\/p>\n

Post this changes add the page in Model driven app and you are good for using this page within model driven app.<\/p>\n

Adding the custom page in the model driven app:<\/strong><\/p>\n

\"model-driven<\/p>\n

And here you can see that the added contact page in app navigation is fully responsive in nature:<\/p>\n

\"\"<\/p>\n

Conclusion<\/strong><\/h2>\n

In this way, with the help of container controls we can make responsive layouts for the custom pages while adding it into model driven app.<\/p>\n

Let us help you with application building!<\/div><\/div><\/h3>\n

Want to visualize and build up a Model Driven App<\/a> atop your steady, working framework?
\nWe\u2019ll help you to add components to your Apps, breezily. Contact us at crm@inogic.com<\/a> and our Microsoft Dynamics 365 and Power Platform Inogic- Professional Services<\/a> Division will help you at every step of the process!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

Introduction Microsoft is continuously working on enhancing the maker experience for app design. The new maker experience is all about designing the pages throughout. These custom pages bring the power of Canvas apps into model-driven apps. We have already seen the modern app making experience in the previous blog when the modern app designer maker\u2026 Read More »<\/a><\/span><\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[16,18,2576,2361],"tags":[1194],"class_list":["post-32075","post","type-post","status-publish","format-standard","hentry","category-dynamics-365","category-dynamics-365-v9-2","category-model-driven-app","category-technical","tag-model-driven-app"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/32075","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/comments?post=32075"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/32075\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=32075"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=32075"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=32075"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}