What is the Easy Button Technique?

The Easy Button is a variant on the standard Image Onload Technique that simply places a button in the very same field where the image onload field is located. Clicking on the button will cause an event handler defined within the module.js page to trigger. Normally the image onload field is is configured to not be visible because its only purpose is to inject script saved in a user defined field into the QuickBase authored page. With the Easy Button Technique we add a <a> after the image onload formula which is visually rendered as a button and clicks are the <span> are detected within the module.js script. To the extent field values are passed between the record and the script they are passed as data attributes and read in the script using the dataset method. Some of these conventions may seem new or even odd but the purpose is to streamline the formula so it is simple to use from one application to another.

Easy Button ~ Table Dashboard
https://haversineconsulting.quickbase.com/db/bkkq35bum?a=td


Here is the formula for the image onload field [Button] (in this case we want to field to display and not be "hidden" so we name it [Button] instead of [-]):

[iol] & "moduleTable1.js" & [/iol]
&
"<a class='QBU_Button Vibrant Success' " &
"  data-rid='" & [Record ID#] & "'" &
"  data-name='" & [Name] & "'" &
">Button</a>"


Pastie Database
https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=482

Hi Dan, Can i implement easy button inside the form , rather a report column as your pastie suggests.

Yes, Permission Granted!

Thanks. I saw it that it is already implemented. You made my day.

Really cool Dan!

yes keith, it is a great idea. I made it work and it feels great.

Thanks for the kudos. You two early adopters should be interested in my new book (It is going to revolutionize QuickBase):

http://i.imgur.com/iZqWxZy.jpg

Hi Dan, A quick question on Easy Button. it works well, when there is one button on the form. However, if i have 2 buttons on the same form, then the click to any of the 2 button always calls the same script (the one mentioned against the first button), although I am calling 2 different scripts in each button
Is it possible to overcome this issue . if so, How can I overcome this issue ?

When using two buttons use two different class names on the >a> elements

"<a class='QBU_Button1 Vibrant Success' " &
"<a class='QBU_Button2 Vibrant Success' " &

and detect the click events using corresponding classes in the code:

  $("a.QBU_Button1").on("click", function(event) {
  $("a.QBU_Button2").on("click", function(event) {

I tried it the way you suggested. First attempt didn't work. But let me try once more tomorrow morning!

Dan, this is a great technique, thanks for letting us know about it!

I've tried implementing two buttons as you had mentioned above but as soon as I add the second class everything in the js page stops working. Any idea why this may be?

You have to make four changes to insure you are using the classes QBU_Button1  & QBU_Button2 in both the formulas and in module.js. Debug with an alert() or console.log().

Thanks Dan, I was able to get it working! It seems that the issue was that it didn't like that I was trying to use jGrowl.