custom component rebuildProps error?

Matt SonesMatt Sones 💎💎💎
edited February 10, 2017 in Questions
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);
}

Comments

  • Matt SonesMatt Sones 💎💎💎
    edited February 10, 2017
    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.
  • Rob HatchRob Hatch 💎💎💎
    edited September 1, 2016
    YAY!  Thanks for letting us know you had fixed it.  
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!