Disabling or hiding elements in the Settings JSX

[EoinStronge]

Hi,

Is it possible to hide or disable elements in the settings screen in reaction to a click/toggle/selection etc?

So for example, in the app settings, if I have a toggle like "Use advanced mode", can I react to a click on that toggle by showing some options (text fields etc.) that would otherwise be hidden, and the reverse? Or even enable/disable certain elements based on the toggle selection?

I've worked out (so far) that I can do something like:

      <Section
        title={<Text bold align="center">Configuration mode</Text>}>
        <Toggle
          settingsKey="configMode"
          label="Simple mode"
          onChange={(mode) => configModeChanged(mode)}
        />
      </Section>

And:

function configModeChanged(mode) {
  console.log("configModeChanged called: -- " + JSON.stringify(mode) + " -- ");
}

And it will be called with 'true' or 'false', but can I react to that by hiding/showing or enabling/disabling other elements in the settings screen?

Thanks in advance.

[peperez]

Hi @EoinStronge - 

Take a look at this link from the React documentation on conditional rendering of elements. It might be useful for your specific use case.

[Thiern]

Hey did you ever find a solution to this? I am in need of something similar 

[EoinStronge]

No, sorry. Gave up!

[Gondwana]

There's an example here (under 'toggle'). The idea can be extended to apply to multiple elements. I did so in this app.

[Thiern]

Figured it out

{((JSON.parse(props.settings.dataSource).values[0].value == 'custom') ? <TextInput label="Api endpoint" settingsKey="endpoint"/> : <TextInput label="Api endp2oint" settingsKey="endpoint"/>)}

[Slumberlander]

hey @Thiern , 

i m super beginner and i need to achieve this exact thing, would you explain it to me, i tried every thing i could with your :

{((JSON.parse(props.settings.dataSource).values[0].value == 'custom') ? <TextInput label="Api endpoint" settingsKey="endpoint"/> : <TextInput label="Api endp2oint" settingsKey="endpoint"/>)}

but as some structural knowledge is still missing from my skill set, (and fitbit SDK is very poor in info/tutorials) it does not work...

  *.settings.* is the name of the settings function, wright? the one default as mySettings by fitBit in *.jsx?

i guess 'custom' is the settingsKey= value for the toogle.

an example empty project with the feature working would be hell good ! 

thank you for answering!

[Thiern]

Would you be able to create a gist or push your code so I can take a look at it

[morningReign]

I use the following to show or hide a toggle based on k-pay status. The logic stops if endTrialVisible is false, otherwise the toggle is rendered.

let endTrialVisible = (settings.btnEndTrialVisible === undefined ? false : JSON.parse(settings.btnEndTrialVisible))

{ endTrialVisible && <Toggle settingsKey="kpayPurchase" label={ gText("etNow") } /> }

[Slumberlander]

Hi thank you for answering that fast!

i have been thru dozens of trys on your code in pasting it everywhere and changing every names i could thought of....

the closest i have is disabling a text input using the toggle switch, i want the same thing to hide/unhide...

function mySettings(props) {
  return (
    <Page>
      <Section
        title={<Text bold align="center">Demo Settings</Text>}>
       <TextInput
  label="Example"
  title="Text Input"
  settingsKey="textInput"
 disabled= {!(props.settings.toggleTextInput === "true")}//instead of disabled i want to hide/display from settings?
/>
<Toggle
  label="Enable Text Input"
  settingsKey="toggleTextInput"
/>
      </Section>
    </Page>
  );
}
registerSettingsPage(mySettings);
//{((JSON.parse(props.settings.dataSource).values[0].value == 'toggleTextInput') ? <TextInput label="Api endpoint" settingsKey="endpoint"/> : <TextInput label="Api endp2oint" settingsKey="endpoint"/>)}

thank you for your time!

[Thiern]

Give this a try 🙂 

function mySettings(props) {

return (

<Page>

<Section

title={

<Text bold align="center">

Demo Settings

</Text>

}

>

<Toggle settingsKey="toggle" label="Hidden View" />

{props.settings.toggle ? (

JSON.parse(props.settings.toggle) == true ? (

<Section

title={

<Text bold align="center">

This view is hidden

</Text>

}

>

<Button

list

label="Reset settings to defaults"

onClick={() => props.settingsStorage.clear()}

/>

</Section>

) : null

) : null}

</Section>

</Page>

);

}

registerSettingsPage(mySettings);

[Slumberlander]

thank you @Thiern thiern, so cool!