custom component rebuildProps error?

  • 1
  • Question
  • Updated 3 years ago
  • Answered
So, I have a boolean property on a custom component, and when that is selected, I want to remove almost all of the other properties. I've accomplished that by conditionally using .splice() on the basicPropsList array. I've set the property's onChange function to rebuildProps. When I check the box, the remaining properties are removed. When I uncheck it, they are not added back again. I was expecting that rebuildProps() would re-run the propertiesRenderer in its entirety. Is that incorrect?

Here's my code:
propertiesRenderer: function (propertiesObj,component) {			propertiesObj.setTitle("Signature Component Properties");
var state = component.state;
var propCategories = [];
            // Add basic properties
var basicPropsList = [
{
id: "signaturemodel",
type: "model",
label: "Signature Model",
onChange: function(){
component.rebuildProps();
}
},
                {
                    id: "readonly",
                    type: "boolean",
                    label: "Set Signature to Read only?",
                    location: "attribute",
                    helptext: "Set this to true (check the box) to make the component display a signature that has already been entered, but not allow new a signature to be entered.",
                    onChange: function(){
                        component.rebuildProps();
                    }
                },
                {
                    id: "signaturestyle",
                    type: "picklist",
                    label: "Default Signature Style",
                    location: "attribute",
                    picklistEntries: [
                        {
                            value: 'draw',
                            label: 'Draw (finger/stylus)'
                        },
                        {
                            value: 'type',
                            label: 'Type (keyboard)'
                        }
                    ]
                },
{
id: "defaultnametemplate",
type: "picklist",
modelprop: "signaturemodel",
label: "Default Name",
location: "attribute",
                    picklistEntries: [
                        {
                            value: '{{{$User.name}}}',
                            label: 'User Name'
                        },
                        {
                            value: '{{{$Model.' + state.attr('patientmodel') + '.data.0.Name}}}',
                            label: 'Patient Name'
                        },
                        {
                            value: 'Custom',
                            label: 'Custom'
                        }
                    ],
                    onChange: function(){
                        component.rebuildProps();
                    }
}
            ];
            // "Conditionally Render" dependent properties
            var defaultNameTemplate = state.attr('defaultnametemplate');
            if (defaultNameTemplate) {
                if (defaultNameTemplate.indexOf('Model') >= 0) {
                    basicPropsList.push({
                        id: "patientmodel",
                        type: "model",
                        label: "Patient Model",
                        location: "attribute"
                    });
                } else if (defaultNameTemplate.indexOf('Custom') >= 0) {
                    basicPropsList.push({
                        id: "customdefaultname",
                        type: "template",
                        modelprop: "signaturemodel",
                        label: "Custom Default Name",
                        helptext: "Accepts global merge syntax, i.e. {{{$User.name}}} or {{{$Model.PatientCase.data.0.Patient__r.Name}}}.",
                        location: "attribute"
                    });
                }
            }
            // Remove unnecessary props if readonly is true
            if (state.attr('readonly')) basicPropsList.splice(2,basicPropsList.length);
            //Create categories
propCategories.push({
name: "Basic",
props: basicPropsList,
});
if(skuid.mobile) propCategories.push({ name : "Remove", props : [{ type : "remove" }] });
propertiesObj.applyPropsWithCategories(propCategories,state);
}
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb

Posted 3 years ago

  • 1
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
I think I discovered my problem: the boolean property returns a string with "true" or "false", not just a true or false value.

My conditional statement if (state.attr('readonly')) was getting "false" and since that is a real string, it was returning true.

Nothing wrong with rebuildProps, just a javascript error on my part. I changed the conditional to 
if (state.attr('readonly') === "true") and it's working fine.
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
YAY!  Thanks for letting us know you had fixed it.