Zum Hauptinhalt gehen

VSW - Change branding on deployment with environment variables

Kommentare

7 Kommentare

  • Gareth Evans

    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
  • Zorba Conlen

    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
  • Zorba Conlen

    Hi Gareth Evans. Were you able to find anything more on this? 

    Thanks. 

    0
  • Gareth Evans

    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 value

    180,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
  • Zorba Conlen

    Ok, the custom themes idea seems pretty good. I'll look into that. Thanks Gareth.

    0
  • Zorba Conlen

    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
  • Gareth Evans

    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.