I am creating an SPFX React project that will display a field from a SharePoint list in a web part
A user opens the property pane and:
- selects a list
- selects the item ID from that list
- selects the column of the content they would like to display in the web part
I have successfully created the drop downs in the property pane for selecting a list, item ID and column in the .ts file.
groups: [
{
groupName: strings.BasicGroupName,
groupFields: [
PropertyFieldListPicker("listId", {
label: "Select a list",
selectedList: this.properties.listId,
includeHidden: false,
orderBy: PropertyFieldListPickerOrderBy.Title,
disabled: false,
onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
properties: this.properties,
context: this.context,
onGetErrorMessage: null,
deferredValidationTime: 0,
key: "listPickerFieldId",
}),
PropertyPaneDropdown("itemId", {
label: "Select ID of item to display",
options: this.dropdownOptions,
disabled: this.columnsDropdownDisabled,
}),
PropertyPaneDropdown("columnTitle", {
label: "Select field to display",
options: this.listColumns,
disabled: this.columnsDropdownDisabled,
}),
],
},
],
The above works as expected and I am able to display the itemId and column title in the web part so I know the values are passing from the .tx to the .tsx file
this is the render method in the .tsx file
public render(): React.ReactElement<IDisplayItemFieldProps> {
return (
<div className={styles.displayItemField}>
<div className={styles.container}>
<div className={`ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}`}>
<div className="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">
<p className="ms-font-l ms-fontColor-white">Item ID selected : {escape(this.props.itemId)}</p>
<p className="ms-font-l ms-fontColor-white">Column selected : {escape(this.props.columnTitle)}</p>
</div>
</div>
</div>
</div>
);
The issue I have is how do I capture and store the content from the column for the item selected and display it in the web part.
I presume I need to make an HTML call (with a URL like below) but unsure how/where to put this, and how to store the HTML response in the .tsx file to use it in the public render() section.
this.context.pageContext.web.absoluteUrl + `/_api/Web/Lists/GetById(guid'` + this.properties.listId + `')/items(` + this.properties.itemId + `)?$select=,` + this.properties.columnTitle
The displayed field content also needs to be able to be automatically updated if a user changes the drop downs in the property pane.
I have been looking at the ReactAccordian SPFX project and that displays it correctly (with formatting and images retained) using the following in the .tsx public render() section. This is what I m trying to achieve
dangerouslySetInnerHTML={{
__html: item[this.props.accordianContentColumn],
}}
Any help would be greatly appreciated
columnTitle
property pane dropdown. Once you get the results, store it in reactthis.state
which you can refer inrender()
method. This way, whenever you change the column title, it will change the react state & update the rendering.