cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
hpkeong
Level 10

Useful Features of PowerApps (13) - Gallery with Alternate Color

This is to reply one of the thread (in Project Siena / PowerApps) that Alternate Color in Gallery is not supported.

Yes, it can be done.

I am glad to share here for those NewBie like me who has just started learning PowerApps to make Gallery more presentable.

 

How to set color by for EVEN and ODD Rows?

(This is what normally we can get easily when making Excel Table)

 

1. In Excel Table, Include ID in the first column.

2. When Adding Record from Screen 1 and Navigate to Screen 1 Set OnSelect To: Navigate(……………, {Record: Defaults(TableX)})

3. When saving on Screen 2, set OnSelect: UpdateContext({Record: Patch(TableX, Record, {ID: If(!IsBlank(Record.ID), Record.ID, Text(Max(TableX, ID) + 1)),……..}

4. When navigate back to Screen 1 with Gallery, set the Gallery Template, Inserted Shape, or Any TextBox or Shape, to set the FILL or Color with:

If(Right(Text(Value(ThisItem.ID)/2, "#.#"), 1) = "5", Color!AliceBlue, Color!Aqua))

 

With this, you can have the Alternate Color as of Excel Table.

 

NB: It was told that this is not supported in Project Siena and PowerApps, but with ID number created automatically (as of No. 3), this can be accomplished.

 

In fact, under C# (if not mistaken), it can be done with: WHERE CAST (Left(Right(IDNUMBER, 2),1) As Int) % 2 = 0 (As provided by friend, easily)

 

Attached is the sample where Jakarta friend, Taufik's wife, Sofia, beautify the apps with Material Design concept and a VERTICAL COLOR BAR. I make use of the above to have alternate color.

 

Hoep this helps.

 

Screenshot (124).pngAlternate Vertical Color Bar

hpkeong
1 ACCEPTED SOLUTION

Accepted Solutions
mr-dang
Level 10

Re: Useful Features of PowerApps (13) - Gallery with Alternate Color

This is a good solution. You might also like to try:

 

If(Mod(Value(ThisItem.ID),2)=0, Color!Aqua, Color!AliceBlue)

 

Mod checks for a remainder when dividing by 2 in this case.

Microsoft Employee
@8bitclassroom

View solution in original post

7 REPLIES 7
mr-dang
Level 10

Re: Useful Features of PowerApps (13) - Gallery with Alternate Color

This is a good solution. You might also like to try:

 

If(Mod(Value(ThisItem.ID),2)=0, Color!Aqua, Color!AliceBlue)

 

Mod checks for a remainder when dividing by 2 in this case.

Microsoft Employee
@8bitclassroom

View solution in original post

hpkeong
Level 10

Re: Useful Features of PowerApps (13) - Gallery with Alternate Color

Hi

 

Thanks, Brian.

In fact, I use Remainder in other programming and was looking for the Remainder (Balance) reference and thought Mod = Modulation and skip.

Thanks for guidance.

 

Have a nide day and with this, user can make the apps more attractive.

hpkeong
dhawalseth
Level: Powered On

Re: Useful Features of PowerApps (13) - Gallery with Alternate Color

Awesome as always.

vsslasd
Level 8

Re: Useful Features of PowerApps (13) - Gallery with Alternate Color

We have been looking to utilize this. However, there is no such column in a collection called "ThisItem.ID".

 

How would we utilize this for collections ?

 

It seems like it needs a virtual consecutive incrementing integer in a collection. if it were a rowid (from a table), and then that rowid is filtered it would not necessairly be exactly alternating every other row, unless there is an true incrementing virtual ID field for the collection.

 

 

dhawalseth
Level: Powered On

Re: Useful Features of PowerApps (13) - Gallery with Alternate Color

Dear @vsslasd,

 

Could you share your problem in detail i.e. what is the requirement for alternating row color. Simply going with the ID would not suffice everyone's need.

 

In the meantime, refer to this article here, it could give you some information about an alternate arrangement. 

 

The challenge I forsee with your suggestion would be when you filter out the records which would throw your row color off gaurd. 

When I was in your shoes I looked around to the other columns I had in the collection. One date column became my hero with which I could achieve the desired result. You could do the same. 

 

Looking forward to hearing from you soon.

rafael-stealth
Level: Powered On

Re: Useful Features of PowerApps (13) - Gallery with Alternate Color

This is a nice solution but it is not accurate, in my opinion, Microsoft has to add a dynamic value we can use that always analyze the sequence base on the number of items (per item) than creating an ID column.

The problem with this solution is that depends on the ID number provided by the source to execute the evaluation, but this will fall appart as soon as you make a search to return specific items from the gallery, the search can return multiple of even number together, since an user will not search by ID but by human coherant data.

Though is a patch or hack of an issue that has no other proper solution. the PowerApps team should come up with a proper solution, as simple as giving us access to the key of the loop generated by each item something like:

ThisItem.__KEY__

In the meantime, this works, as long as you do not add a search box, or disable it when the gallery is filtered.

App.OnStart: Set(filtered, false)
SearchInput.OnChange: If(IsBlank(SearchInput), UpdateContext({filtered: false}), UpdateContext({filtered: true})
Gallery.TemplateFill: If(!filtered, <the solution here>, RGBA(240,240,240,1))

Of course, you have to take this with a grain of salt, since I just code it here, hasn't been tested.

RomanKorchak
Level: Powered On

Re: Useful Features of PowerApps (13) - Gallery with Alternate Color

Hi

How can I do it if I have filtered list (record  IDs will not help it this case)

Thanks

 

Helpful resources

Announcements
thirdimage

Power Automate Community User Group Member Badge

Fill out a quick form to claim your user group badge now!

sixthImage

Power Platform World Tour

Find out where you can attend!

Power Platform 2019 release wave 2 plan

Power Platform 2019 release wave 2 plan

Features releasing from October 2019 through March 2020

fifthimage

Microsoft Learn

Learn how to build the business apps that you need.

Top Kudoed Authors (Last 30 Days)
Users online (4,948)