cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Future_Vision
Post Prodigy
Post Prodigy

Can you use a scrollable screen in a component?

I am exploring creating a component with functionality of a scrollable screen. I hijacked the canvas from the scrollable screen in app development and it pastes successfully in a component but I can't seem to get it to render when I place that component back in a screen. Is it even possible?

10 REPLIES 10
RandyHayes
Super User
Super User

@Future_Vision 

Yes, you can use canvas controls in a component.  Works perfectly well.  What issue are you experiencing?  

Your component size should be larger (as large as) the canvas you have in place and your datacards can be pretty much anything.

 

_____________________________________________________________________________________
Digging it? - Click on the Thumbs Up below. Solved your problem? - Click on Accept as Solution below. Others seeking the same answers will be happy you did.
Check out my PowerApps Videos too! And, follow me on Twitter @RandyHayes

Really want to show your appreciation? Buy Me A Cup Of Coffee!
Future_Vision
Post Prodigy
Post Prodigy

@RandyHayes 
Hmm. I had the canvas constrained to the component size I think. Problem I believe I was having was the cards were collapsing on top of each other. That is if I recall correctly. I need to revisit since you say it works perfecting fine.

Future_Vision
Post Prodigy
Post Prodigy

This is what the compnent looks like and what it looks like when added to the screen

Future_Vision_0-1627306621980.pngFuture_Vision_1-1627306651257.png

 

RandyHayes
Super User
Super User

@Future_Vision 

I assume the three sections are three different datacards in your canvas control in the component.  If so, then I duplicated what you showed and it appears fine when inserted in the app:

RandyHayes_0-1627310088104.png

It is not entirely reliable though as changes to the component require you (in many cases) to remove the inserted component and then add it back to be correct.

I use canvas controls often in Components, but not for their visual purposes such as scrolling.  Primarily for the datacard functions.  So I can't vouch completely for the functionality of the canvas scrolling ability, but these preliminary results seem to indicate that it works, albeit a bit shaky.

_____________________________________________________________________________________
Digging it? - Click on the Thumbs Up below. Solved your problem? - Click on Accept as Solution below. Others seeking the same answers will be happy you did.
Check out my PowerApps Videos too! And, follow me on Twitter @RandyHayes

Really want to show your appreciation? Buy Me A Cup Of Coffee!
Future_Vision
Post Prodigy
Post Prodigy

@RandyHayes 
Scrollability would be of some interest but it is possible that I might not need it. My attempt was to create a menu with collapsible sections. Of course if I allow for them all to be expanded at the same time then I would need scrolling but I don't think that is necessary.  As of right now the only way I see to make these sections is to put those blue title bars in cards as well. Then add the typical code to collapse a card by setting visible to false under the correct circumstances. Why the visual gets all wonky when added to a screen is beyond me. Deleting and re-adding fixes the visual but the collapsing behavior is broken. Perhaps there is a better way to implement this?

 

Just a little clarity on the collapsing issue. When previewing in the component it works great regardless of whether I have a fixed height on the card or something like 100%. In the screen clicking the button only hides the text. The card remains expanded.

RandyHayes
Super User
Super User

@Future_Vision 

Actually, one of the issues you will run into more is that, in order to really maintain "state" of collapsed and expanded within the component, you will need to utilize a variable.  If you have the desire to use your component in more than one screen, then you will run into issues as the components currently share the same variable internally - quite annoying!!

Next is the dynamic hide/show factor of the datacard.  This just doesn't work properly in the component.  

This is all where you start to really grasp the concept of "experimental" from the app settings for components!!

 

I find that a gallery in the component is a good choice for being able to provide more flexibility on visibility while doing the type of look that you are going for.  With the Gallery you can filter and thus change visible attributes.

Using a Gallery, you can get results like this component visual below - I think this might be where you're trying to get to.  

futurevision.gif

The above component uses 1 Gallery with a label in it.  No other controls and no variables used.  Although not shown, since it is a gallery, if the choices expand beyond the bottom, the scroll bar will appear.

 

 

_____________________________________________________________________________________
Digging it? - Click on the Thumbs Up below. Solved your problem? - Click on Accept as Solution below. Others seeking the same answers will be happy you did.
Check out my PowerApps Videos too! And, follow me on Twitter @RandyHayes

Really want to show your appreciation? Buy Me A Cup Of Coffee!
Future_Vision
Post Prodigy
Post Prodigy

@RandyHayes 

Thanks Randy. I was looking at possibly using a gallery. Definitely looks like the right solution. I also get the need of having a datasource underpinning all of this since changes made in this component won't persist with a refresh.

RandyHayes
Super User
Super User

@Future_Vision 

It seemed like you were trying to make more of a "menu" type component - or something like that.

In general, your components should be very simple in regard to data.  They should take input properties and display information, react to it and potentially provide output properties.  It would still be necessary to write formulas in your actual app that respond to actions in the components and to provide property values as needed.

_____________________________________________________________________________________
Digging it? - Click on the Thumbs Up below. Solved your problem? - Click on Accept as Solution below. Others seeking the same answers will be happy you did.
Check out my PowerApps Videos too! And, follow me on Twitter @RandyHayes

Really want to show your appreciation? Buy Me A Cup Of Coffee!
Future_Vision
Post Prodigy
Post Prodigy

@RandyHayes 

The component is ultimately a form that is used to set control properties to be used in the app and store in a database as the default settings for the app. On reload this component will retrieve those values and the app will use those values. I'm looking at changing the theme json file to use the variables set by the component as the default value. At least in my mind this is what I am imagining. No doubt I'm missing some critical component in this thought process.

Helpful resources

Announcements
UG GA Amplification 768x460.png

Launching new user group features

Learn how to create your own user groups today!

Community Connections 768x460.jpg

Community & How To Videos

Check out the new Power Platform Community Connections gallery!

Welcome Super Users.jpg

Super User Season 2

Congratulations, the new Super User Season 2 for 2021 has started!

Carousel 2021 Release Wave 2 Plan 768x460.jpg

2021 Release Wave 2 Plan

Power Platform release plan for the 2021 release wave 2 describes all new features releasing from October 2021 through March 2022.

Top Solution Authors
Users online (2,421)