I have a weird issue. In this one web part, it works when I add it to a page. But it disappears once the page is saved. Additionally, web part properties for the web part also don't persist. Once a page is saved, if I edit the page I get an empty element when I hover over where the web part should be, with the normal ECB of Edit/Delete/Move. Of course, only delete works on this corrupted instance. Also, the pencil doesn't work in the ECB even when the web part is working.
I've done a few things to try and track down where it's failing - with no change in behavior or hints beyond the web part properties also not saving:
- Isolated the web part in to it's own package and bundle
- Isolated the web part to its own test pages
- Tried with and without branding app extension enabled
- Added my own web part property editor to see if I can edit and save properties directly (found that properties are updated inline but not persisted)
- Added a lot of console logging to try and see if how far along the web part is getting after the page is saved
- On save none of the logging is hit
Side note, in console I hid warnings, they're all from O365 core js files (mostly about searchux.strings not being registered and some deprecation warnings)
This is built using SPFX 1.6, and utilizes the DetailsList control from MS Fabric 5.98.0. No errors, or anything, just doesn't seem to want to save. Next step would be to just write my own DetailsList control, which seems a little overkill.
Manifest
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
"id": "b8b9adf6-76c9-4312-8c50-2d855f3bf921",
"alias": "StoreLibraryWebPart",
"componentType": "WebPart",
"version": "*",
"manifestVersion": 2,
"requiresCustomScript": false,
"preconfiguredEntries": [{
"groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
"group": { "default": "Other" },
"title": { "default": "Store Library" },
"description": { "default": "Store Library description" },
"officeFabricIconFontName": "Page",
"properties": {
"description": "ListView",
"filterfield": "StoreCategory",
"filtervalue": "Store Leaders",
"mmsfilterfield":true,
"includechildterms":true
}
}]
}
Interface
export interface IListViewProps {
description:string;
context: WebPartContext;
filterfield:string;
filtervalue:string;
mmsfilterfield:boolean;
includechildterms:boolean;
editmode:boolean;
updateProperty:(value:string,property:string) => void;
}
Initial Render (not even these console.log's get hit): export default class StoreLibraryWebPart extends BaseClientSideWebPart {
public render(): void {
console.log("Loading list view webpart");
let props:IListViewProps = {
context:this.context,
description:this.properties.description,
filtervalue: this.properties.filtervalue,
filterfield: this.properties.filterfield,
mmsfilterfield: this.properties.mmsfilterfield,
includechildterms: this.properties.includechildterms,
editmode:(this.displayMode == DisplayMode.Edit) ? true : false,
updateProperty:(value:string,property:string) => {
this.properties[property] = value;
}
};
console.log("List view props");
console.log(props);
const element: React.ReactElement<IListViewProps> = React.createElement(
StoreLibrary,
props
);
ReactDom.render(element, this.domElement);
}
