Skip to main content
Question

% Completed button

  • August 8, 2017
  • 0 replies
  • 30 views

Forum|alt.badge.img+6
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


This topic has been closed for replies.

Can you post the code for Kirk's button?

Forum|alt.badge.img+6
  • Author
  • Quickbase Alumni
  • August 8, 2017
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>

  • Quickbase Alumni
  • August 9, 2017
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
)

Forum|alt.badge.img+6
  • Author
  • Quickbase Alumni
  • August 9, 2017
Awesome source! Works like a charm.
Thanks Ken!

  • Quickbase Alumni
  • August 28, 2017
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