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

Closed
davehax opened this issue May 9, 2019 · 4 comments

Comments

Projects
None yet
2 participants
@davehax
Copy link

commented May 9, 2019

Category

[ ] Enhancement

[x] Bug

[ ] Question

Version

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

#id=%2Fsome%2Fweird%20%26%26%20folder%2Fpath%2Fword-doc.docx&parent=%2Fsome%2Fweird%20%26%26%20folder%2Fpath

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 (
  <div>
    <FieldNameRenderer 
                isLink={true}
                hasPreview={true}
                text={this.props.value}
                filePath={this.props.listItem.getValueByName('FileRef')}
    />
  </div>
);

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
@msftbot

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

@davehax

This comment has been minimized.

Copy link
Author

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

Merged

Fix of #296 #304

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

@estruyf

This comment has been minimized.

Copy link
Collaborator

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: https://sharepoint.github.io/sp-dev-fx-controls-react/beta/

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

@estruyf

This comment has been minimized.

Copy link
Collaborator

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.