07-16-2020 09:34
07-16-2020 09:34
I am trying to use text inputs in my index.jsx, and they show up and work, but I cannot figure out how to put the value that is entered into a variable. Here is my code:
function mySettings(props) {
return (
<Page>
<Text>Add up to 10 Custom Contacts!</Text>
<Section
title={<Text bold align="center">Contacts:</Text>}>
<TextInput
label="Contact 1"
settingsKey="text"
type="text"
onChange = {let text = }
/>
</Section>
</Page>
);
}
registerSettingsPage(mySettings);
Thanks in advance!
Answered! Go to the Best Answer.
07-16-2020 13:16 - edited 07-17-2020 06:57
07-16-2020 13:16 - edited 07-17-2020 06:57
I would recommend saving the values on the app/watch end. Forwarding the information from the companion to the watch end and saving it there.
Make sure each Key is unique. Also you might want to read about local file systems for saving/loading the settings.
https://dev.fitbit.com/build/guides/file-system/
Some more example code for Companion -> App/Watch Face
Companion:
import { settingsStorage } from "settings";
import * as messaging from "messaging";
...
settingsStorage.onchange = function(evt) {
sendValue(evt.key, JSON.parse(evt.newValue).name);
}
function sendValue(key, val) {
var data = ({key: key,value: val});
messaging.peerSocket.send(data);
}
App/Watch Face:
import * as messaging from "messaging";
...
messaging.peerSocket.onmessage = function(evt) {
console.log(evt.data.key);
console.log(evt.data.value);
}
07-16-2020 10:12
07-16-2020 10:12
I this in the settings or main app?
07-16-2020 10:42
07-16-2020 10:42
Settings
07-16-2020 11:23 - edited 07-16-2020 11:31
07-16-2020 11:23 - edited 07-16-2020 11:31
Here is a quick example I made:
Settings:
function Settings(props) {
return (
<Page>
<TextInput
label="example"
settingsKey="text"
/>
</Page>
);
}
registerSettingsPage(Settings);
Companion:
import { settingsStorage } from "settings";
...
settingsStorage.onchange = function(evt) {
console.log(JSON.parse(evt.newValue).name);
}
...
07-16-2020 12:43
07-16-2020 12:43
Thanks! I got it working, but I have another question. I have 10 text inputs in my settings, and the code you gave calls whenever any of them are changed. How can I save each different text input's content to separate variables?
07-16-2020 13:16 - edited 07-17-2020 06:57
07-16-2020 13:16 - edited 07-17-2020 06:57
I would recommend saving the values on the app/watch end. Forwarding the information from the companion to the watch end and saving it there.
Make sure each Key is unique. Also you might want to read about local file systems for saving/loading the settings.
https://dev.fitbit.com/build/guides/file-system/
Some more example code for Companion -> App/Watch Face
Companion:
import { settingsStorage } from "settings";
import * as messaging from "messaging";
...
settingsStorage.onchange = function(evt) {
sendValue(evt.key, JSON.parse(evt.newValue).name);
}
function sendValue(key, val) {
var data = ({key: key,value: val});
messaging.peerSocket.send(data);
}
App/Watch Face:
import * as messaging from "messaging";
...
messaging.peerSocket.onmessage = function(evt) {
console.log(evt.data.key);
console.log(evt.data.value);
}
07-17-2020 06:44
07-17-2020 06:44
The code you gave me:
console.log(evt.data.value);
Always returns undefined. (This is in my app)
It logs the keys fine, but each of their values are undefined.
07-17-2020 06:56
07-17-2020 06:56
Sorry about that, I forgot to update the companion side. I just added a part the parse the Json like the "printline" before.
This should work.
Companion:
import { settingsStorage } from "settings";
import * as messaging from "messaging";
...
settingsStorage.onchange = function(evt) {
sendValue(evt.key, JSON.parse(evt.newValue).name);
}
function sendValue(key, val) {
var data = ({key: key,value: val});
messaging.peerSocket.send(data);
}