Knowledge Base

Putting JavaScript into Formula-URL | ADVANCED

JavaScript, an easy to use, browser-based language, can be inserted into a formula-URL field, to run a variety of actions.

EDITORS NOTE: If you are not already familiar with Formula-URL fields it may benefit you to read this introductory article first: Using a formula-URL field

Two common examples include:

✓ Redirecting back to a record after saving

✓ Adding a pop-up box to confirm an action was taken

Starting with the first example ‘Redirecting back to a record after saving’, let’s say you want to update a record using a formula-URL field. In this case we’ll use the example of marking a project ‘complete’. If you don’t properly redirect back to your current record, you will be taken to the API callback (a block of code which is meaningless to most users). Let’s start by creating our field:

  1. Create a ‘checkbox’ field called ‘Project Complete’
  2. Then create your Formula-URL field and name it ‘Mark Project Complete’
  3. Open the ‘Mark Project Complete’ field settings and enter the following code:
URLRoot() & "db/" & Dbid()  & "?act=API_EditRecord"& "&rid=" & URLEncode ([Record ID#])& "&_fid_Your field ID=1" & "&apptoken=" & "Your App Token";
  1. Change ‘Your field ID’ to the field ID of the ‘Project Complete’ field. Then replace ‘Your App Token’ with an app token from your QuickBase application
  2. Once complete, click the button and see what happens. The result should look like this:

This is XML and provides information showing the details of our API call. At this point we don’t need to understand this information or even view it. What we really want is to return to our record and see that the ‘Project Complete’ checkbox field has been updated. This is where we will add our JavaScript.

  1. Return to your ‘Mark Project Complete’ formula-URL field and update your code to the following (changes highlighted)
  2. Here is the code text (to copy/paste):
Var text URL=URLRoot() & "db/" & Dbid()  & "?act=API_EditRecord"& "&rid=" & URLEncode ([Record ID#])& "&_fid_Check_Box_ID=1" & "&apptoken=" & "Your App Token";

"javascript:" &"$.get('" & $URL & "',function(){" &"location.reload(true);" &"});" & "void(0);"

Once your code has been updated, click the button again. You will notice a slight delay and then the record is refreshed. The delay is the redirect, returning you to the record you are editing.

Now let’s look at our second example ‘Adding a pop-up box to confirm an action was taken’ and build on what we’ve just done by adding a pop-up box to confirm the project was ‘Completed’

  1. Start by copying the ‘Mark Project Complete’ field
  2. Now all we need to do is add a small snippet of code to the end of the code we’ve already written:
alert('Project Complete');"
  1. Now our full code block looks as follows (addition highlighted):

  1. Now the pop-up box will appear whenever the button is clicked with the confirmation text “Project Complete”

If you like to see how these example look within QuickBase click here:

To see how to add JavaScript to a Rich Text field click here

Copyright ©2021 - Quandary Consulting Group