Add CSS or JavaScript to Builder, Viewer, Mobile

Owned by Jason Briggs (Unlicensed)

Last updated: Jan 19, 2021 by Kimberly Cruz (Unlicensed)

2 min read

These new APIs allows you to enable FIN to automatically add custom CSS or JSS libraries into the Graphics Viewer or the Graphics Builder.

Works with Viewer, Builder, and Stack Mobile UI

builderSettings tag will add the JS or CSS to the graphics builder app. These could be helper functions that extend the graphics builder.
viewerSettings tag on a function will add JS or CSS to the Viewer every time it's loaded.
stackMobileSettings will add JS and CSS to everything in the /fin/demo stack mobile UI. Stack Mobile is the UI that gets loaded when viewing FIN on a mobile device.

Instructions

1. First create a function, that returns a list, and in the list to variables styles or scripts, which is then a list of strings.

() => do
  {styles:["https://cdnjs.cloudflare.com/ajax/libs/d3/4.8.0/d3.min.css",
          "/finPod/finGraphicResourcesExt/res/lodash.css"
          ],
   scripts:["https://cdnjs.cloudflare.com/ajax/libs/d3/4.8.0/d3.min.js"]       
  }
end

2. Then add the following marker tags to the function called builderSettings and viewerSettings .

An optional marker tag called stackMobileSettings can be added as well

Note

Be careful when using this, as the css or js will be added every time the builder is loaded , or every time the viewer is loaded.
The graphics viewer is an iFrame inside of the Stack Mobile UI, so the css will not conflict with the stackMobile UI.