Using textinput data on the gui

[jomis003]

I am using the following in my index.jsx file:

<TextInput
label="Your Name"
placeholder="Please enter your first and last name"
settingsKey="userName"
/>

What I would like to do is pass the name the end user types in and saves to the index.gui. I currently have:

<text id="userName" x="10%" y="85%"
font-family="Colfax-Medium" fill="black"
font-size="30" font-weight="bold"
text-anchor="start">This is the users name </text>

The id is not passing it obviously. How would I get this information to pull from the .jsx file?

[Gondwana]

Alas, nothing happens automatically. You have to capture the text changes in a companion app, use a message or file transfer to push them to the watch, and then display them using JS in the watch app (eg, setting the 'text' attribute of the relevant element declared in your index.gui).

I'm pretty sure you can't write anything directly to index.gui.

[allyann]

You can use the onChange setting for the textInput to save your input to props.settingsStorage. You can then access the settingsStorage in the companion and pass it back via messaging or file transfer to the device gui.

https://dev.fitbit.com/reference/settings-api/#textinput

[jomis003 · Accepted solution]

Thanks for that. I got it working. The problem after getting it to transfer is that it displays in the JSON format which I see is a whole different issue. I was able to work around that with the following:

messaging.peerSocket.onmessage = evt => {
  console.log(`App received: ${JSON.stringify(evt)}`);

  if (evt.data.key === "userName" && evt.data.newValue) {
    let userName = util.stripQuotes(evt.data.newValue);
    let strName = util.stripQuotes(JSON.stringify(userName));
    var stripNameFront = strName.substr(6, strName.length-2);
    var stripNameBack = stripNameFront.substr(0, stripNameFront.length-1);
    let name = ("Name: " + stripNameBack)
    var nameUser = document.getElementById("nameUser");
    nameUser.text = name; 

  }

};

[allyann]

If you end up having more than one setting in the settings.jsx, this will work:

settingsStorage.onchange = function(evt) {

  //console.log(JSON.stringify(evt));
  var obj = JSON.parse(evt.newValue, function (event, value) {
    console.log(evt.key + ": " + value);
    //doSomething(evt.key, value);
  });
}

[iantrich]

Hey, just wanted to let you know that there is much easier way to get the value in a TextInput field:

JSON.parse(evt.data.newValue).name

[SomeDeveloper]

Doesn't work for textinput user inputted data, reports null because the <name> part is in " so it's "name" and that causes issues