Skip to main content
Nintex Community Menu Bar
Question

Custom Component Builder Properties do not render on page refresh

  • July 9, 2024
  • 2 replies
  • 0 views
  • Translate

Forum|alt.badge.img+2

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

Did this topic help you find an answer to your question?

2 replies

Forum|alt.badge.img+2

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.

Translate

Forum|alt.badge.img+17
  • Nintex Employee
  • 3763 replies
  • July 9, 2024

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

Translate

Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie Settings