Skip to main content

Hello, I am following the Map Component tutorial to create my own custom component in Skuid. I can get HTML to render in the Builder just fine, but for some reason this HTML is not rendering on the Skuid page to which I added the custom component. I am also not seeing the Header or the Save/Cancel sections, even though I set the flags to ‘true’ on the editor. I am using the code below for the custom component. Is there something I’ve left out, or have I done something wrong in the self.draw method? Thanks. (function(skuid) { var $ = skuid.$; // Register a new Skuid Component Type skuid.componentType.register(‘spdocumentviewer’, function(domElement, xmlConfig) { // Establish a shorthand for the DOM element we will be building to, // (actually a jQuery object wrapper around that domElement) var self = domElement; // Get the name of the model we want to work with from our component definition, // as well as the Latitude and Longitude fields we want to work with. var modelName = xmlConfig.attr(‘model’); // If we do not have ALL of the first attributes, // then display an error in our domElement. // or save/cancel buttons self.editor = new skuid.ui.Editor(self, { showHeader: true, showSaveCancel: true }); // Register that we will be editing the specified Model. self.editor.registerModel(self.model); // Define the draw function, // which we will use for drawing our entire self.draw = function() { var div = $(‘’).html(‘hello world’) .appendTo(self); }; // Define how we will handle successful ‘saves’ to our model self.editor.handleSave = function(modelHasChanged) { self.draw(); }; // Define how we will handle successful ‘refreshes’ to our model self.editor.handleDataRefresh = function() { self.draw(); }; self.css(‘min-height’, ‘300px’); self.draw(); }); })(skuid);

Hi Robert,

Do you know if any of your component code is running at all?  A quick test of that would be to put an alert(‘test’) at the top of your code and see if that gets run.  

My best guess for what is going on is that your page isn’t loading in the code for your component.  You can manually load in the javascript you need by loading that static resource as a Javascript resource.  The other option is to give your page the same module as your component.  You can set a page’s module by clicking on the page component in the builder and setting that property.

Let me know how it goes.

Hello Robert -


In addition to what Ben suggested, there are a couple of issues with the code itself that would result in potential javascript errors occuring and also no output displayed.


One thing to check is the console output in the browser and see if there are errors displayed there.


I’m assuming you might have removed some code from your OP for brevity, however as is exists in the post, I would expect you are encountering some issues.


Try the following:



  1. After the line - After doing this you should start to see editor buttons

    var modelName = xmlConfig.attr(‘model’);

    add the line

    self.model = skuid.model.getModel(modelName);




  2. Modify the line - After doing this, you should see the hello world text

    var div = $(‘’).html(‘hello world’)

    .appendTo(self);

    to

    var div = $(‘


    ’).html(‘hello world’)

    .appendTo(self);




Hope this helps!

Ben, loading the code inline as a Javascript resource did the trick. I may have done something wrong uploading it as a static resource – not sure. I think this wlil work for now. I’ll revisit the static resource option at a later date. Thanks very much for your quick reply.

Reply


View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings