How to add a custom image to a button containing javascript?

  • 0
  • 1
  • Question
  • Updated 9 months ago
  • Answered
I have a button that that updates a Status field to "Complete."

It is set up with Javascript because I want the update to be "instant" and the page to not reload. 

How would I add my own icon from a QB-hosted PNG image to replace the built-in button? 

My code looks like: 



var text URL = 
URLRoot() & "db/" & Dbid() & "?act=API_EditRecord&rid=" & [Record ID#] &
"&_fid_7="&URLEncode("Complete") &
 "&_fid_8=" &Now();
 
 

"javascript:" & 
"$.get('"  &
$url & 
"',function(){" & 
"$.jGrowl('Status changed to Complete.', {life: 5000, theme: 'jGrowl-green'});" & 
"});" & 
"void(0);"
Photo of Adam

Adam

  • 730 Points 500 badge 2x thumb

Posted 10 months ago

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

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 27,954 Points 20k badge 2x thumb
You have to use a Rich Text formula field to display an image representing the button. 

In your draft formula you are attempting to call the method API_EditRecord and jGrowl() in addition to styling the button with an image.  It is easier and more flexible to not mix (1) API calls and (2) JavaScript into your formulas irrespective of what support, prior forum answers, other power users or documentation may suggest. You will find a script solution vastly more useful and I suggest you use the IOL tecdchnique.

The following Pastie links to the IOL technique setup instructions and provides the formula for the IOL field and module.js code:

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

If you need more instructions feel free to ask. If you are hesitant or unsure of using the IOL technique you can rely on one of the other answers that shows up (I don't think there will be any).
Photo of Adam Parker

Adam Parker

  • 82 Points 75 badge 2x thumb
Dan, Thank you for the reply. 

I have successfully loaded IOL into this table, but I am struggling to implement this. 

Here's where I'm stuck: 

1. Is the [-] field the "IOL Field"? I.e., is this where the code from the IOL Field section goes? ]

2. Where do I enter the Content code? 

3. How do I edit the existing code for my button field? 
Photo of Adam

Adam

  • 730 Points 500 badge 2x thumb
Dan, Thank you for the reply. 

I have successfully loaded IOL into this table, but I am struggling to implement this. 

Here's where I'm stuck: 

1. Is the [-] field the "IOL Field"? I.e., is this where the code from the IOL Field section goes? ]

2. Where do I enter the Content code? 

3. How do I edit the existing code for my button field? 
Photo of Adam

Adam

  • 730 Points 500 badge 2x thumb
Dan, 

Here is where I am currently: 

1. module.js - I replaced the module.js code with the supplied pastie code from "Content"

2. [-] - I replaced this with the IOL Field code supplied in the pastie. It is displaying the image you provided. 

I don't know what to put in my button field (or if I'm doing any of this correctly). 

Thanks
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 27,694 Points 20k badge 2x thumb
There is a version of the IOL technique setup instructions in the forum that has the same steps as the link in the Pastie Database that includes screenshots:

How Do I Setup the Image Onload Technique (IOL)?
https://community.quickbase.com/quickbase/topics/how-do-i-setup-the-image-onload-technique-iol

Unfortunately I cannot edit this post and when I made it I was largely exploring how to use the forum to post long formatted messages.

This version should help guide you through the steps and may use updated language to refer to Code Pages (instead of User Defined Pages) and Rich Text Fields (instead of Text Fields with some HTML allowed). If it is not explicitly stated, the image onload field is [-] (a single hyphen).  It is given this short name to make it take up the least possible column space when it is included on a report. The code page is typically named module.js or moduleTableName.js  . This name is not signifigant but prefixing the code page with "module" makes it easy to locate in list of pages and identify its purpose.

I think you  can probably follow these supplemental instructions and get the example working.  When you are through with the process please tell me where you got confused and I will find some way to clarify and update the instructions.