Forum Discussion

Joseph Ackerman's avatar
Joseph Ackerman
Iron Contributor
Jun 07, 2017

PropertyPaneCheckbox default state issue

When creating a check box in the property pane for my web part, I am setting the 'checked' property to 'true':   But when I run the web part in the SPO workbench and examine the property pane...
Joseph Ackerman's avatar
Joseph Ackerman
Iron Contributor
Jun 08, 2017

While no one seems to know why this isn't working, I found a workaround for my particular situation.  Since I am using the onPropertyPaneConfigurationStart() method to fill the items into the pulldown menu of list names, I put an extra line of code in that method that sets the property to "true" before I call this.context.propertyPane.refresh().

 
    //--- enable the menu
    this.listsDropdownDisabled = false;
    this.properties.filterHidden = true;

    //--- re-render the property pane to show the menu with items
    this.context.propertyPane.refresh();
 
Since I know that this method contains code that will only execute if the length of the list of items is 0, I know that it will only set to "true" the first time the property pane is opened by the user.
 
While this fixes my problem for this web part, the problem of the default value set in the code not being reflected in the UI remains.  Ultimately this needs to be addressed.
  • Kaboodle_Colin's avatar
    Kaboodle_Colin
    Copper Contributor
    Apr 30, 2020

    Joseph Ackerman  Nearly 3 years on and I don't think this issue has been resolved as it (or something very like it) occurred for me today.  I was expecting the checkbox to be checked based on the default property value set in the manifest.json file but it seems that this default value is not picked up on first load.  This is not a problem if you want the control to be unchecked by default but it is an issue if you want it the other way round.

     

    The way I solved it was to set the default value as true in the onInit override.

     protected onInit(): Promise<void> {
   return super.onInit().then(_ => { 
     this.properties.my_bool_property = true;       
   });
}
     
    Still, I think it is a bug and totally agree that it should be fixed.

Resources