JS location for Custom Component

Hi there,

I have a bit of a noob question. I am trying to create a custom skuid component for a “pill” gauge. Here’s a static view of the “pill” in fiddle, https://jsfiddle.net/c5gwk6jh/7/. I registered the component in runtime.js as prosvisualizations__scoregauge. Right now, I am executing the javascript on the visual force page inside a and it renders okay. I want to associate this javascript with the component such that when you include the component the javascript is automatically included… (I’m thinking like a lightning component or an angularJS directive). I tried to add a skuid IIFE in the static resource tied to onload. I also tried to create the javascript in the UI from the page editor. Both to no avail. I don’t think I got the syntax exactly right, didn’t include the namespace correctly, package prefix correctly, or something related to the glueware.

It is probably a simple answer so any help in associating javascript to custom component is most appreciated. Or if my approach is wrong, then any guidance from that regard would be much appreciated, as well.


Ha!  I found the answer in another post soon after posting my question.  I was able to move my javascript from the vfPage to runtime.js via the pageload function (see below).  Now I need to tie the component to the skuid data model.  That should be fun.

(function(skuid){    var $ = skuid.$;
    // Register a snippet to run
        var c = document.getElementById(“myCanvas”);
        var ctx = c.getContext(“2d”);

        // Draw the pill gauge
        ctx.moveTo(95, 140);
        ctx.lineTo(250, 140);
        ctx.quadraticCurveTo(290, 140, 290, 170);
        ctx.lineTo(290, 170);
        ctx.quadraticCurveTo(290, 210, 250, 210);
        ctx.lineTo(95, 210);
        ctx.quadraticCurveTo(55, 210, 55, 180);
        ctx.lineTo(55, 170);
        ctx.quadraticCurveTo(55, 140, 95, 140);
        ctx.lineWidth = 3;
        ctx.strokeStyle = ‘#73B9E6’;
        ctx.fillStyle = “#F7F7F7”;

        // Fill the pill gauge with proposed revenue
        ctx.moveTo(95, 140);
        ctx.lineTo(120, 140);
        ctx.quadraticCurveTo(155, 140, 155, 170);
        ctx.lineTo(155, 180);
        ctx.quadraticCurveTo(155, 210, 115, 210);
        ctx.lineTo(95, 210);
        ctx.quadraticCurveTo(55, 210, 55, 180);
        ctx.lineTo(55, 170);
        ctx.quadraticCurveTo(55, 140, 95, 140);
        ctx.fillStyle = “#73B9E6”;

        // Draw target revenue line
        ctx.strokeStyle = ‘black’;
        ctx.moveTo(185, 140);
        ctx.lineTo(185, 220);

        // Display dollar figures
        ctx.fillStyle = ‘black’;
        ctx.font = ‘10pt Calibri’;
        ctx.fillText(‘Current Revenue’, 60, 115);
        ctx.fillText(’$102,495.22’, 60, 130);
        ctx.fillText(‘Presc Revenue’, 200, 115);
        ctx.fillText(’$204,990.44’, 210, 130);
        ctx.font = ‘11pt Calibri’;
        ctx.fillText(‘Proposed Revenue’, 130, 170);
        ctx.fillText(‘Tgt Revenue’, 170, 232);
        ctx.font = ‘bold 12pt Calibri’;
        ctx.fillText(’$144,315.94’, 143, 187);
        ctx.fillText(’$153,742.88’, 160, 248);
    // Run the snippet initially on page load

Hi Jason,

You may want to look at Skuid Model Actions as an option to refresh the gauge whenever the model changes:



My component is now tied to the skuid data model and updating on model change events.  This post had the recipe, https://community.skuidify.com/skuid/topics/trigger-custom-component-on-data-model-update which is also in that doc link you sent.  Thanks Irvin.  My component is almost as cool as the ones that come out of the box with Skuid!  Now the fun part…I am going to add some cool animation transitions…