Using the html from here:
https://puravidaapps.com/table.php
If you click on a cell that row index will be returned to the webviewstring. Is that enough ?
ECMAScript support would depend on at least one of the following things:
- Android version
- Google Chrome version
- Android System WebView version
I’d recommend finding out what versions of Android your target audience typically uses and tailoring your JavaScript to only use APIs supported by those versions. Check out caniuse.com for more info.
Hi,
yes do have that table.html working in my app.
But really? If I click on the table view (=WebViewer), it returns that row index inside the app?
Cannot be quite like that, because there is no such activity for Webviewer on blocks side.
So I have now misunderstood something…?
- Tommi S.
Look in the html:
tr.addEventListener ("click", function () {
// return picked row (remove td tag, use delimiter and remove last character, http://stackoverflow.com/a/1990274)
//var picked = this.innerHTML.replace(/<td>/g, "").replace(/<\/td>/g, delimiter).replace(/(\s+)?.$/, '');
//window.AppInventor.setWebViewString(picked);
// return index (add 1 because first row is the header row)
//window.document.title = this.rowIndex + 1;
window.AppInventor.setWebViewString(this.rowIndex + 1);
});
The functionality may be commented out (//), so you will have to uncomment for the webviewstring to be set
Is this how it should go?
I tried this with emulator but the table row did not indicate in any way that it became “selected”…
–clip–
tr.addEventListener (“click”, function () {
// return picked row (remove td tag, use delimiter and remove last character, http://stackoverflow.com/a/1990274)
var picked = this.innerHTML.replace(/
window.AppInventor.setWebViewString(picked);
// return index (add 1 because first row is the header row)
//window.document.title = this.rowIndex + 1;
window.AppInventor.setWebViewString(this.rowIndex + 1);
});
–clap–
Sorry, not concentrating, it should work just as I posted it and in the file with this line:
window.AppInventor.setWebViewString(this.rowIndex + 1);
You will need to use the when webviewstring Changed event in the app to return the value of the row selected, then use this with the list you sent to the html file
Thx, I got it now 
However I noticed that row index only is not enough.
How can I refer to the row items?
- Tommi
Select them from your lists in AppInventor when you get the row returned from the webviewer
You could probably add more javascript to return the columnIndex too …?
const cells = document.querySelectorAll('td');
cells.forEach(cell => {
cell.addEventListener('click', () =>
console.log("Row index: " + cell.closest('tr').rowIndex + " | Column index: " + cell.cellIndex));
});
I did not quite get it now.
What I want is that the table.html could return the whole selected row data into the VALUE variable below.
Make your mind up 
We are back where we started. Use the row index returned in the webviewstring as the index in the list that you sent to the webviewer html in the first place. Then you can return the data for that row.
Ah, of course.
Now it is working!!
Thx for heads-up
An additional question:
It somehow looks like the WebViewStringChange does twice the “value” parameter evaluation in the do-loop;
On the 1st round it returns the row index. On the 2nd round it returns the whole row.
This seems to depend on that whether the data changes; if the data includes the color tag, it returns the whole row data. If not, then it returns only the row index.
Do you have any explanation to this behavior? Because the AppInventor code cannot be the reason.
I am retrieving data frmo database to AppInventor Webviewer component which has been structured with table.html (which is presented in AI2 forum).
What confuses me is that Webviewer WebViewStringChange control’s return parameter “value” sometimes returns the data row index and sometimes the whole data row as comma separated fields.
1st question: is there any explanation for such a behaviour?
2ns: question: currently I have managed in returning always the whole data row only, fields separated with comma. But somehow I havent managed to create another list from that data row by splitting it with comma. My code just ignores the comma separator in split function. Is the comma (,) somehow evaluated separately in AppInventor?? Can anyone help?
I always get the below error. Not sure whether it is also dependent on the style formatting in the table.html?
Where do you set the value from the webviewstringchange event (in your blocks)
Also, show your current “table.html” file content…
Sorry I forgot to show this. So the “value” is read to variable “webvalue”.
table.html script block here:
–clip–
// if you have commas inside your text, feel free to use another delimiter, for example var delimiter = “,”;
// get the table to display from the window.AppInventor object and split at new line
var urlArray = window.AppInventor.getWebViewString().split("\n");
//var urlArray = location.search.slice(1).split("/n");
var doc = document;
var fragment = doc.createDocumentFragment();
var thead = doc.createElement("thead");
var tr = doc.createElement("tr");
// split at delimiter
var rowArray = urlArray[0].split(delimiter);
addRow(thead, "th");
fragment.appendChild(thead);
var tbody = doc.createElement("tbody");
for(i=1;i<urlArray.length;i++){
var tr = doc.createElement("tr");
// split at delimiter
var rowArray = urlArray[i].split(delimiter);
tr.addEventListener ("click", function () {
// return picked row (remove td tag, use delimiter and remove last character, http://stackoverflow.com/a/1990274)
//var picked = this.innerHTML.replace(/<td>/g, "").replace(/<\/td>/g, delimiter).replace(/(\s+)?.$/, '');
//window.AppInventor.setWebViewString(picked);
// return index (add 1 because first row is the header row)
//window.document.title = this.rowIndex + 1;
window.AppInventor.setWebViewString(this.rowIndex + 1);
});
addRow(tbody, "td");
}
fragment.appendChild(tbody);
var table = doc.createElement("table");
table.appendChild(fragment);
doc.getElementById("myTable").appendChild(table);
// http://stackoverflow.com/a/9236195/1545993
doc.getElementById("myTable").getElementsByTagName('table')[0].className = "striped";
function addRow(dom, tag) {
for(j=0;j<rowArray.length;j++){
var el = doc.createElement(tag);
el.innerHTML = rowArray[j];
tr.appendChild(el);
dom.appendChild(tr);
}
}
//colorize
document.querySelectorAll('td').forEach(e => {
if (e.textContent == "CLOSED") {
e.style.color = "green";
}
else if (e.textContent == "OPEN") {
e.style.color = "red";
}
else if (e.textContent == "ONGOING") {
e.style.color = "yellow";
}
});
–clap–
You are making life difficult for yourself!
Q1. This was probably caused by having both event listeners running at the same time ?
Q2. See the attached aia which is a development of Taifun’s original dynamic table. Replicate/Modify this for your own app.
Change your list to json in Screen1 properties
When the index (row) is picked the value of the row is returned
Use blocks to select the row values, working in a list
table5_1.aia (44.0 KB)
(edit, sorry, I should have used “value” instead of “WebViewer1.WebViewString” in the change event)
Thanks!!
I did set the json flag for Screen and implemented your code so now this basically works…
…but I noticed that the “colorization” in table.html caused this problem:
So first I had to comment out the “colorize” section from table.html in order to get it fully working.
Then I did this tuning in the WebViewStringChange block so I could de-comment colorization from table.html:
Noow it is fully functional
Great thanks and sorry, I am a beginner so my questions might be trivial to all you “Gurus’”
- Tommi S.
There must be something wrong with your html/javascript for that to happen! Fix it rather than accept it and then write extra blocks to repair!
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.