Color Custom Tabs

Like (2) Share

Report

Posted on 17 Apr 2024 16:20:43 by golfnutt82

1,360

Hello,
I used @RezaDorrani solution to create a tabbed form in my Canvas App NOT a SharePoint Integration form.
Reza's solution is here!
This solution worked great but one thing that I can't solve is colorizing each tab to match the fill of each form.
Does anyone have any ideas they can share?

Thank you.

Categories:

General Questions

All responses (7)

Answers (1)

golfnutt82 1,360 on 03 Feb 2025 at 13:52:37

Like (0)

Report

Color Custom Tabs

I just noticed that my post saying I solved the colored tab issue is solved but using the same form color logic, is incorrect.
This is what I used for the button fill property in the gallery.

If(

ThisItem.ID = 1,

RGBA(

227,

234,

243,

1

),

If(

ThisItem.ID = 2,

RGBA(

176,

207,

132,

1

),

If(

ThisItem.ID = 3,

RGBA(

197,

199,

252,

1

),

If(

ThisItem.ID = 4,

RGBA(

238,

193,

190,

1

),

If(

ThisItem.ID = 5,

RGBA(

240,

255,

96,

.39

),

If(

ThisItem.ID = 6,

RGBA(

171,

96,

255,

.39

),

If(

ThisItem.ID = 7,

RGBA(

96,

187,

255,

1

),

If(

ThisItem.ID = 8,

RGBA(

96,

255,

114,

.39

),

If(

ThisItem.ID = 9,

RGBA(

255,

96,

230,

.39

),

ColorValue("#e3eaf3")

)

)

)

)

)

)

)

)

)
Verified answer

golfnutt82 1,360 on 29 Aug 2024 at 13:26:17

Like (1)

Report

Color Custom Tabs

I figured out how to not only colorize each tab but also colorize each form based on the variable varTabSelected.

If(
varTabSelected = 1,
RGBA(
227,
234,
243,
1
),
If(
varTabSelected = 2,
RGBA(
176,
207,
132,
1
),
If(
varTabSelected = 3,
RGBA(
197,
199,
252,
1
),
If(
varTabSelected = 4,
RGBA(
238,
193,
190,
1
),
If(
varTabSelected = 5,
RGBA(
240,
255,
96,
.39
),
If(
varTabSelected = 6,
RGBA(
171,
96,
255,
.39
),
If(
varTabSelected = 7,
RGBA(
96,
187,
255,
1
),
If(
varTabSelected = 8,
RGBA(
96,
255,
114,
.39
),
If(
varTabSelected = 9,
RGBA(
255,
96,
230,
.39
),
ColorValue("#e3eaf3")
)
)
)
)
)
)
)
)
)

To colorize each form based on what tab I chose, I did the following.

Fill property to color form based on tab selection.
If(
varTabSelected = 1,
RGBA(
227,
234,
243,
1
),
If(
varTabSelected = 2,
RGBA(
176,
207,
132,
1
),
If(
varTabSelected = 3,
RGBA(
197,
199,
252,
1
),
If(
varTabSelected = 4,
RGBA(
238,
193,
190,
1
),
If(
varTabSelected = 5,
RGBA(
240,
255,
96,
.39
),
If(
varTabSelected = 6,
RGBA(
171,
96,
255,
.39
),
If(
varTabSelected = 7,
RGBA(
96,
187,
255,
1
),
If(
varTabSelected = 8,
RGBA(
96,
255,
114,
.39
),
If(
varTabSelected = 9,
RGBA(
255,
96,
230,
.39
),
ColorValue("#e3eaf3")
)
)
)
)
)
)
)
)
)
golfnutt82 1,360 on 18 Apr 2024 at 14:52:01

Like (1)

Report

Re: Color Custom Tabs

Yes, I suppose I could have separate forms for each chosen tab.
The process I am using now seemed to be a better fit for what I was trying to achieve.
It does look like they are different forms so technically its true there isn't multiple forms.
It sounds like I may have to rethink my design. 🤔
DJ_Jamba 2,822 Super User 2025 Season 1 on 17 Apr 2024 at 21:19:55

Like (1)

Report

Re: Color Custom Tabs

@golfnutt82

"but one thing that I can't solve is colorizing each tab to match the fill of each form"

Your post suggests you have more than one form?!
What should the colour of each tab be then if you only have one form?
golfnutt82 1,360 on 17 Apr 2024 at 18:40:13

Like (1)

Report

Re: Color Custom Tabs

The Gallery has a table that looks as follows:
Table({ID:1,Label:"Broker Fee Request"},{ID:1,Label:"Funding Team"},{ID:1,Label:"Next Steps"},{ID:1,Label:"Operations Group"},{ID:1,Label:"Attachments"},
In the OnSelect property I set a variable Set(varTabSelected,ThisItemID)
In the Visible property on the DataCard I then reference the variable to show or hide the DataCard based on the chosen tab at the top. varTabSelected=1, varTabSelected=2, varTabSelected=3 and so on
Using your suggestion doesn't work under the TemplateFill property because I only have one form.
Unless, I am missing something, please provide more context.

Thanks!
golfnutt82 1,360 on 17 Apr 2024 at 18:11:15

Like (1)

Report

Re: Color Custom Tabs

Thanks DJ,
I will give this a shot and follow up.
DJ_Jamba 2,822 Super User 2025 Season 1 on 17 Apr 2024 at 17:00:29

Like (2)

Report
Re: Color Custom Tabs

Hi @golfnutt82

If you are using a gallery to drive the tabs, use the TemplateFill property.
Switch( ThisItem.TAB_COLUMN_NAME, "Tab A", Form1.Fill, "Tab B", Form2.Fill, "Tab C", Form3.Fill }

...and so on for however many tabs and forms you have.