VSW - Change branding on deployment with environment variables
Hi. Is there a way to change the branding ‘accent color’, when deploying an app. At my org, we standardize colors for dev, test and prod, so it's easy to visually differentiate dev from test from prod.
I'm seeing in the web app json, the accent style is stored as rgba. However, when I enter rgba stings as environment variables, and then deploy (say from dev to test), it's not working. The accent color of the app does not change. Maybe due to how it's formatted in the app json.
So, how can I achieve this?
Thanks
-
This is an interesting use case. Can you share what your current rgba strings and environment variables look like? I think as long as they are stored in the app JSON we should be able to target them.
0 -
Hi Gareth,
Here is a screenshot. Bottom row.
viewed in agol assistant, the webmap json looks like this:
"accentColor": [
180,
188,
195,
255
],Thanks
0 -
Hi Gareth Evans. Were you able to find anything more on this?
Thanks.
0 -
Hi Zorba
The issue here is the value you are providing is not matching with what is in the app JSON.
"accentColor": [
180,
188,
195,
255
],
is not going to match the value180,188,195,255
because they are different strings.
In my brief testing, I did not find an immediately obvious way to target the accentColor attribute specifically using Environment Values. I think the way that it is across multiple lines makes this particularly difficult.
Though, I was thinking: if your goal is to show the user a different theme based on the environment, you could accomplish this by creating your own custom theme and setting the theme. You can also still use environment values to set which theme you are selecting.
There is a reference on Configuring the Theme that explains how you might build a custom theme. I would suggest you create themes to match your specific environments and name them as such, e.g. theme-dev, theme-test, theme-staging, theme-prod.
You can then set the theme using the ui.set-theme command in your VSW app in an event, perhaps the onInitialized event.
it would look a bit like this:[
{
"name": "ui.set-theme",
"arguments": "theme-dev"
}
]
From there, you could define environment values for your different themes so that when deployed, the designer inserts the appropriate string for the deployment. This would work because theme-dev, theme-test, theme-staging, theme-prod are easily targeted strings.Hopefully that makes sense. Please let me know if this works for you!
0 -
Ok, the custom themes idea seems pretty good. I'll look into that. Thanks Gareth.
0 -
Hi Gareth,
Looking at this a bit closer, I'm realizing it involves customizing via the SDK. Reading up, it does not seem too complicated, but at the same time, not sure I want to get into custom dev work, just for this simple feature. Especially, since we'll have multiple apps and this creates some extra work\complexity for each of them.
I think this should be an out of the box capability and going to post it to the ideas forum.
Thanks
0 -
Hi Zorba
Understandable! I am glad to hear you are sharing this as an idea.
I approach this scenario a bit more simply, using a labeled image in a recent demo of Studio Mobile. This method means I do not need to get into the SDK to do any theming, while still having a basic visual indication of the deployed environment.For example, in my demo app in the development version I have an image labelled with development. In my production version, we use an image that does not have this label. This is done via environment values replacing the image URL.
The images:In designer, this looks like:
0
Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.
Kommentare
7 Kommentare