My html for yes/no fields looks like this:
<table>
<tbody>
<tr>
<th>Name of the row</th>
<th data-content-type="yn">
@{outputs('Get_element')?['body/[Name of the yes/no field you get with dynamic content]']}
</th>
</tbody>
</table>
I updated the script as it seems that it didn''t work properly the first time around:
on the <body> tag you should have this:
<body onload="yn()">
and this is the updated script tag:
<script type="text/javascript">
function yn() {
document
.querySelectorAll('[data-content-type="yn"]')
.forEach((element) => {
if (element.innerHTML.trim() === "False") {
element.innerHTML = " ";
} else if (element.innerHTML.trim() === "True") {
element.innerHTML = "✓";
}
});
</script>
I put the script tag before the body tag, you could try to leave it at the end, but now I'm not sure if it would work properly.
As for resources about JavaScript, you should check out w3schools.com
I'll try to give you a brief explanation on how the script works.
After the body part of the page has loaded, the yn() function will start. That's why we have this: <body onload="yn()">
The script tag has the type="text/javascript" attribute just to make sure that the browser knows that this is a JS script.
Inside, we define the yn() function, which is the thing that will replace all the True and False values inside the tags that have the data-content-type="tn" attribute.
The first thing it does is that it queries all things that have that attribute and return an array.
Then, for each element of the array, it trims all the whitespace that may occur and if the value is "False" it leaves a blank space (or whatever you tell it to do, it might also be a cross or anything else) or else, if the value is "True" it replaces it with a checkmark.
That's about it.
Feel free to contact me if you have any questions
