Forum Discussion

JerrodNorris's avatar
JerrodNorris
Qrew Member
4 months ago
Solved

% Complete status bar of check boxes

I have a checklist which is 20 or so checkbox questions across 5 different Sections,  to work through a field inspection. I am looking to provide a visual representation of when Section 1s 5 check boxes are not clicked it would show red/ not started, when 1 or more but less than the 5 are checked it would show yellow/ in-progress, and when all 5 check boxes are clicked it would show green/ complete. And I would do this foreach Section. What is the best way to complete this and be able to show it in a Form and on a Report view? Thanks. 

formulas
  • Maria's avatar
    Maria
    3 months ago

    I don't know why this has captured my attention so fully, lol. Here's a revision, It looks like the lower progress bar in the screengrab below.  Good luck! 

    var number total = 10;

var number completed =
ToNumber([Task 1]) +
ToNumber([Task 2]) +
ToNumber([Task 3]) +
ToNumber([Task 4]) +
ToNumber([Task 5]) +
ToNumber([Task 6]) +
ToNumber([Task 7]) +
ToNumber([Task 8]) +
ToNumber([Task 9]) +
ToNumber([Task 10]);

var number calc = ($completed/$total)*100;

var text barColor =
If($calc = 100, "#4CAF50",  //* Green  *//
If($calc >= 70, "#f2ca16",  //* Yellow *//
If($calc >= 40, "#e67220",  //* Orange *//
"#F44336")));               //* Red    *//

"<div style='width:100%; background-color:#e0e0e0; padding: 8px; border-radius:8px;'>" &

"<div style='width:" & $calc & "%; height:20px; background-color:" & $barColor & "; opacity: 0.5; padding:6px 0;  border-radius:8px;'>"& "</div>" &

"<div style='color:black; text-align:center; padding:6px;  border-radius:8px; font-weight:bold;'>" & $calc & "% (" & $completed & " of " & $total & ")" & "</div>"

&"</div>"

     

2 Replies

  • Maria's avatar
    Maria
    Community Manager
    4 months ago

    I used ChatGPT and built this in my own test app. Give it a try:

    var number total = 10;

var number completed =
ToNumber([Task 1]) +
ToNumber([Task 2]) +
ToNumber([Task 3]) +
ToNumber([Task 4]) +
ToNumber([Task 5]) +
ToNumber([Task 6]) +
ToNumber([Task 7]) +
ToNumber([Task 8]) +
ToNumber([Task 9]) +
ToNumber([Task 10]);

var number calc = ($completed/$total)*100;

var text barColor =
If($calc = 100, "#4CAF50",  //* Green */
If($calc >= 70, "#f2ca16",  //* Yellow */
If($calc >= 50, "#e67220",  //* Orange */
"#F44336")));               //* Red */

"<div style='width:100%; background-color:#e0e0e0; padding: 0px; border-radius:8px;'><div style='width:" & $calc & "%;background-color:" & $barColor & ";color:black; text-align:center;padding:6px 0;  border-radius:8px;font-weight:bold;'>" & $calc & "% (" & $completed & " of " & $total & ")" & "</div></div>

     

  • Maria's avatar
    Maria
    Community Manager
    3 months ago

    I don't know why this has captured my attention so fully, lol. Here's a revision, It looks like the lower progress bar in the screengrab below.  Good luck! 

    var number total = 10;

var number completed =
ToNumber([Task 1]) +
ToNumber([Task 2]) +
ToNumber([Task 3]) +
ToNumber([Task 4]) +
ToNumber([Task 5]) +
ToNumber([Task 6]) +
ToNumber([Task 7]) +
ToNumber([Task 8]) +
ToNumber([Task 9]) +
ToNumber([Task 10]);

var number calc = ($completed/$total)*100;

var text barColor =
If($calc = 100, "#4CAF50",  //* Green  *//
If($calc >= 70, "#f2ca16",  //* Yellow *//
If($calc >= 40, "#e67220",  //* Orange *//
"#F44336")));               //* Red    *//

"<div style='width:100%; background-color:#e0e0e0; padding: 8px; border-radius:8px;'>" &

"<div style='width:" & $calc & "%; height:20px; background-color:" & $barColor & "; opacity: 0.5; padding:6px 0;  border-radius:8px;'>"& "</div>" &

"<div style='color:black; text-align:center; padding:6px;  border-radius:8px; font-weight:bold;'>" & $calc & "% (" & $completed & " of " & $total & ")" & "</div>"

&"</div>"