Conditional colorizing in WebViewer table.html

Tommi_Salmela · March 17, 2020, 1:54pm

Ref. https://puravidaapps.com/table.php

How can I add conditional font color formatting to the presented table.html, depending on the table cell value?

If table cell value = OK => font color = green
if table cell value = NOK => font color = red

Could not find a suitable example by google

TIMAI2 · March 17, 2020, 2:06pm

You must have a different “google” to me…

Google conditional formatting for html table

Red_Panda · March 17, 2020, 2:08pm

You need to include the following code inside the html file

<script>
document.querySelectorAll('td').forEach(e => {
 if (e.textContent == "OK") {
    e.style.color = "green";
 }
  else if (e.textContent == "NOK") {
    e.style.color = "red";
 }
});
</script>

Tommi_Salmela · March 18, 2020, 9:46am

Thanks Red_Panda,

I got the idea, but I did not get that working.

In the original table.html, there is the following script section of code which adds rows dynamically into table:
–clip–
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);
document.getElementById(tag).style.color = “#ff0000”;
}
}

–clap–

Now, I tried to integrate your suggestion into that as follows:

–clip–

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);
document.getElementById(tag).style.color = “#ff0000”;

	document.querySelectorAll('td').forEach(e => {
	if (e.textContent == "OK") {
		e.style.color = "green";
	}
	else if (e.textContent == "NOK") {
		e.style.color = "red";
		}
	else {
		e.style.color = "#ff0000";
		}
	});
	
  }
}

–clap–

…but I get only empty WebViewer.
All parenthesis should match, at least in Notepad++ editor they do.
As I do not really know any html syntax, I am not sure what is the issue.
Should I distinguish these sentences and use either one of “document.getElementById(tag)” OR “document.querySelectorAll(‘td’).forEach” ?

Another try, did not succeed either:

–clip–

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);
document.getElementById(tag).style.color = “#ff0000”;

	if (document.getElementById(tag).textContent == "CLOSED") {
		document.getElementById(tag).style.color = "green";
	}
	else if (document.getElementById(tag).textContent == "NEW") {
		document.getElementById(tag).style.color = "red";
		}
	else if (document.getElementById(tag).textContent == "ONGOING") {
		document.getElementById(tag).style.color = "yellow";
		}
	else {
		document.getElementById(tag).style.color = "#ff0000";
		}
	}
}

–clap–

Original table.html is here:
https://puravidaapps.com/table.php

Tommi S.

Tommi_Salmela · March 18, 2020, 10:04am

I tested with this, and it worked fine:

–clip–

    <tbody>
      <tr>
        <td>Alvin</td>
        <td>Eclair</td>
        <td>$0.87</td>
      </tr>
      <tr>
        <td>Alan</td>
        <td>Jellybean</td>
        <td>$3.76</td>
      </tr>
      <tr>
        <td>Jonathan</td>
        <td>Lollipop</td>
        <td>$7.00</td>
      </tr>
    </tbody>
  </table>

–clap–

However, when I implemented the script section into table.html as follows, I get just an empty WebViewer. Without colors the result is however ok and works fine.

–clip–

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);
document.getElementById(tag).style.color = “#ff0000”;
}
}

document.querySelectorAll('td').forEach(e => {
	if (e.textContent == "CLOSED") {
		e.style.color = "green";
	}
	else if (e.textContent == "OPEN") {
		e.style.color = "red";
		}
	else {
		e.style.color = "black";
		}
	});

–clap–

Tommi S.

Name	Item Name	Item Price

Red_Panda · March 18, 2020, 12:15pm

Strange. Code should work, see here: https://jsfiddle.net/fLmr39ut/
Try

document.getElementsByTagName("TD").forEach(function(e) {
 if (e.textContent == "OK") {
    e.style.color = "green";
 }
  else if (e.textContent == "NOK") {
    e.style.color = "red";
 }
});

Maybe the webviewer doesn’t know ES

Tommi_Salmela · March 18, 2020, 12:51pm

What do you mean by that?

Tommi_Salmela · March 18, 2020, 1:03pm

I created a simple test app wil WebViewer and a button.
Blocks including only:

And table_test.html:
–clip–

    <tbody>
      <tr>
        <td>Alvin</td>
        <td>Eclair</td>
        <td>$0.87</td>
      </tr>
      <tr>
        <td>Alan</td>
        <td>Jellybean</td>
        <td>$3.76</td>
      </tr>
      <tr>
        <td>Jonathan</td>
        <td>Lollipop</td>
        <td>$7.00</td>
      </tr>
    </tbody>
  </table>

Name	Item Name	Item Price

Tommi_Salmela · March 18, 2020, 1:05pm

So I am still wondering the issue which is distinguishing this test app and the actual app with html code

Red_Panda · March 18, 2020, 3:23pm

I mean EcmaScript arrow functions and Array.forEach(). Has anybody tried that?

TIMAI2 · March 18, 2020, 4:05pm

Put @Red_Panda 's additional script at the end of all the other scripting in the file, then it should work (using Taifun’s table.html example)

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 == "TX") {
e.style.color = "green";
 }
  else if (e.textContent == "Austin") {
e.style.color = "red";
 }
});

  </script>
</body>
</html>

Tommi_Salmela · March 19, 2020, 12:08pm

YES!!

Now it is working finally!

Great thanks for all of you that gave me support

Tommi S.

Tommi_Salmela · March 20, 2020, 2:58pm

Further development:
Can anyone provide an example, howto tweak the table.html so that

the dynamically created row becomes a button?
by pushing that “dynamic” button, an AppInventor activity can be started by clicking the button like below

Thanks,

Tommi S.

TIMAI2 · March 20, 2020, 3:07pm

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 ?

nitinseshadri · March 20, 2020, 3:09pm

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.

Tommi_Salmela · March 20, 2020, 3:13pm

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.

TIMAI2 · March 20, 2020, 3:35pm

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

Tommi_Salmela · March 20, 2020, 3:51pm

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(/

/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);
  });

–clap–

TIMAI2 · March 20, 2020, 3:58pm

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

Tommi_Salmela · March 23, 2020, 10:43am

Thx, I got it now

However I noticed that row index only is not enough.
How can I refer to the row items?

Tommi