cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
JamesM
Level 8

Drag and drop elements onto Canvas to create a 'card/panel' of information within a gallery?

This may be too much of an ask for PowerApps, but I'm interested in this UI technique. 

 

See the image below as my wireframe example: 

2018-10-05 11_06_09-Window.pngI would like to be able to create elements on the left hand side (buttons or labels seem the best fit) and have the user be able to drag and drop those elements onto the main area, and have the drop action trigger the addition of a card or panel to a carousel of cards/panels of information, with that carousel able to be cycled through left or right, like a horizontal gallery. This would be essentially an interactive dashboard, with each card being added and getting relevent data based on a server name variable that is already stored on that screen. Is this even possible? The cards themselves would likely be a title, subtitle, a numeric figure or a graph, and perhaps some complimentary icons to click for drilling down into a 'detail' view of that card.  I realise that's a lot of stuff, but even just a starting point on this journey would be great. 

5 REPLIES 5
Super User
Super User

Re: Drag and drop elements onto Canvas to create a 'card/panel' of information within a gallery?

Hi @JamesM,

i’m pretty sure that the powerapps UI will not allow users to drag and drop controls. However button presses can control the visibility of one or more controls through the UpdateContext() function. Shane Young @Shanescows has a great video on using variables in Powerapps for controlling the UI. If you want to see user movable controls, make a suggestion on the Ideas forum.

Check out Shane’s video at https://www.youtube.com/watch?v=e2_BGekECfY

 

JamesM
Level 8

Re: Drag and drop elements onto Canvas to create a 'card/panel' of information within a gallery?

I thought it might be a bit beyond the abilities of PowerApps Smiley Happy Thanks. Just a question though, if I had it set up as something more simple, e.g. click the label and it vanishes from the left hand side, can I programatically create new gallery items or galleries of custom cards (themselves a mixture of controls like a chart, title etc etc)? To give the illusion of the user adding or removing items from the gallery/carousel? 

Super User
Super User

Re: Drag and drop elements onto Canvas to create a 'card/panel' of information within a gallery?

@JamesM,

yes, you would do that using UpdateContext() by creating a variable that is used as the Visible property in other controls and labels. UpdateContext({showvar:!showvar}) will work to toggle the visibility of one or more controls when used as the OnSelect property of a button. You can even change the button’s text by using an If() function in its Text property like If(showvar,”Show graph”,”Hide graph”)

If this resolves your issue please mark the answer as solved.

JamesM
Level 8

Re: Drag and drop elements onto Canvas to create a 'card/panel' of information within a gallery?


@Drrickryp wrote:

@JamesM,

yes, you would do that using UpdateContext() by creating a variable that is used as the Visible property in other controls and labels. UpdateContext({showvar:!showvar}) will work to toggle the visibility of one or more controls when used as the OnSelect property of a button. You can even change the button’s text by using an If() function in its Text property like If(showvar,”Show graph”,”Hide graph”)

If this resolves your issue please mark the answer as solved.


So you're saying that if I wanted the press of a button to create new gallery items based on some data (or create another custom card/control that was composed of multiple controls itself, e.g. a chart, some labels, icon etc) I have to have all of those controls I want to create already created, and just made invisible? Then made visible each time the person presses a button? Seems clunky. There's no way to programtically create a control like a data card or other on the press of a button? 

KroonOfficeSol
Level 10

Re: Drag and drop elements onto Canvas to create a 'card/panel' of information within a gallery?

@James

Yes this is right. In your example you have basically 5 combinations (one without selected button and four combinations) and I think you have two options.

Option 1 is to make 5 charts and show them based on the variables you set on the Buttons.

Option 2 is to use one chart an use the If() formula on the parameters and only put in a true value with your selection.  (I did not test is, so don't know if this is really possible)

 

On the buttons you can toggle by set the variable to the opposite, like:

 

UpdateContext({MyVariable:!MyVariable})

 

 

If you want the value to be able to placed at the x and y (so more then two states) then I suggest you use a number variable. This you can achieve by using a switch() formula on your button. Like:

 

Switch(MyVariable,
        1, UpdateContext({MyVariable:2}),
        2, UpdateContext({MyVariable:0}),
UpdateContext({MyVariable:1}) )


The If() formula is then like:

If(MyVariable = 1, filterValue on X)

 

Hope this helps.

 

Greatings Paul