Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FieldNameRenderer fails to encode URI when hasPreview={true} #296

davehax opened this issue May 9, 2019 · 4 comments


None yet
2 participants
Copy link

commented May 9, 2019


[ ] Enhancement

[x] Bug

[ ] Question


Please specify what version of the library you are using: [ 1.13.1 ]

(using SharePoint Framework 1.8.1 as well)

Expected / Desired Behavior / Question

Using the FieldNameRenderer (documentation here) to override the FileLeafRef / LinkFilename / LinkFilenameNoMenu controls should allow document previewing in sub-folders.

i.e. left click on a folder -> navigates you to the sub folder. left click on a document -> show document preview.

Observed Behavior

The URL's generated by the isLink={true} option fail to be URI encoded when paired with hasPreview={true}. SharePoint Online appears to have trouble with these links and displays the error message 'This item might not exist or is no longer available'.

The HREF attribute is set to

#id=/some/weird && folder/path/word-doc.docx&parent=/some/weird && folder/path

rather than what SharePoint Online does which is calling encodeURIComponent on the parameters


Steps to Reproduce

  1. Create a new FieldCustomizer (use JS lib React, of course)
  2. Install @pnp/spfx-controls-react@1.13.1
  3. Set up the React component to accept a ListItemAccessor as a property
  4. In the render() method return a new element like so:
return (

This occurs in debug mode and also once deployed as an App to a site.

Setting the ClientSideComponentId for the FileLeafRef field can be done by using the PnP powershell lib and this command (substitute your own app id) . Note the inclusion of the flag '-UpdateExistingLists'.

Set-PnPField -Identity 'FileLeafRef' -Values @{ClientSideComponentId = [GUID]"e37746df-aaa9-4e3d-8120-578d6c514b57" } -UpdateExistingLists

This comment has been minimized.

Copy link

commented May 9, 2019

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

@msftbot msftbot bot added the Needs: Triage 🔍 label May 9, 2019


This comment has been minimized.

Copy link

commented May 9, 2019

As a workaround I'm using the onClick and onDoubleClick callbacks then setting location.hash

for documents I set islink=true and hasPreview=true

    public onClickPreview(args: IFieldNameClickEventArgs): any {
        const parts: Array<string> = args.filePath.split('/');
        const parentPath: string = parts.slice(0, Math.max(parts.length - 1, 0)).join('/');

        location.hash = `#id=${encodeURIComponent(args.filePath)}&parent=${encodeURIComponent(parentPath)}`;

        return {};

and for Folders I set isLink=true and hasPreview=false

    public onClickFolder(args: IFieldNameClickEventArgs): any {
        location.hash = `#id=${encodeURIComponent(args.filePath)}`;

        return {};

AJIXuMuK added a commit to AJIXuMuK/sp-dev-fx-controls-react that referenced this issue May 17, 2019

@AJIXuMuK AJIXuMuK referenced this issue May 17, 2019


Fix of #296 #304

estruyf added a commit that referenced this issue May 20, 2019


This comment has been minimized.

Copy link

commented May 20, 2019

This fix has now been merged and will be available in the new release. You can already test it out by installing the latest beta version.

More information on how you can test out a beta version can be found here:

@estruyf estruyf added this to the 1.13.2 milestone May 20, 2019


This comment has been minimized.

Copy link

commented May 22, 2019

This has just been released in the version 1.13.2.

@estruyf estruyf closed this May 22, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.