There was a problem rendering a component of type skuidpage: jSignature is unable to find import plugin with for format 'null'

  • 1
  • Problem
  • Updated 6 months ago
  • In Progress
I have some custom template components that rely on a javascript library I have loaded as a static resource.  These components were functioning fine before the Milau updates, but now only one of the components is no longer rendering.  Both of these components have almost identical javascript, so I'm not sure what's causing the issue.  See picture below:

var element = arguments[0],
   $ = skuid.$;

$(document.body).one("pageload",function() {
    // init signature canvas
    element.jSignature(); // error on this line, but only for one template
});

Photo of Eulogio Gallo

Eulogio Gallo

  • 1,874 Points 1k badge 2x thumb
  • frustrated

Posted 7 months ago

  • 1
Photo of Conlan O'Rourke

Conlan O'Rourke

  • 3,280 Points 3k badge 2x thumb
Eulogio, it might be helpful for the community to post this on the original thread here so that the original developer of that solution (Peter) as well as everyone else who has contributed to it can see your issue.

I would also suggest posting the full javascript for each of the in-line signature components. If one of the signature components is rendering, but not the other it's likely something with the JS. Each signature component has a unique id associated with it, right?

Lastly, are you running in Lightning or SF Classic? Lightning requires page support files for any in-line resources: https://docs.skuid.com/latest/en/skuid/deploy/salesforce/lightning/index.html?highlight=lockerservic...
Photo of Eulogio Gallo

Eulogio Gallo

  • 1,874 Points 1k badge 2x thumb
Hi Conlan,

Thanks for the reply, wasn't sure if this issue was necessarily involved with the original thread aside from using jSignature.

The javascript I posted above is pretty much exactly what is being used for both components. Only difference are some model operations that are being done, but that's not really relevant to the issue.

I'm also running SF Classic. Again, these signature components were working fine until the Milau update, so this makes me suspect that there was an update to the way resources are being loaded and that's causing this issue.

Hope this info helps!


Thanks!
Eulogio
Photo of Bill McCullough

Bill McCullough, Champion

  • 12,436 Points 10k badge 2x thumb
Eulogio,

Maybe try regenerating the page support file:  Page Builder->More Page Actions
->Generate Support File.  I think the Millau update handles this for you, but it doesn't hurt to see if it fixes your issue.

What is your setup on the page?  Are you using 2 Inline Components?  Do they have different Id's?

Thanks,

Bill
Photo of Bill McCullough

Bill McCullough, Champion

  • 12,436 Points 10k badge 2x thumb
Eulogio,

I just tried the sample page from the original posting in my Developer org (on Skuid 11.1.11).  I added 2 inline components (signature blocks).  It seems to be working.  I have attached it here.  It does require a static resource to the 'no conflict' version of jSignature (jSignature.min.noconflict.js).

Maybe there is something in your XML that is causing an issue?  Did you copy your xml to create the second inline component?  Maybe re-add the component using the page builder.

I have seen instances where I have copied xml to add a component on a page and inadvertently typed an extra character.  After upgrading, this character caused problems until it was found or we rebuilt the component.

Thanks,

Bill



<skuidpage showsidebar="true" showheader="true" personalizationmode="server">
   <models>
      <model id="Signer" limit="100" query="true" createrowifnonefound="false" sobject="Contact" datasource="salesforce">
         <fields>
            <field id="Id"/>
            <field id="Name"/>
            
         </fields>
         <conditions>
            <condition type="param" value="id" field="Id" operator="=" enclosevalueinquotes="true" novaluebehavior="noquery"/>
         </conditions>
      <actions/>
</model>
   </models>
   <components>
      <pagetitle model="Signer" uniqueid="sk-s4L-202">
         <maintitle>
            <template>{{Name}}</template>
         </maintitle>
         <subtitle>{{Model.label}} Signature Demo</subtitle>
         <actions>
            <action type="custom" label="Clear signature" window="self" snippet="clearSignature" icon="sk-icon-cancel" uniqueid="sk-s4L-197"/>
            <action type="custom" label="Save signature" window="self" snippet="saveSignature" icon="sk-icon-save" uniqueid="sk-s4L-200"/>
         </actions>
      </pagetitle>
<grid uniqueid="sk-s4L-294" columngutter="10px">
    <divisions>
        <division behavior="flex" minwidth="100px" ratio="1">
            <components>
                <wrapper uniqueid="sk-s4L-542">
                    <components>
                        <custom name="Sign" uniqueid="idSign"/>
                    </components>
                    <styles>
                        <styleitem type="background" bgtype="color">
                            <styles>
                                <styleitem property="background-color" value="#eee"/>
                            </styles>
                        </styleitem>
                        <styleitem type="border"/>
                        <styleitem type="size"/>
                    </styles>
                </wrapper>
            </components>
        </division>
        <division behavior="flex" verticalalign="top" minwidth="100px" ratio="1">
            <components>
                <wrapper uniqueid="sk-s4L-555">
                    <components>
                        <custom name="Sign" uniqueid="sk-s4L-511"/>
                    </components>
                    <styles>
                        <styleitem type="background" bgtype="color">
                            <styles>
                                <styleitem property="background-color" value="#eee"/>
                            </styles>
                        </styleitem>
                        <styleitem type="border"/>
                        <styleitem type="size"/>
                    </styles>
                </wrapper>
            </components>
        </division>
    </divisions>
    <styles>
        <styleitem type="background" bgtype="none"/>
    </styles>
</grid>
      
   </components>
   <resources>
      <labels/>
      <javascript>
         <jsitem location="staticresource" name="jSignature" cachelocation="false" url="" content_type="application/javascript">var params = arguments[0],
   $ = skuid.$;
</jsitem>
         <jsitem location="inlinecomponent" name="Sign" cachelocation="false" url="">// JSignature https://github.com/willowsystems/jSignature and 
// SKUID http://www.skuidify.com/home 
// demo for saving drawing of signature in Salesforce
// Peter Baeza - 2014-04-22


var element = arguments[0],
   $ = skuid.$;

$(document).ready(function() {
    // init signature canvas
    element.jSignature();
    element.jSignature("reset");
    
    // // Get existing signature from text field
    // var model = skuid.model.getModel('Signer'),
    //     row = model.getFirstRow(),
    //     sigField = 'Signature__c', 
    //     sigData = model.getFieldValue(row,sigField);
    // if(sigData !== null ) {     // read back Signature data
    //     element.jSignature("setData", "data:" + sigData);
    // }
})</jsitem>
         <jsitem location="inlinesnippet" name="saveSignature" cachelocation="false">var params = arguments[0],
   $ = skuid.$;
   
var model = skuid.model.getModel('Signer'),
    row = model.getFirstRow(),
    sigField = 'Signature__c';   

// get signature from id
var sig = $("#idSign");
var sigData = sig.jSignature("getData", "base30");

// update signature text field SF and save
model.updateRow(row,sigField,sigData[0] + ',' + sigData[1]);
model.save();</jsitem>
         <jsitem location="inlinesnippet" name="clearSignature" cachelocation="false">var params = arguments[0],
   $ = skuid.$;

// get signature canvas and reset   
var sig = $("#idSign");
sig.jSignature("reset");

// get signature field, set to null and save model
// var model = skuid.model.getModel('Signer');
// var row = model.getFirstRow();
// var sigField = 'Signature__c';   
// model.updateRow(row,sigField,null);
// model.save();
</jsitem>
      </javascript>
      <css/>
   <actionsequences/>
</resources>
<styles>
<styleitem type="background" bgtype="none"/>
</styles>
</skuidpage>
Photo of Eulogio Gallo

Eulogio Gallo

  • 1,874 Points 1k badge 2x thumb
Thanks for the reply Bill! I followed your suggestions but didn't really find anything useful. However, I realized that I was focusing on the javascript for the unrendered component instead of looking at the javascript for the rendered one. I had a condition for an undefined variable when I should've been checking for null instead.

I think this had to do with a recent Skuid update: https://docs.skuid.com/v11.0.2/en/release-notes.html#undefined-vs-null-more-friendly-for-old-code

I updated my code and voila it works! I'll need to make sure to review any other apps that could be affected by this.

Thanks again Bill! Hope folks find this thread helpful :-)
(Edited)