Forum Discussion

AlinMihalcea1's avatar
AlinMihalcea1
Qrew Assistant Captain
7 years ago

% Completed button

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


10 Replies

  • AlinMihalcea1's avatar
    AlinMihalcea1
    Qrew Assistant Captain
    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>
  • 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
    )
    • RyanRyan2's avatar
      RyanRyan2
      Qrew Assistant Captain
      where did the action count fields come from?
    • KenFirch's avatar
      KenFirch
      Qrew Trainee
      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.
    • RyanRyan2's avatar
      RyanRyan2
      Qrew Assistant Captain
      so how would it work for me if I don't use or have any similar fields as the sample fields?
  • 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