topic Re: Survey123 JavaScript Function Styling the Output in ArcGIS Survey123 Questions

Survey123 JavaScript Function Styling the Output

PaulSweeney3 — Thu, 29 Jul 2021 11:28:33 GMT

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 }

Re: Survey123 JavaScript Function Styling the Output

jcarlson — Thu, 29 Jul 2021 13:57:35 GMT

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.

Re: Survey123 JavaScript Function Styling the Output

PaulSweeney3 — Thu, 29 Jul 2021 15:26:39 GMT

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