1

In the thinking of rebuilding Highlighted content properties, I have created button that add fields in the property pane but now I would like to know how to store the value of these fields and how to access these values.

I have created an array in wich one I push PropertyPaneDropdown when I click "AddButton". Each PropertyPaneDropDown have its own property because I use variable that I increment. My problem is that these property doesn't exist in the webartProps Interface.

private buttonAdd(tab, tabID): any {  
let nameID;
if(tab == this.dynamicTypes){
  nameID = "DT";
}
let ind = tab.length;
if(ind == 1){
  tab.push(PropertyPaneButton('deleteButton'+nameID+"0", {
    text: 'Delete',
    buttonType: PropertyPaneButtonType.Hero,
    icon: 'Delete',
    onClick: this.buttonDelete.bind(this,nameID+"0")
  }));
}
tab.push(PropertyPaneDropdown(nameID+(tabID++), {
  label: 'Type',
  options: [
    { key: 'Documents', text: 'Documents'},
    { key: 'Pages', text: 'Pages'},
    { key: 'News', text: 'News'},
    { key: 'Videos', text: 'Videos'},
    { key: 'Images', text: 'Images'},
    { key: 'Events', text: 'Events'},
    { key: 'Issues', text: 'Issues'},
    { key: 'Tasks', text: 'Tasks'},
    { key: 'Links', text: 'Links'},
    { key: 'Contacts', text: 'Contacts'},
    { key: 'All', text: 'All'}
  ],
  selectedKey: 'Documents'
}),
PropertyPaneButton('deleteButton'+nameID+(tabID-1), {
  text: 'Delete',
  buttonType: PropertyPaneButtonType.Hero,
  icon: 'Delete',
  onClick: this.buttonDelete.bind(this,nameID+(tabID-1), tab)
})
);
console.log(tab);
this.context.propertyPane.refresh();

}

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {

let dynamicProps: any;


let source :any;

if(this.properties.typeOfContent){
  source = PropertyPaneDropdown('source', {
    label: 'Source',
    options: [
      { key: 'This site', text: 'This site'},
      { key: 'A document library on this site', text: 'A document library on this site'},
      { key: 'This site collection', text: 'This site collection'},
      { key: 'Select sites', text: 'Select sites'},
      { key: 'All sites', text: 'All sites'}
    ],
    selectedKey: 'This site'
  });

  let addTypeButton = PropertyPaneButton('addButton',{
    text: 'Add content type',
    buttonType: PropertyPaneButtonType.Hero,
    icon: 'Add',
    onClick: this.buttonAdd.bind(this, this.dynamicTypes, this.dynamicTypeID)
  });

  let addDocumentButton = PropertyPaneButton('addButton',{
    text: 'Add document type',
    buttonType: PropertyPaneButtonType.Hero,
    icon: 'Add',
    onClick: this.buttonAdd.bind(this, this.dynamicDocuments, this.dynamicDocumentID)
  })

  switch(this.properties.source){
    case "This site":
      dynamicProps = this.dynamicTypes.concat(addTypeButton);
      break;
    case "A document library on this site":
      dynamicProps = PropertyPaneDropdown('documentLibrary', {
        label: 'Document library',
        options: [
          { key: 'Documents', text: 'Documents'},
          { key: 'Documents Publics', text: 'Documents Publics'},
          { key: 'From Templates', text: 'From Templates'},
          { key: 'Reporting Templates', text: 'Reporting Templates'},
          { key: 'Search Config List', text: 'Search Config List'},
          { key: 'Site Assets', text: 'Site Assets'},
          { key: 'Site Collection Documents', text: 'Site Collection Documents'},
          { key: 'Style Library', text: 'Style Library'},
        ],
        selectedKey: 'Documents'
      });
      dynamicProps = dynamicProps.concat(this.dynamicDocuments).concat(addTypeButton);
      break;
    case "This site collection":
      dynamicProps = this.dynamicTypes.concat(addTypeButton);
      break;
    case "Select sites":
      dynamicProps = this.dynamicTypes.concat(addTypeButton);
      break;
    case "All sites":
      dynamicProps = this.dynamicTypes.concat(addTypeButton);
      break;
  }
}
else{
  source  = PropertyPaneLabel('emptyLabel', {
    text: ""
  });
  dynamicProps = []
}




return {
  pages: [
    {
      header: {
        description: "Parameters"
      },
      displayGroupsAsAccordion: true,
      groups: [
        {
          groupName: "Content",
          groupFields:[
            PropertyPaneToggle('typeOfContent', {
              label: 'Type of Content',
              onText: 'SharePoint Lists',
              offText: 'Raw Images'
            }),
            source
          ].concat(dynamicProps)
        },
        {
          groupName: "Filters",
          groupFields:[

          ]
        }
      ]
    }
  ]
};

Here some of my code to show you how I though it. I'm kind of stuck on that so it would be so helpfull to have some help. Best regards

1

Normally, every PropertyPane contructor takes as first parameter the variable it will use to store the data.

So your this.properties object should contain any of the variables you declared. I'm not sure if you actually said and tested this object ?

  • Hello, my problem is, as these variables are dynamically created, I can't access them via this.properties because they are not declared in the Props interface – Aurélien Plantard Jun 1 '18 at 9:01
  • If this is only a TypeScript issue, you can access any property doing this.properties["my-dynamic-property"] to at least test if the property is there – Abner Peter Jun 1 '18 at 12:53
  • It's perfectly working with this syntax this.properties["my-dynamic-property"] Thank you very much really – Aurélien Plantard Jun 4 '18 at 15:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.