Set color of button symbol integrated in Studio Mobile app

Slutfört

Yannik Bäder

10 Juni 2025 13:05

Hi everyone,

I want to set the color of a button symbol in my VertiGIS Studio Mobile app.

The color should depend on a value set by the workflow, which is fired when clicking/tapping the button.

Is there a way to do that?

Thanks in advance!

Yannik

0

• 

  Jack Basha

  10 Juni 2025 15:27

  Hi Yannik Bäder, can you elaborate on that? Do you want to set the background, the foreground, or the text colour of the button? And is it a button in Workflow or a button in Mobile Designer?

  0
• 

  Yannik Bäder

  11 Juni 2025 05:32

  Hi Jack,

  it's a button in Mobile Designer.

  Is it important which part of the button I want to colour? I know that there is a distinction in CSS. And I also tried to set the style in the layout: Strg + Shift + E > landscape.xml. Like so:

  <button id="button-41fa6597" config="25dae49e-0d8c-491a-b6a6-f8f22d1b423a" slot="bottom-center-visible" style="color:green"/>

  But there was no effect. (I'm aware that this setting would be permanent in contrast to my goal to set it depending on the variable in the workflow).

  So I would like to change the foreground (playback-play) und the text colour. The standard grey colour in the background can be left as it is.

  Best regards
  Yannik

  0
• 

  Jack Basha

  11 Juni 2025 15:54

  Hi Yannik,

  There is a way but I'm not sure if it would achieve what you desire. You can add a `background-color` property to your buttons that would result in something like the following:

  

  

  This property does not know whether the buttons are readable or not; that will be the responsibility of the app's designer. The value can either be a name (CSS Color Names), or a hex value (which allows you a finer control of the value and its opacity). Here is an example

  
  <button id="button-4bae47f0" config="a9352231-41d2-4667-adca-bba4de93d66f" background-color="#FF111150"/>

  Another note is that you are able to adjust the app's accent color, which will change the button icon's color in light mode:

  

  So one way of achieving what you're wanting to do is to have two buttons: one hidden and one visible by default. The Workflow you have will flip the visibility of the two buttons and it will appear as if the button you have was given a new background color. Studio Go is a C# application, not a web application, so CSS does not apply here unless we specifically implement something similar to them.

  There is no better way of achieving this because it was never requested as a feature. If you would like it done in a future release, please add it as a separate post in the Ideas community.

  0
• 

  Yannik Bäder

  12 Juni 2025 12:21

  Hi Jack,

  thank you very much for the suggested solutions. I think I will chose the ability of the button to be switched. If switched to the alternative state, another workflow (with a different symbol) will run.

  Yet I would like to know how to access components in Studio Go (like Buttons) via Workflow. Is there a certain Activity? And what are these values for:

  

  Greetings,
  Yannik

  0
• 

  Jack Basha

  16 Juni 2025 15:50

  Hi Yannik,

  Happy to help! Ah, yes, you'll need to use the `ui.activate` and `ui.deactivate` command pair to accomplish this. `ui.activate` will make a component visible and `ui.deactivate` will do the opposite. The `Model-URI` value is what you should pass as a parameter.

  If you've done it correctly, the result will look like the following:

  

  0
• 

  Yannik Bäder

  18 Juni 2025 07:33

  Great, thanks for your help!

  0

Du måste logga in om du vill lämna en kommentar.