Javascript console on Chrome: Newbie trying to get Javascript edits to apply in Quickbase

  • 0
  • 1
  • Question
  • Updated 5 years ago
  • Answered
I've got the Javascript console in Chrome running and I'm able to locate areas to update (starting very simple with updating chart legend titles) and while it works in the console and on the page, when I refresh the page in Quickbase the changes have not saved. I think I'm missing a "fire" or "save" action, any help would be appreciated.

Thanks!!
Photo of Leanne

Leanne

  • 354 Points 250 badge 2x thumb

Posted 5 years ago

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

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,434 Points 20k badge 2x thumb
The role of the JavaScript console is to experiment with executing script against the currently displayed page. You have to enter the script anew each time you want to test your script. The console is used to experiment, probe and debug the current page. Once you get your script working you have to save the script in a user defined page and arrange for the page to be loaded. Typically this is done using the image onload technique.
Photo of Leanne

Leanne

  • 354 Points 250 badge 2x thumb
Hi Dan, thanks for your response. Just a followup question: I would use this technique to update the legend titles within my already created quickbase charts?
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,434 Points 20k badge 2x thumb
The console is for temporary and exploratory changes to the page so you could change the legend but the procedure will get old quick unless you automate it in some way. And you have to do the actual work to isolate how you want to introduce the legend on the chart in the first place which may be the more difficult problem.
Photo of Leanne

Leanne

  • 354 Points 250 badge 2x thumb
I understand that console is temporary but at this point I'm trying to figure out the best (and most simple) way of updating the names in my chart legends permanently. (It blows my mind that this is not a native feature in quickbase similar to the updating the column headings on reports!)

So in the answer you gave to a similar forum question (included below) you said we could always edit the <svg> file after the chart had been created in Quickbase. Do we need to go through the image onboard technique to accomplish this or is there another way to edit and maintain the edits in the <svg> file? Thanks for your help!!

***
QuickBase uses HighCharts for it charting package and HighCharts use <svg> technology. This means that irrespective of the features QuickBase or HighCharts has placed into their integrations or APIs, you can always directly manipulate the final <svg> just as you can manipulate a web page's DOM. So sidestepping QuickBase and HighCharts features, you can change the the charts labels from "3" to "Three" using this JavaScript code:
$("tspan:contains(3)").filter(function(){
  return $(this).text() === "3";
}).html("Three");
Depending on your workflow and needs you can (1) inject this code manually (see before / after screenshots), (2) through a CrossRider extension; or (3) through a script in a containing page that the chart inserted through an <iframe> resides in.
BeforeScreenshot.jpg
AfterScreenshot.jpg
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,434 Points 20k badge 2x thumb
I don't define how QuickBase behaves - I just hack QuckBase to behave the way I want.

You can manually inspect the legend items using Firebug's inspector and then manually come up with selectors to modify individual items:

$("tspan:contains(Old Legend Item)").html("New Legend Item");

This is possible because the <svg> is composed of tags that can be manipulated just as all DOM elements can be manipulated. Yes this is a total hack. If you could get a handle to the HighCharts object you could probably alter the legend through one of their API methods. But QuickBase does not expose HighCharts at this level. Have fun.
Photo of Leanne

Leanne

  • 354 Points 250 badge 2x thumb
Sorry for asking for further explanation but where would I enter those modifiers? This is what I am trying to get at, I can figure out the code, but not where I should be entering it into to affect the charts permanently. Thanks!!
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,434 Points 20k badge 2x thumb
You would have to paste those commands into the console. If you use Firefox there is a tool called Scratchpad that will allow you to save the commands to a scratchpad and rapidly execute them:

http://blog.mozilla.org/devtools/2011/08/15/introducing-scratchpad/

You will not be able to use the image onload technique because that technique requires you to display the [-] field on the page and charts to not directly display raw field values.

Another option would be to use CrossRider to execute script whenever a particular page loads.

http://crossrider.com/developer/main

Another option would be to build the chart yourself using the HighChart API and QuickBase's API.