I’m currently working on a project where I use the Thunkable WebViewer Extension to communicate between my Thunkable app and a web page. I have successfully sent and received messages, but I’m facing a challenge when trying to send and receive multiple data items.
In my web app, I’m sending an object with several properties using the ThunkableWebviewerExtension.postMessage
function. However, on the Thunkable side, when I receive the message in the “When WebViewer receives message” block, I’m struggling to access and display each individual property.
Here’s a simplified version of my current setup:
fetch(‘/run_script’, {
method: ‘POST’,
headers: {
‘Content-Type’: ‘application/json’
},
body: JSON.stringify({
username,
password
})
})
.then(response => response.json())
.then(data => {
const outputArray = data.output;
// Display each element separately
document.getElementById('result').innerText =
`Smart Schedule Sync Complete.
Token: ${outputArray[0]},
Username: ${outputArray[1]},
Cookies: ${outputArray[3]}`;
ThunkableWebviewerExtension.postMessage(outputArray[0]);
ThunkableWebviewerExtension.postMessage(outputArray[1]);
})
.catch(error => {
document.getElementById('result').innerText = "Error: " + error;
})
.finally(() => {
loadingScreen.style.display = 'none';
runScriptButton.disabled = false;
});
});
in thunkable it only shows the first data item ThunkableWebviewerExtension.postMessage(outputArray[0]);
and also sets my other label that i have on thunkable to ThunkableWebviewerExtension.postMessage(outputArray[0]);