Survey123 JavaScript Function Styling the Output

[PaulSweeney3]

Hi All 

After Much toing and frowing i have manage to create this JavaScript function that shows a list of equipment and weather or not it has been inspected in the last week, indicated by a green tick box or red cross. 

My problem is while it looks great on the desktop version of Connect when I publish it  ,it looks a mess on some smaller android devices. I was thinking if I could  reduced the size of the font it might look better on devices with a smaller screen. I cannot figure out how to do this though. is it possible? or is there another solution I could use to help it look better on smaller devices

Kind regards 

Paul Sweeney 

    xmlhttp.open("GET",url,false);
        xmlhttp.send();
        
        
        
            var responseJSON=JSON.parse(xmlhttp.responseText);
            var OIDS = "Serial Number "+ "- Description -"+ "- Last Inspection Date -"+"\n"+"\n";
            
            var outputdatecheck = " "
            var i;
            for (i in responseJSON.features) {
                var date = new Date();
                date.setDate(date.getDate() - 7);
if(new Date(responseJSON.features[i].attributes.HSF_051_Inspection_Date) > date) {
 outputdatecheck = "\u2705";
 } else {
  outputdatecheck = "\u274C";
 }
                OIDS +=  "\n\u2022 ("+((JSON.stringify(responseJSON.features[i].attributes.SERIAL_NUMBER)+") - "+JSON.stringify(responseJSON.features[i].attributes.DESCRIPTION)+" - "+ outputdatecheck+" "+new Date(responseJSON.features[i].attributes.HSF_051_Inspection_Date).toLocaleDateString("en-UK")+"\n").replace(/"/g, '').replace("01/01/1999", " (no weekly inspection record)").replace("01/01/1970", " (no weekly inspection record)"));
              }

            return OIDS
            
          }

[jcarlson]

Just include some HTML styling in the output string.

If you want the whole thing reduced, you can just stick <p style="font-size:10px"> at the beginning of your OIDS string. Or if you want, you can add more than one HTML tags in different places in your output string to give the text some variation.

<p style="font-size:30px">This is a paragraph.</p> <p style="font-size:11px">This is another paragraph.</p>

And lastly, because it appears that you're trying to output a table of sorts, you can attempt to use the HTML <table> tags in S123, though you don't have nearly as much control over how they display.

<table style="padding:5px; border:1px solid black; border-spacing:5px;"><tr style="font-size:38px"><td>Header 1 </td><td>Header 2 </td></tr><tr style="font-size:24px"><td>Some value</td><td>Another value</td></tr><tr style="font-size:8px"><td>Next row</td><td>Last cell</td></tr></table>

 Note how the padding and border styling on the <table> tag is ignored. But text styling per row is possible.

[PaulSweeney3]

hi @jcarlson 

Thanks for your response i managed ot get it to work although its not  exactly as per your instructions for example to get it to recognise the HTML tags I had to use 

OIDS += "<p style=\u0022font-size:8px\u0022>\n\u2022 ......................

but unfortunately  it appears the HTML formatting is not working on my android device. The windows version of the field app supports it but my android device does not. is this expected ? 

Regards 

Paul