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

[glucero1975]

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?

[RusselThomas]

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]

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 · Accepted solution]

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;

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;

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;

Value	thisItemChoiceValues
Choice 1	Choice 1; Choice 3
Choice 2	Choice 1; Choice 3
Choice 3	Choice 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

[glucero1975]

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

[RusselThomas · Accepted solution]

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;

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

[glucero1975]

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

[glucero1975]

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]

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]

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.