Buttons with color, function and flexability

  • 4
  • 3
  • Question
  • Updated 6 months ago
  • Doesn't Need an Answer
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
Photo of Jason

Jason

  • 1,012 Points 1k badge 2x thumb

Posted 1 year ago

  • 4
  • 3
Photo of Gaurav Sharma

Gaurav Sharma

  • 5,756 Points 5k badge 2x thumb
Great :)
Thanks for sharing this.
Photo of Michael Barrow

Michael Barrow

  • 2,206 Points 2k badge 2x thumb
Yes, thanks for this. Very helpful.
Photo of Jason

Jason

  • 1,012 Points 1k badge 2x thumb
Note to all take out the  \n from the style, it causes a visual glitch.
Photo of Jason

Jason

  • 1,012 Points 1k badge 2x thumb
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")