What is the Easy Button Technique?

  • 1
  • 2
  • Question
  • Updated 2 years ago
  • Answered

What is the Easy Button Technique?

Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,184 Points 20k badge 2x thumb

Posted 3 years ago

  • 1
  • 2
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,184 Points 20k badge 2x thumb
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
Photo of Dinesh

Dinesh

  • 202 Points 100 badge 2x thumb
Hi Dan, Can i implement easy button inside the form , rather a report column as your pastie suggests.
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,184 Points 20k badge 2x thumb
Yes, Permission Granted!
Photo of Dinesh

Dinesh

  • 202 Points 100 badge 2x thumb
Thanks. I saw it that it is already implemented. You made my day.
Photo of Keith

Keith, Champion

  • 1,148 Points 1k badge 2x thumb
Really cool Dan!
Photo of Dinesh

Dinesh

  • 202 Points 100 badge 2x thumb
yes keith, it is a great idea. I made it work and it feels great.
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,184 Points 20k badge 2x thumb
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,

When are you going to launch this book? I am waiting for this.

Thanks,
Gaurav
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,184 Points 20k badge 2x thumb
I have the cover completed:

Photo of Dinesh

Dinesh

  • 202 Points 100 badge 2x thumb
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 ?
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,184 Points 20k badge 2x thumb
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) {
Photo of Dinesh

Dinesh

  • 202 Points 100 badge 2x thumb
I tried it the way you suggested. First attempt didn't work. But let me try once more tomorrow morning!
Photo of Ryan

Ryan

  • 60 Points
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?
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,184 Points 20k badge 2x thumb
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().
Photo of Ryan

Ryan

  • 60 Points
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.