Custom Component - Conditionally render builder properties?

What is the best way to conditionally render properties in the builder for a custom component based on the values of other properties?

Should I just wrap an if statement around the property and push it into the basicPropsList?

If so, do I need the onChange function of the 'parent' property to be rebuildProps(), or is refresh() sufficient?

My propertiesRenderer is below. Based on the value of the defaultnametemplate property, I may need to render the patientmodel or the customdefaultname properties.

propertiesRenderer: function (propertiesObj,component) {			propertiesObj.setTitle("Signature Component Properties");
var state = component.state;
var propCategories = [];
            var signatureTypeMeta = skuid.$M('SignatureTypePicklistEntries').getField('Signature_Type__c');
var basicPropsList = [
{
id: "signaturemodel",
type: "model",
label: "Signature Model",
onChange: function(){
component.rebuildProps();
}
},
{
id: "signaturetype",
type: "picklist",
                    label: "Signature Type",
                    helptext: "Will create or update a condition on the model to set the Signature Type.",
                    picklistEntries: signatureTypeMeta.picklistEntries,
                    onChange: function(){
                            component.refresh();
                    }
},
{
id: "defaultnametemplate",
type: "picklist",
modelprop: "signaturemodel",
label: "Default Name",
location: "attribute",
                    picklistEntries: [
                        {
                            value: '{{{$User.name}}}',
                            label: 'User Name'
                        },
                        {
                            value: '{{{$Model.' + 'patientmodel' + '.data.0.Name}}}',
                            label: 'Patient Name'
                        },
                        {
                            value: 'Custom',
                            label: 'Custom'
                        }
                    ],
                    onChange: function(){
                        component.refresh();
                    }
},
                {
                    id: "customdefaultname",
                    type: "template",
                    modelprop: "signaturemodel",
                    label: "Custom Default Name",
                    helptext: "Accepts global merge syntax, i.e. {{$User.name}} or {{$Model.Patient.data.0.Name}}.",
                    location: "attribute"
                },
                {
                    id: "patientmodel",
                    type: "model",
                    label: "Patient Model",
                    onChange: function(){
                        component.rebuildProps();
                    }
                }
];
propCategories.push({
name: "Basic",
props: basicPropsList,
});
if(skuid.mobile) propCategories.push({ name : "Remove", props : [{ type : "remove" }] });
propertiesObj.applyPropsWithCategories(propCategories,state);
},

Matt Sones, Champion

31,702 Points

Posted 4 years ago

4 years ago

Zach McElrath, Employee

49,740 Points

Wrapping the addition of props into your propsList array with an if/else is the best way to "conditionally render" builder properties at present.

Here's what rebuildProps() and refresh() do, in a nutshell:

rebuildProps() - reruns your propertiesRenderer() function in context of your component
refresh() - reruns your componentRenderer() function in context of your component

So if you just want to change which props are displayed, but don't need to update your Component's Builder UI (as defined by componentRenderer) then you don't need to call refresh().

Comment

4 years ago

Matt Sones, Champion

31,702 Points

Sweet. Thanks for the prompt response and explanation!

Comment