Skip to main content

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(

"

Button Label is: " + component.state.attr(“label”) + “!


);

},

mobileRenderer: function(component) {

component.setTitle(component.builder.name);

component.body.html(

"
Button Label is: " + component.state.attr(“label”) + “!


);

},

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: c

{ 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 : h{ 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);

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.


I’ll pass your findings on to our documentation team and ask them to ensure they are clearly spelled out in the doc.   Thanks. 


Reply