cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
glucero1975
Helper III
Helper III

Display fill color of a circle in gallery based on Conct values of another gallery

Ok.  Have an app that I has 2 galleries in one card.  The first gallery display text based on concat function of that choice column on sharepoint list. 

gallery1

text=Concat(ThisItem.PersonaComparisons,Value & Char(10) & "")

items = sharepoint list.

 

Gallery 2 I I have connectedto the same data souce and items =colCompare i created in sharepoint list.  Column title is : PersonaComparisons. This gallery consit of just some icon inputs, just a bunch of circles.

What i am trying to do is have the fill property or visible (which ever is best) to show blue if they match the records in the first gallery and be transparent if they do not match?

3 ACCEPTED SOLUTIONS

Accepted Solutions
RusselThomas
Microsoft
Microsoft

Hi @glucero1975,

Ok, so in gallery one (vertical) you have the distinct list of possible personas as extracted from the column's choice values.

In gallery 2, (horizontal) you have 1 row, with 4 circles in it.

 

With this setup you're going to have to manually map each circle to a static check against a certain persona value.  It could work, but could also get really unpleasant if you ever need to change something, like your formula, or your personas.

 

My approach would be to ensure everything is dynamic, so zero static/hard code and any changes you make won't break your galleries and formulas.  To do this, I'd go with a nested gallery setup - something like this;

nestedgallery.png

 

You have two main galleries;

  1. a left vertical gallery (outlined blue above) that contains the list of available choices, but doesn't utilise interaction (selecting anything on it doesn't affect the view, it's for visual reference only),
  2. a horizontal gallery on the right (outlined in green) that contains the data for each row.

However, instead of manually adding 4 separate circles to the second gallery row (and trying to manage each of their expressions independently), I would instead insert another vertical gallery inside this row. 

 

To do this;

Replace the circles you have with one blank vertical gallery in the row instead.  Make sure the gallery is inserted at the same hierarchical level the circles were - inside the horizontal gallery. 

If you're struggling, use the tree menu on the left to make sure you're inserting the gallery as nested to the main gallery;

nestedgallery2.png

In the above example, RootLevelGallery2 would be your gallery on the left, RootLevelGallery1 would be the gallery on the right, and NestedGallery would be the gallery inside the gallery on the right.

DataLabelForRoot would be a label you already added (which you should already have as SOS Name).  If you're using static/hard-coded labels in your gallery, I'd again strongly suggest using Data instead.  Add a column to your SPOList with a shortened SOS name if you need to, and filter to select the specific rows you want, but avoid static references wherever possible. 

With your gallery nested, set it's Items: property to;

 

 

 

AddColumns(Choices(SPOList.personaComparisons), "thisItemChoiceValues", Concat(ThisItem.personaComparisons, Value, ";"))

 

 

 

Where SPOList is the name of your list. 

This creates a table of two columns for the nested gallery data, specific to each row of the parent gallery;

ValuethisItemChoiceValues
Choice 1Choice 1; Choice 3
Choice 2Choice 1; Choice 3
Choice 3Choice 1; Choice 3

And because the nested gallery is inside another gallery, the nested gallery is repeated for each row.

Now we have, for each row, the list of possible choices, plus the selected choices of the current row, (in the example above, Choice 1 and Choice 3 were selected for this particular row).

Now we have a link between the possible choices, and what was selected for a particular row.

Nothing much would have happened with your gallery at this point, but the last part is the easiest.

 

Now edit the first row of your nested gallery and insert a circle icon.  Again, make sure it's inside the nested gallery and not the parent.  Immediately you should see as many circles/rows as there are choices available.

Then set the circle visibility to;

 

 

 

ThisItem.Value in ThisItem.thisItemChoiceValues

 

 

 

Hopefully this achieves the result you're looking for.

Kind regards,

RT

View solution in original post

RusselThomas
Microsoft
Microsoft

Hi @glucero1975 ,

Looks like you're nearly there 🙂

 

So in the example, RootLevelGallery2 is a vertical gallery on the left of the screen containing the choices - Items: 

 

Choices(SpoList.personaComparisons)

 

With a text label for ThisItem.Value in the Gallery row to show each choice on each row, top to bottom.

 

To the right of this the is RootLevelGallery1 gallery, but as a horizontal gallery taking up the rest of the screen to the right and containing Items:

 

SpoList

 

With two objects in it;

  1. a label for ThisItem.SOSName so it shows on each row, left to right.
  2. the nested items gallery, which is also vertical like the choices gallery (RootLevelGallery2), with the circle inside it

You need to line things up nicely so the rows of the nested gallery and RootLevelGallery2 align, so position your galleries and resize rows/templatesizes accordingly.  I've tried to show it below;

nestedgallery3.png

You can of course change the names of the galleries to suit you, I was just using those names to illustrate the hierarchy.

Hope this helps,

RT

View solution in original post

RusselThomas
Microsoft
Microsoft

Hi @glucero1975 ,

 

Glad to hear it's working, at least functionally if not visually 😊

In terms of scaling/responsive design, I guess the best approach would be to work with available space dynamically or perhaps choose a screen type that's a little friendlier on scaling.  Sorry I can't be more help here, I tend to avoid responsive design (mainly because I'm lazy), but I see there are some write ups to help guide you online - just not sure if they would be applicable (or how) with your screen cards...

Building responsive canvas apps - Power Apps | Microsoft Docs

Kind regards,

RT

View solution in original post

12 REPLIES 12
RusselThomas
Microsoft
Microsoft

Hi @glucero1975 ,

 

What links

 

["Acute Patient", "E2E Obstructive", "Emergency Patient"]

 

to

 

["CIO", "CMO", "Nursing Director", "CEO"]

 

?

I'm trying to understand what your condition would be that determines whether a circle is visible or not.

Eg: 

"Circle must be visible if (what value and where is it?) = (what value and where is it?)"

 

Kind regards,

RT

 

glucero1975
Helper III
Helper III

Each title:

["Acute Patient", "E2E Obstructive", "Emergency Patuent"] represents a row/record in the sharepoint list. Within each record there is a choice column that had multiple values of all the personas that are used for that specific title. 

 

My goal was to have the circle visibile if that record matched the persona and not visible if the persona was not within the record. 

RusselThomas
Microsoft
Microsoft

Hi @glucero1975,

Ok, so in gallery one (vertical) you have the distinct list of possible personas as extracted from the column's choice values.

In gallery 2, (horizontal) you have 1 row, with 4 circles in it.

 

With this setup you're going to have to manually map each circle to a static check against a certain persona value.  It could work, but could also get really unpleasant if you ever need to change something, like your formula, or your personas.

 

My approach would be to ensure everything is dynamic, so zero static/hard code and any changes you make won't break your galleries and formulas.  To do this, I'd go with a nested gallery setup - something like this;

nestedgallery.png

 

You have two main galleries;

  1. a left vertical gallery (outlined blue above) that contains the list of available choices, but doesn't utilise interaction (selecting anything on it doesn't affect the view, it's for visual reference only),
  2. a horizontal gallery on the right (outlined in green) that contains the data for each row.

However, instead of manually adding 4 separate circles to the second gallery row (and trying to manage each of their expressions independently), I would instead insert another vertical gallery inside this row. 

 

To do this;

Replace the circles you have with one blank vertical gallery in the row instead.  Make sure the gallery is inserted at the same hierarchical level the circles were - inside the horizontal gallery. 

If you're struggling, use the tree menu on the left to make sure you're inserting the gallery as nested to the main gallery;

nestedgallery2.png

In the above example, RootLevelGallery2 would be your gallery on the left, RootLevelGallery1 would be the gallery on the right, and NestedGallery would be the gallery inside the gallery on the right.

DataLabelForRoot would be a label you already added (which you should already have as SOS Name).  If you're using static/hard-coded labels in your gallery, I'd again strongly suggest using Data instead.  Add a column to your SPOList with a shortened SOS name if you need to, and filter to select the specific rows you want, but avoid static references wherever possible. 

With your gallery nested, set it's Items: property to;

 

 

 

AddColumns(Choices(SPOList.personaComparisons), "thisItemChoiceValues", Concat(ThisItem.personaComparisons, Value, ";"))

 

 

 

Where SPOList is the name of your list. 

This creates a table of two columns for the nested gallery data, specific to each row of the parent gallery;

ValuethisItemChoiceValues
Choice 1Choice 1; Choice 3
Choice 2Choice 1; Choice 3
Choice 3Choice 1; Choice 3

And because the nested gallery is inside another gallery, the nested gallery is repeated for each row.

Now we have, for each row, the list of possible choices, plus the selected choices of the current row, (in the example above, Choice 1 and Choice 3 were selected for this particular row).

Now we have a link between the possible choices, and what was selected for a particular row.

Nothing much would have happened with your gallery at this point, but the last part is the easiest.

 

Now edit the first row of your nested gallery and insert a circle icon.  Again, make sure it's inside the nested gallery and not the parent.  Immediately you should see as many circles/rows as there are choices available.

Then set the circle visibility to;

 

 

 

ThisItem.Value in ThisItem.thisItemChoiceValues

 

 

 

Hopefully this achieves the result you're looking for.

Kind regards,

RT

View solution in original post

glucero1975
Helper III
Helper III

all formulas work but it does not look correct.  Everthing is vertical

RusselThomas
Microsoft
Microsoft

Hi @glucero1975 ,

Looks like you're nearly there 🙂

 

So in the example, RootLevelGallery2 is a vertical gallery on the left of the screen containing the choices - Items: 

 

Choices(SpoList.personaComparisons)

 

With a text label for ThisItem.Value in the Gallery row to show each choice on each row, top to bottom.

 

To the right of this the is RootLevelGallery1 gallery, but as a horizontal gallery taking up the rest of the screen to the right and containing Items:

 

SpoList

 

With two objects in it;

  1. a label for ThisItem.SOSName so it shows on each row, left to right.
  2. the nested items gallery, which is also vertical like the choices gallery (RootLevelGallery2), with the circle inside it

You need to line things up nicely so the rows of the nested gallery and RootLevelGallery2 align, so position your galleries and resize rows/templatesizes accordingly.  I've tried to show it below;

nestedgallery3.png

You can of course change the names of the galleries to suit you, I was just using those names to illustrate the hierarchy.

Hope this helps,

RT

View solution in original post

glucero1975
Helper III
Helper III

Sorry, meetings.  I will work on this and let you know.  Thank you so much, your help has been a life saver..

glucero1975
Helper III
Helper III

OK.  got all ofthat sorted out and displaying with a little more formatting needed.  There is one more layer.

 

I have created a comapre modal that fills in when the cars in the master gallery are selected.  The label currently is set to ThisItem.Title.   How would I label it so it only shows those cards that have been selected?  It works in my gallery above as I have the items ofthat gallery set to colCompare. (a column I created in my sharepoint list).  Will this work and still give me the circles or each row in the left gallery?

RusselThomas
Microsoft
Microsoft

Hi @glucero1975,

I think you lost me a little bit on that last one 😁

Could you perhaps share some screenshots or just a ppt slide or drawing of what you mean?

Kind regards,

RT 

glucero1975
Helper III
Helper III

OK. I have attached a few frames to show the flow.  basically I have a checkbox on one gallery that populats to pop up modal.  Those items then popultate to another galley for the are the same items.  I then created labels to pull specific data from those selected recordds (rows) on my sharepoint list.  That is what you see on the top 2 galleries on the comapre screen. My question is then I still want topull all options to the left gallery each on its own like just like we have.  The second nested gallery on the right with the circles, that is where I want ot to diplay only for those selcted cards so they match the top 2 galleries and not the entire sharepoint list as it is looking now.

Helpful resources

Announcements
2022 Release Wave 1 760x460.png

2022 Release Wave 1 Plan

Power Platform release plan for the 2022 release wave 1 describes all new features releasing from April 2022 through September 2022.

Community Connections 768x460.jpg

Community & How To Videos

Check out the new Power Platform Community Connections gallery!

Top Solution Authors
Top Kudoed Authors
Users online (2,334)