How to build a canvas app that behaves like a website without being a portal (navbars and partials)

[camer314]

I am writing a canvas app that will never be used on a mobile device so I am wanting it to behave more like a traditional website (without creating a portal app)

Please refer below diagram.

I have written a PCF component that acts as a tab control (based off Fluent UI). I want that to be in a fixed header across the top. On the right side is a fixed panel top to bottom. Then in the middle is the tab specific content, which in turn is split into left and right panels, each which should independently vertical scroll.

On the surface the new horizontal and vertical containers offer a nice solution as I am able to easily lay down the top and right panels. The issue however is the dynamic nature of the tab content. Ideally I could create separate screens for each tab and get them to render in the available space based on tab selection, however clearly that is not a feature (cool if it was!).

That leaves me with trying to create all the tab page content in some sort of sub-canvas (like when you add a scrolling screen) but this quickly gets unwieldly as you have to adjust each section and show and hide section based on tab selection. This turns into a nightmare, especially as some tab screens have quite a few controls.

So my question is, what is the best and most efficient way to lay this out such that there is a fixed right and top but another section whose content changes entirely based on tab selection?

 

[RandyHayes · Accepted solution]

@camer314 

The Canvas control with appropriate DataCard would give you what you need without all the extra hassle.  

Put a canvas on the screen and "fix" the top and right panes to give you the dimensions you want.  Then for the main content, simply set their visibility based on your tab content.

I'm not sure of your need for a custom PCF control for tabs - this is something you can do easily in PowerApps with the standard controls.  It's often done with just a simple horizontal gallery with a fixed record table to define the elements in it.  Then, in your datacards you can simply refer (in the visible property) to the gallery and the selected item (tab).

We do this method all the time in apps for the ability to have tabs - works great!

I hope this is helpful for you.

[camer314]

Thanks @RandyHayes that will work however it is still quite cumbersome trying to manage multiple large scrolling data cards on a single canvas (from the studio perspective) and I am also not sure on the performance of this browser side. But aside from that yes this will work.

I think the idea of having partial views which you can independently create in the studio (like local code components), would be a useful addition to the product, am going to add that to the feature requests.

[RandyHayes]

@camer314 

Actually, if you have the visibility set on the datacards depending on the tabs gallery, then the cards will not scroll (unless you want them too) and only one at a time is visible and editable in the editor.  

As I mentioned - we use this method all the time and it works great.  Never have seen any performance issues in browsers, mobile or other.  It uses the same HTML object model as any other control, so it is never an issue.

If you start using them a bit, I believe you'll find they are pretty much what you are thinking for the partial view concept.

If you have any more questions on it, just let me know.

[camer314]

@RandyHayes 

Yes I had discovered this independently as I got to grips with it all. I wanted it to be responsive as well so in some sort of Russian Doll setup I have a page with a logo pane, a tab pane then a horizontal container with 2 panes inside, one for my fixed right and the other is a canvas with a data card for each tab, which I have set to auto size to the canvas size, and then from within each card I have more responsive containers to get the desired look and feel. It does work pretty good, and using a combination of responsive containers and old fashioned offsets can get it all to resize great.

I actually thought that by showing and hiding the cards based on tab selection would make editing a pain but it actually makes it a lot easier so thanks again.