Problem getting HTML to render in custom component

  • 1
  • Problem
  • Updated 4 years ago
  • Solved
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);
Photo of Robert Mruczek

Robert Mruczek

  • 222 Points 100 badge 2x thumb

Posted 4 years ago

  • 1
Photo of Ben Hubbard

Ben Hubbard, Employee

  • 12,490 Points 10k badge 2x thumb
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.
Photo of Robert Mruczek

Robert Mruczek

  • 222 Points 100 badge 2x thumb
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.
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
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 = $('<div>').html('hello world') 
.appendTo(self); 

Hope this helps!