Forum Discussion

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

SPFx: How to reference property pane controls (not their values) in code?

this.properties.<propertyname> returns me the value of the property, not the control used to set the value of the property.  In .Net I use the Controls collection to find the control I want and then manipulate it according to my needs.  There doesn't seem to be any equivalent to the Controls collection in a SPFx web part.
 
Sorry if this seems like a naive question, but how do I get access to the control itself so that I can set this property in code?  Specifically, I'd like to set the default selected item in a pulldown menu of the property pane before it displays.

4 Replies

  • kath patterson's avatar
    kath patterson
    Iron Contributor
    Aug 16, 2017
    script is a very different world to dot net objects and the idea of a controls collection does not really apply.
    the property pane is just a bunch of DOM input fields with their own clever little scripts creating the behaviours. They do not collectively belong to a base class that allows them to be seen as a collection. the framework has to do the heavy lifting to expose the values and simplify any other visibility. if you want to manipulate the data then you need to create a custom control for the pane which includes your manipulation. there is a good PnP video on custom property pane. then you can just output the final property value as normal as it is already manipulated and processed by your pane control. hope that helps and I haven't totally misunderstood things. still learning this stuff.
    • Joseph Ackerman's avatar
      Joseph Ackerman
      Iron Contributor
      Aug 22, 2017

      kath patterson,

       

      Thanks for the response.

       

      script is a very different world to dot net objects and the idea of a controls collection does not really apply.
      the property pane is just a bunch of DOM input fields with their own clever little scripts creating the behaviours. 

      Then the framework should be preserving those input fields somewhere so they can continue to be of use to the developer.  Sorry, but "this.properties.<propertyname>" sure looks like a properties collection to me , since each property is accessed via the this.properties.  I know it's not a "collection" in the true .Net sense (it's an object, right?), but when I define stuff in the property pane via the various PropertyPaneWhatever() functions, the framework is creating a visual represntation of what I asked for.  I ask for a text box, and it gives me a text box.  I just want to know how to reference the textbox that it has created for me later on in my code.  If they are going to all the trouble to build it, it's silly that it just becomes inaccessible the moment it is displayed.

       

      I admit that it may require siginificant additional "heavy lifting" on the part of the SPFx development team to make it work like that, but if they are trying to get long-time SP devs to commit to this brave new world they are building, stuff like this is going to be important.

  • Joseph Ackerman's avatar
    Joseph Ackerman
    Iron Contributor
    Jul 26, 2017

    *bump*

     

    Does no on know how to do this (6 weeks and counting...)?  I need to implement some interactivity in my property pane (example: enable/disable email to, subject and body text controls if the "use email" checkbox state is "checked" or "unchecked").

     

    Can this be done?

     

    How do I reference the controls?  How do I attach event procedures such as "onClick" and "onSelectionChanged" or "onStateChanged"?

     

    Anyone?  Bueller? ;-)

Resources