Show and hide parts in settings

[Besen]

Hello, i want to hide "code" if "viewColoeSelect" is false or undifine. But i have no idea how. Can everyone help me? Thank you.

function mySettings(props) {

  return (
    <Page>
    
      <Section
        title={<Text bold>Color</Text>}> 
        
        <Text>
          To change accent color, tap at hour on the watch face. 
        </Text>
        
        <Toggle
          settingsKey="viewColorSelect"
          label="Color select on watch"
        /> 
        
        <ColorSelect
          settingsKey="color"
          colors={[
          {color: '#E4FA3C'},
          {color: '#FFCC33'},
          {color: '#FC6B3A'}
          ]}
        />
        
      </Section>
    </Page>
  );
}

registerSettingsPage(mySettings);

[FlyFrosty]

My amature move would be to simply define the color as a default in the CSS.

fill:  red;

[Gondwana]

There's a tiny example of how to do this in the 'Toggle' section here.

[Besen]

Hi Catplace thank you, of course I know the site but have problems with the syntax:

 <ColorSelect
          settingsKey="color"
          disabled={!(this.props.mySettings.viewColorSelect === "true")}
          colors={[

          {color: '#E4FA3C'},

[HOST] [06:39:48] TypeError: Cannot read property 'props' of undefined
[HOST] [06:39:48] Uncaught TypeError: Cannot read property 'props' of undefined

[Gondwana]

There's no such thing as 'this' in that context.

[theJDT]

Hello there,

the syntax is:

disabled={!(props.settings.viewColorSelect === "true")}

that works for me.

Try adding the following to "prove" that the syntax is, in fact, correct:

<Select
  label="Test"
  settingsKey="testValue"
  options={[
    {name:"1", value:"value_1"},
    {name:"2", value:"value_2"},
    {name:"3", value:"value_3"},
  ]}
  disabled={!(props.settings.viewColorSelect === "true")}
/>

Unfortunately, it does not seem to work on ColorSelect. Please refer to Settings API, where you can see the properties of the ColorSelect element. It does not appear to have a "disabled" property.

Maybe use the "onSelection" function instead and cancel the selection if the value is false?

Cheers,

JDT