Custom Component Builder Properties do not render on page refresh

  • 1
  • Problem
  • Updated 3 years ago
  • Solved
My issue may be simple, but I cannot find a solution: The properties of my custom component renders property when I first drop it on the page.  However, when I refresh the page or return from the XML view, I get the message: "no component/properties renderer is available for this component.

What am I missing?  Thanks for your help.  My code is below:  

here is my current code:
(function($) { skuid.builder.core.registerBuilder(new skuid.builder.core.Builder({
id: "CustomButton__button",
name: "Custom Button",
icon: "sk-icon-contact",
description: "Button for custom functionality",
componentRenderer: function(component) {
component.setTitle(component.builder.name);
component.body.html(
"<div class='hello-content'>Button Label is: " + component.state.attr("label") + "!</div>"
);
},
mobileRenderer: function(component) {
component.setTitle(component.builder.name);
component.body.html(
"<div class='hello-content'>Button Label is: " + component.state.attr("label") + "!</div>"
);
},
propertiesRenderer: function (propertiesObj,component) {

// is this the right place to do this?
/*var modelsArray = []; 
skuid.$.each(skuid.model.list(), function(idx, val) {
modelsArray.push( { 
'value': val,
'label': val
});
});
debugger;
*/

// end question


propertiesObj.setTitle("Button Component Properties");
var state = component.state;
var propCategories = [];
var propsList = [
{
id: "label",
type: "string",
label: "Enter button label: ",
helptext: "this is the information that is shown on the button",
onChange: function(){
//component.refresh();
component.rebuildProps();
}
},
{
id: "buttonID",
type: "string",
label: "Unique ID: ",
helptext: "this is the ID for the button",
onChange: function(){
component.refresh();
}
},
{
id: "buttonState",
type: "picklist",
label: "Select Default State: ",
helptext: "Choose the default view state of the button.",
picklistEntries: [
{ value: 'show', label: 'Show' },
{ value: 'hide', label: 'Hide' }
],
onChange: function(){
component.refresh();
}
},
{
id: "primaryModel",
type: "string",
label: "Primary sObject Type: ",
helptext: "Indicate the model that controls button state.",
onChange: function(){
component.refresh();
}
},
{
id: "buttonType",
type: "picklist",
label: "Select Button Type: ",
helptext: "Choose the default view state of the button.",
picklistEntries: [
{ value: 'cancel', label: 'Cancel' },
{ value: 'edit', label: 'Edit' },
{ value: 'save', label: 'Save' }
],
onChange: function(){
component.refresh();
}
}
];
propCategories.push({
name: "",
props: propsList,
});
if(skuid.mobile) propCategories.push({ name : "Remove", props : [{ type : "remove" }] });
propertiesObj.applyPropsWithCategories(propCategories,state);
},
defaultStateGenerator : function() {
return skuid.utils.makeXMLDoc("<CustomButton__button label='Enter Button Label' btnID='' btnState='Show' primaryModel='' buttonType='Edit' />");
}
}));
})(skuid);
Photo of Neville O'Meally

Neville O'Meally

  • 120 Points 100 badge 2x thumb

Posted 3 years ago

  • 1
Photo of Neville O'Meally

Neville O'Meally

  • 120 Points 100 badge 2x thumb
Got It!.  

Maybe I missed the tutorial on naming convention for skuid components!  The solution is to use all lowercase letters.  Notice the ID in the code above is: CustomButton__button.  

One of the guys on my team noticed that Skuid was returning lower case letters; changing everything to lower case resolves the rendering (custombutton__button).  

Thanks.
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
I'll pass your findings on to our documentation team and ask them to ensure they are clearly spelled out in the doc.   Thanks.