% Completed button

  • 0
  • 2
  • Question
  • Updated 1 year ago
  • Answered
I am looking for a button that will chance the color on a status bar based on the the number in a separate field.In other words, if I'm at 40% I need 4 check boxes to turn green.
 I found the below button in one of Kirk's apps (Magic Buttons) but it does the other think around. It changes the percentage complete based on the checkbox you are clicking in the picture


Photo of @lin

@lin

  • 820 Points 500 badge 2x thumb

Posted 1 year ago

  • 0
  • 2
Photo of QuickBaseCoach App Dev./Training

QuickBaseCoach App Dev./Training, Champion

  • 51,436 Points 50k badge 2x thumb
Can you post the code for Kirk's button?
Photo of @lin

@lin

  • 820 Points 500 badge 2x thumb
Here you go
var text star = "<img" & " src=\"" & "https://images.quickbase.com/si/16/228-rect_green.png\">";
var text notstar = "<img" & " src=\"" & "https://images.quickbase.com/si/16/226-rect_gray.png\">";
var number numberstars = (Floor([% Project Completed] * 10));
var number numbernotstars = 10 - $numberstars;
//10 is the number of units, because 10 is 1/10th of 100.

var text urlten =

    URLRoot() & "db/" & Dbid() & "?a=API_EditRecord" &
    "&rid=" & [Record ID#] &
    "&apptoken=d9eascudwjxs2sesxkjccwgtq9r" &
    "&_fid_143=10";

var text urltwenty =

    URLRoot() & "db/" & Dbid() & "?a=API_EditRecord" &
    "&rid=" & [Record ID#] &
    "&apptoken=d9eascudwjxs2sesxkjccwgtq9r" &
    "&_fid_143=20";

var text urlthirty =

    URLRoot() & "db/" & Dbid() & "?a=API_EditRecord" &
    "&rid=" & [Record ID#] &
    "&apptoken=d9eascudwjxs2sesxkjccwgtq9r" &
    "&_fid_143=30";

var text urlforty =

    URLRoot() & "db/" & Dbid() & "?a=API_EditRecord" &
    "&rid=" & [Record ID#] &
    "&apptoken=d9eascudwjxs2sesxkjccwgtq9r" &
    "&_fid_143=40";

var text urlfifty =

    URLRoot() & "db/" & Dbid() & "?a=API_EditRecord" &
    "&rid=" & [Record ID#] &
    "&apptoken=d9eascudwjxs2sesxkjccwgtq9r" &
    "&_fid_143=50";

var text urlsixty =

    URLRoot() & "db/" & Dbid() & "?a=API_EditRecord" &
    "&rid=" & [Record ID#] &
    "&apptoken=d9eascudwjxs2sesxkjccwgtq9r" &
    "&_fid_143=60";

var text urlseventy =

    URLRoot() & "db/" & Dbid() & "?a=API_EditRecord" &
    "&rid=" & [Record ID#] &
    "&apptoken=d9eascudwjxs2sesxkjccwgtq9r" &
    "&_fid_143=70";

var text urleighty =

    URLRoot() & "db/" & Dbid() & "?a=API_EditRecord" &
    "&rid=" & [Record ID#] &
    "&apptoken=d9eascudwjxs2sesxkjccwgtq9r" &
    "&_fid_143=80";

var text urlninety =

    URLRoot() & "db/" & Dbid() & "?a=API_EditRecord" &
    "&rid=" & [Record ID#] &
    "&apptoken=d9eascudwjxs2sesxkjccwgtq9r" &
    "&_fid_143=90";

var text urlhundred =

    URLRoot() & "db/" & Dbid() & "?a=API_EditRecord" &
    "&rid=" & [Record ID#] &
    "&apptoken=d9eascudwjxs2sesxkjccwgtq9r" &
    "&_fid_28=Completed" &
    "&_fid_153=Completed" &
    "&_fid_143=100";

"<span alt=\"" & ToText($numberstars) & " of 10 \" title=\"" & ToText($numberstars) & " of 10 \" class=\"NoWrap\">" &

    If($numberstars >= 1, "<a href=\"javascript:" & "$.get('" & $urlten & "', function(){" & "location.reload();" & "});" & "void(0);\"><img src='https://images.quickbase.com/si/16/228-rect_green.png'></a>";,
        "<a href=\"javascript:" & "$.get('" & $urlten & "', function(){" & "location.reload();" & "});" & "void(0);\"><img src='https://images.quickbase.com/si/16/226-rect_gray.png'></a>") &
    If($numberstars >= 2, "<a href=\"javascript:" & "$.get('" & $urltwenty & "', function(){" & "location.reload();" & "});" & "void(0);\"><img src='https://images.quickbase.com/si/16/228-rect_green.png'></a>";,
        "<a href=\"javascript:" & "$.get('" & $urltwenty & "', function(){" & "location.reload();" & "});" & "void(0);\"><img src='https://images.quickbase.com/si/16/226-rect_gray.png'></a>") &
    If($numberstars >= 3, "<a href=\"javascript:" & "$.get('" & $urlthirty & "', function(){" & "location.reload();" & "});" & "void(0);\"><img src='https://images.quickbase.com/si/16/228-rect_green.png'></a>";,
        "<a href=\"javascript:" & "$.get('" & $urlthirty & "', function(){" & "location.reload();" & "});" & "void(0);\"><img src='https://images.quickbase.com/si/16/226-rect_gray.png'></a>") &
    If($numberstars >= 4, "<a href=\"javascript:" & "$.get('" & $urlforty & "', function(){" & "location.reload();" & "});" & "void(0);\"><img src='https://images.quickbase.com/si/16/228-rect_green.png'></a>";,
        "<a href=\"javascript:" & "$.get('" & $urlforty & "', function(){" & "location.reload();" & "});" & "void(0);\"><img src='https://images.quickbase.com/si/16/226-rect_gray.png'></a>") &
    If($numberstars >= 5, "<a href=\"javascript:" & "$.get('" & $urlfifty & "', function(){" & "location.reload();" & "});" & "void(0);\"><img src='https://images.quickbase.com/si/16/228-rect_green.png'></a>";,
        "<a href=\"javascript:" & "$.get('" & $urlfifty & "', function(){" & "location.reload();" & "});" & "void(0);\"><img src='https://images.quickbase.com/si/16/226-rect_gray.png'></a>") &
    If($numberstars >= 6, "<a href=\"javascript:" & "$.get('" & $urlsixty & "', function(){" & "location.reload();" & "});" & "void(0);\"><img src='https://images.quickbase.com/si/16/228-rect_green.png'></a>";,
        "<a href=\"javascript:" & "$.get('" & $urlsixty & "', function(){" & "location.reload();" & "});" & "void(0);\"><img src='https://images.quickbase.com/si/16/226-rect_gray.png'></a>") &
    If($numberstars >= 7, "<a href=\"javascript:" & "$.get('" & $urlseventy & "', function(){" & "location.reload();" & "});" & "void(0);\"><img src='https://images.quickbase.com/si/16/228-rect_green.png'></a>";,
        "<a href=\"javascript:" & "$.get('" & $urlseventy & "', function(){" & "location.reload();" & "});" & "void(0);\"><img src='https://images.quickbase.com/si/16/226-rect_gray.png'></a>") &
    If($numberstars >= 8, "<a href=\"javascript:" & "$.get('" & $urleighty & "', function(){" & "location.reload();" & "});" & "void(0);\"><img src='https://images.quickbase.com/si/16/228-rect_green.png'></a>";,
        "<a href=\"javascript:" & "$.get('" & $urleighty & "', function(){" & "location.reload();" & "});" & "void(0);\"><img src='https://images.quickbase.com/si/16/226-rect_gray.png'></a>") &
    If($numberstars >= 9, "<a href=\"javascript:" & "$.get('" & $urlninety & "', function(){" & "location.reload();" & "});" & "void(0);\"><img src='https://images.quickbase.com/si/16/228-rect_green.png'></a>";,
        "<a href=\"javascript:" & "$.get('" & $urlninety & "', function(){" & "location.reload();" & "});" & "void(0);\"><img src='https://images.quickbase.com/si/16/226-rect_gray.png'></a>") &
    If($numberstars >= 10, "<a href=\"javascript:" & "$.get('" & $urlhundred & "', function(){" & "location.reload();" & "});" & "void(0);\"><img src='https://images.quickbase.com/si/16/228-rect_green.png'></a>";,
        "<a href=\"javascript:" & "$.get('" & $urlhundred & "', function(){" & "location.reload();" & "});" & "void(0);\"><img src='https://images.quickbase.com/si/16/226-rect_gray.png'></a>") &
    "</span>"
Photo of Ken

Ken

  • 170 Points 100 badge 2x thumb
It sounds to me you are not looking for a button, but display a simple progress bar based on another numeric field.  Here's a formula to create one via a html enabled formula text field:

// Draw basic progress bar.  PctDone must evaluate from 0 to 10.
var Number pctdone = Round(If([Action Count]=0,0,([Action Count] - [Incomplete Action Count]) / [Action Count]) * 10);
var Text gry = "<img src=\"https://images.quickbase.com/si/16/226-rect_gray.png\"</img>";
var Text grn = "<img src=\"https://images.quickbase.com/si/16/228-rect_green.png\"</img>";

Case($pctdone,
  0, $gry & $gry & $gry & $gry & $gry & $gry & $gry & $gry & $gry & $gry,
  1, $grn & $gry & $gry & $gry & $gry & $gry & $gry & $gry & $gry & $gry,
  2, $grn & $grn & $gry & $gry & $gry & $gry & $gry & $gry & $gry & $gry,
  3, $grn & $grn & $grn & $gry & $gry & $gry & $gry & $gry & $gry & $gry,
  4, $grn & $grn & $grn & $grn & $gry & $gry & $gry & $gry & $gry & $gry,
  5, $grn & $grn & $grn & $grn & $grn & $gry & $gry & $gry & $gry & $gry,
  6, $grn & $grn & $grn & $grn & $grn & $grn & $gry & $gry & $gry & $gry,
  7, $grn & $grn & $grn & $grn & $grn & $grn & $grn & $gry & $gry & $gry,
  8, $grn & $grn & $grn & $grn & $grn & $grn & $grn & $grn & $gry & $gry,
  9, $grn & $grn & $grn & $grn & $grn & $grn & $grn & $grn & $grn & $gry,
 10, $grn & $grn & $grn & $grn & $grn & $grn & $grn & $grn & $grn & $grn
)
(Edited)
Photo of Ryan

Ryan

  • 940 Points 500 badge 2x thumb
where did the action count fields come from?
Photo of Ken

Ken

  • 170 Points 100 badge 2x thumb
The original post didn't have any fields names.  The sample formula given used fictitious names since it's an example formula.  In a real app you could use numeric summary fields of the related details table.  Use your own field names as needed.
Photo of Ryan

Ryan

  • 940 Points 500 badge 2x thumb
so how would it work for me if I don't use or have any similar fields as the sample fields?
Photo of @lin

@lin

  • 820 Points 500 badge 2x thumb
Awesome source! Works like a charm.
Thanks Ken!
Photo of Tony

Tony

  • 172 Points 100 badge 2x thumb
Hello - I'm trying to do something similar but I need to use a text based field.  Do I need to create a numeric field that corresponds to the text to have this work? I'd like it to be something similar to this
Photo of QuickBaseCoach App Dev./Training

QuickBaseCoach App Dev./Training, Champion

  • 48,536 Points 20k badge 2x thumb
I suggest that you post a new question.
Photo of Tony

Tony

  • 172 Points 100 badge 2x thumb
Will do