Survey123 Mobile App - Custom color theme based on Signed in Portal/AGOL Connection

347
2
03-14-2024 02:35 PM
Status: Open
Labels (1)
Jaivik_P
New Contributor III

Please allow users to customize the Survey123 Mobile App home page with different color themes based on different connections.

In Survey123 mobile app, we can add multiple connections to the GIS Portal and/or ArcGIS Online through Settings > Connections > Add connection.
An organization can have multiple environments like Production, Development and/or Test environments for GIS Enterprise Portal along with an ArcGIS Online account. A user can establish a multiple connections while they are developing and testing the surveys in their mobile app. 

The only way they can know which connection they are connected is by clicking on the user Settings > Connections. It would be great if a user can confirm/differentiate that by simply looking at the home page color.

For example:
- If signed in to TEST GIS Portal - the home page would be RED color theme
- If signed in to PROD GIS Portal - the home page would be BLUE color theme
- If not signed in to any Portal - the home page would be GREEN (default) color theme

2 Comments
abureaux

This is already supported (at least as you described it).

Your organization colors dictate what color the app is. I can tell at a glance if someone isn't signed in because their app is green, and our corporate colors are red.

 

Staging:

abureaux_0-1710859657961.png

Default (not logged in):

abureaux_1-1710859669208.png

Production:

abureaux_2-1710859696897.png

If you don't see this behaviour, go to the surveys site and configure this setting:

abureaux_3-1710859755216.png

 

Jaivik_P

Hi abureaux, 

That's awesome.. Thank you very much for sharing this. Yes, it worked as expected! 

For those who come across this thread - the steps are, 

- Log on to the ArcGIS Enterprise Portal/AGOL as an administrator

- Navigate to Organization>Settings>General>Shared theme

- Click on Manage shared theme colors

- Specify colors for Header/Body

- click Save

- Open the Survey123 WebApp

- Navigate to Organization>Settings>General>Shared theme

- Check the box next to Use organization's shared theme

Jaivik_P_0-1710875745382.png

- Click Save

 

Now you can open your Survey123 mobile app and see the magic happen! 

 

Jaivik Pathak