0

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)

before publishing after publishing

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);
  }
0

Your updateProperty syntax using arrow functions might be causing issues with some browsers. Can you try removing it just to test if it fixes the issue?

  • Tried it, didn't do anything :( – Maarten Oct 2 '18 at 18:31
0

I ended up writing my own DetailsList control. Fixed everything, not sure why the bundles version of fabric's DetailsList seems to fail in 1.4.1 and 1.6.0 of SPFX.

  • That's because you cannot take latest version of Fabric and use it with a version of SPFx. It supports a specific version only... – Jussi Palo Oct 3 '18 at 6:28
  • Actually, one of the isolation steps was to use the bundled version of fabric, with the same behavior. Also, SPFX currently supports Fabric in the 5.x version range. It does not support 6.x due to the React version bump. – Maarten Oct 4 '18 at 16:03
  • Here's an example of the issue with SPFX 1.6, note it only has the bundled fabric version present: github.com/SharePoint/sp-dev-docs/files/2439732/listview16.zip – Maarten Oct 5 '18 at 0:32

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.