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.
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);
},