Forum Discussion

ArchiveUser's avatar
ArchiveUser
Qrew Captain
8 years ago

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

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);
  • _anomDiebolt_'s avatar
    _anomDiebolt_
    Qrew Elite
    8 years ago
    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).
  • AdamParker1's avatar
    AdamParker1
    Qrew Member
    8 years ago
    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? 
  • ArchiveUser's avatar
    ArchiveUser
    Qrew Captain
    8 years ago
    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? 
  • ArchiveUser's avatar
    ArchiveUser
    Qrew Captain
    8 years ago
    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
    • _anomDiebolt_'s avatar
      _anomDiebolt_
      Qrew Elite
      8 years ago
      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.