Knowledge Base

Adding JavaScript to a ‘Formula Rich-Text’ Field | ADVANCED

Adding JavaScript to a ‘Formula Rich-Text’ field allows you to expand Quickbase beyond its native features, opening up a range of options otherwise unavailable.

How is this different than adding JavaScript to a ‘URL-Formula’ field? ‘Formula Rich Text’ fields allow you to combine your JavaScript with HTML. This means that you can use all the HTML has to offer within your field including; colorize buttons, format text and a whole range of other options. For an introduction to HTML click here.

You will also notice there are some minor syntax differences between ‘Formula-URL’ and ‘Formula Rich Text’ field types. Here are a few examples of tasks for which you might use a ‘Formula Rich-Text’ Field:

✓ Change button colorization in mouse-over

✓ Redirect after saving a record

✓ Present options in a ‘pop up’ notification

In this article we’ll look at two examples:

‘Redirect after saving a record’ and ‘Present options in a ‘pop up’ notification’.

EDITORS NOTE: You will not need to call ‘javascript:’ when adding JS to a ‘Rich-Text’ field

Let’s say your company tracks projects. When the project is completed, the project manager will mark the project complete and decide whether the customer should receive a customer satisfaction survey.

The project is considered complete if the checkbox ‘completed’ is checked. A survey is sent if the checkbox ‘Send Survey’ is checked. Therefore our button should mark the record ‘Complete’ and present the Project Manager with pop-up box alert, asking whether a survey should be sent of not. If the user selects that the survey be sent, the ‘Send Survey’ checkbox will be checked. Let’s go ahead and set this up:

  1. Create two checkbox fields. Name one ‘Complete’ and the other ‘Send Survey’
  2. Create your ‘Formula Rich Text’ field and name it ‘Mark Project Complete’
  3. Now you’ll create three variables in your formula (Click here for more information about declaring variables: https://quandarycg.quickbase.com/db/bnz6hr7vh?a=dr&r=7&rl=bag): We’ll create a url string for marking the project complete, a url string for marking the project complete with a survey and a url string to redirect the user back to the record following your api call
  4. First, declare the variable URL string for checking both the ‘Complete’ and ‘Send Survey’ checkboxes:
    1. Define the variable: var text sendWithSurvey
    2. Assign table url: = URLRoot() & “db/” & [_DBID_KB_EXAMPLES]
    3. API edit record: &”?act=API_EditRecord&rid=”&URLEncode ([Record ID#]
    4. ‘Complete’ checked (substitute your record ID): & “&_fid_49=1”
    5. ‘Send Survey’ checked (substitute your record ID): & “&_fid_53=1”
var text sendWithSurvey = 
URLRoot() & "db/" & [_DBID_KB_EXAMPLES] &"?act=API_EditRecord&rid="&URLEncode ([Record ID#])
& "&_fid_49=1"
& "&_fid_53=1"
&"&apptoken=YOUR APP TOKEN";
  1. ext, declare the variable URL string for checking the ‘Complete’ checkbox and notthe ‘Send Survey’ checkboxes. This URL string will be identical to the above, except it will have a new variable name and the ‘Send Survey checkbox will be set to 0 (unchecked).
var text sendWithoutSurvey =

URLRoot() & "db/" & [_DBID_KB_EXAMPLES] &"?act=API_EditRecord&rid="&URLEncode ([Record ID#])
& "&_fid_49=1"
& "&_fid_53=0"
&"&apptoken=YOUR APP TOKEN";
  1. Our third declared variable will be our redirect URL which will redirect us back to the record we are currently editing once our other URL strings are called.
var text rdr = URLRoot() & "/db/" & [_DBID_KB_EXAMPLES] &"?a=dr&rid="&URLEncode ([Record ID#]);
  1. Now that we have declared our three variables, it’s time to put it all together with our javascript (below the variables have been highlighted):
"<a style='width: 150px;border-color:black; text-decoration: none; background:#3761a2;color:white;' class='btn btn-sm btn-primary' href='#'" &
"onclick= \"return confirm('Would you like to have a survey sent? If Yes - click Submit, else Cancel to omit a Survey link from being sent')" & 
"?window.location.replace('" & $sendWithSurvey & "&rdr=" & URLEncode($rdr) & "'):" & 
"window.location.replace('" & $sendWithoutSurvey & "&rdr=" & URLEncode($rdr) & "');\"" &
">COMPLETE</a>"
  1. Here is the full formula:
var text sendWithSurvey = 
URLRoot() & "db/" & [_DBID_KB_EXAMPLES] &"?act=API_EditRecord&rid="&URLEncode ([Record ID#])
& "&_fid_49=1"
& "&_fid_53=1"
&"&apptoken=YOUR APP TOKEN";
var text sendWithoutSurvey = 
URLRoot() & "db/" & [_DBID_KB_EXAMPLES] &"?act=API_EditRecord&rid="&URLEncode ([Record ID#])
& "&_fid_49=1"
& "&_fid_53=0"
&"&apptoken=YOUR APP TOKEN";
var text rdr = URLRoot() & "/db/" & [_DBID_KB_EXAMPLES] &"?a=dr&rid="&URLEncode ([Record ID#]);
"<a style='width: 150px;border-color:black; text-decoration: none; background:#3761a2;color:white;' class='btn btn-sm btn-primary' href='#'" &
"onclick= \"return confirm('Would you like to have a survey sent to the listed Project Manager? If Yes - click Submit, else Cancel to omit a Survey link from being sent')" & 
"?window.location.replace('" & $sendWithSurvey & "&rdr=" & URLEncode($rdr) & "'):" & 
"window.location.replace('" & $sendWithoutSurvey & "&rdr=" & URLEncode($rdr) & "');\"" &
">COMPLETE</a>"
  1. Once the field has been saved, the result will be a button that, when pushed, will ask whether or not a survey should be sent. If you select ‘ok’, both the ‘Complete’ and ‘Send as Survey’ buttons will be checked. If ‘cancel’ is selected, only the ‘Complete’ checkbox will be checked.

To test Adding JavaScript to a ‘Formula Rich-Text’ Field live in Quickbase click here:

https://quandarycg.quickbase.com//db/bn22wn4cx?a=dr&rid=9

To learn more about JavaScript to Formula-URL fields click here


Copyright ©2020 - Quandary Consulting Group