Discussions

Expand all | Collapse all

Buttons with color, function and flexability

  • 1.  Buttons with color, function and flexability

    Posted 06-28-2017 13:18
    I wanted a button that could be colored to any color, change data, disappear if criteria was met and return to the same location it was used thus allowing end users to have the button wherever they wanted and in multiple locations. Also I wanted to have name of the button be dynamic and the name change based on data in a the record.
     So pretty much I wanted most everything. Being a very low code person I used the forum and Quick Base support. I found that nobody was asking for all of that. In a matter of a week I have pieced together the code thanks to many contributors in the forum (if you answered anything on any of the items I wanted you are on the list).
    Here is the code and below some explanation, I hope this can help someone looking as much as I wanted. This is used in a text-formula field with html enabled. It is a check-in button (we also have a version that changes to a check-out after check-in is clicked...basically multi-function)

    // Begin button style

    var text bgcolor = "#A5E294";

    var text txtcolor = "black";

    var text style = "style=\"text-decoration: none;\n\n box-shadow: 3px 3px 1px #888888; \n\n background:" & $bgcolor & ";\n\n border-radius: 3px;\n\n padding: 5px 8px;\n\n color: " & $txtcolor & ";\n\n display: inline-block;\n\n font: bold 700 24px/1 \"Calibri\", sans-serif;\n\n text-align: center;\n\n text-shadow:none;";

    // End button style

    var text URL = URLRoot() & "db/" & Dbid()

    & "?a=API_EditRecord&rid=" & [Record ID#]

    & "&_fid_13="&URLEncode(Now())

    & "&_fid_25=" & URLEncode("Tech Onsite");

    If(ToText([Lead Tech Day 1 Check-In])="",

    "<a " & $style & " href=" &

    "javascript:" &

    "$.get('" &

    $URL &

    "',function(){" &

    "location.reload(true);" &

    "});"

    & "void(0);"

     

    & "> Check-In "&[Technician Name]&"</a>",

    "")

      

    #A5E294 ? HTML color code for button color

    Black ? color wording for button text. This can be replaced with HTML color code

    & "&_fid_13="&URLEncode(Now())

    & "&_fid_25=" & URLEncode("Tech Onsite");

    This is the section of code defining the changes to make. Make sure that the last change end with a semi-colon!

    If(ToText([Lead Tech Day 1 Check-In])="",

    The if statement that creates the condition to show the button

    Check-In "&[Technician Name]&"

    The name of the button, note the syntax to use if wanting to have a dynamic name with data from a field in the record


  • 2.  RE: Buttons with color, function and flexability

    Posted 06-28-2017 13:22
    Great :)
    Thanks for sharing this.


  • 3.  RE: Buttons with color, function and flexability

    Posted 06-28-2017 15:54
    Yes, thanks for this. Very helpful.


  • 4.  RE: Buttons with color, function and flexability

    Posted 06-30-2017 22:47
    Note to all take out the  \n from the style, it causes a visual glitch.


  • 5.  RE: Buttons with color, function and flexability

    Posted 05-22-2018 19:09
    Note to anyone using this we had to remove the Now() and go with the below method of putting "today" in it's place. Now() gives time you last refreshed the page not the time and the solution is putting "today" which gives the time as well.....who knew.

    & "&_fid_13="&URLEncode("today")