JS location for Custom Component

  • 1
  • Question
  • Updated 3 years ago
  • Doesn't Need an Answer
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 <script> 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.

Thanks,
jason
Photo of Jason Hammerle

Jason Hammerle

  • 298 Points 250 badge 2x thumb

Posted 3 years ago

  • 1
Photo of Jason Hammerle

Jason Hammerle

  • 298 Points 250 badge 2x thumb
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
    skuid.snippet.registerSnippet('DrawGauge',function(DrawGauge){
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");

        // Draw the pill gauge
        ctx.beginPath();
        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";
        ctx.closePath();
        ctx.fill();
        ctx.stroke();

        // Fill the pill gauge with proposed revenue
        ctx.beginPath();
        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";
        ctx.closePath();
        ctx.fill();
        ctx.stroke();

        // Draw target revenue line
        ctx.beginPath();
        ctx.strokeStyle = 'black';
        ctx.moveTo(185, 140);
        ctx.lineTo(185, 220);
        ctx.stroke();

        // 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
    $('.nx-page').one('pageload',function(){
        skuid.snippet.getSnippet('DrawGauge')();
    });
})(skuid);
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
Hi Jason,

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

http://help.skuidify.com/m/models-conditions-filters/l/102651-everything-you-need-to-know-about-skui....

Regards,
Irvin
Photo of Jason Hammerle

Jason Hammerle

  • 298 Points 250 badge 2x thumb
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..