How does lightning:navigation replace lightning:openFiles?

Question

I'm trying to develop functionality which allows a user to click on a link to display a preview of a single file or a set of files (ContentDocuments) in Lightning Experience. The obvious way to do this is to use the lightning:openFiles event, apart from the fact that this is "no longer recommended".

Within the documentation for lightning:openFiles, Salesforce recommend "Use the Lightning navigation service instead". I cannot find how to use the Lightning navigation service to implement this functionality in the same way.

I've reviewed the documentation in the Component Reference for lightning:navigation, and also the linked documentation for Page Reference and PageReference Types, and couldn't find any reference for how to open a ContentDocument in the previewer.

I tried the following page reference:

{
    type: "standard__recordPage",
    attributes: {
        objectApiName: "ContentDocument",
        recordId: "069000000000000000",
        actionName: "view"
    }
}

This successfully redirects to the file, but doesn't open it in preview mode. I tried changing the actionName to preview or open, neither of which was successful.

I'm imagining that I might want to vary the type, but I'm also just wondering if the documentation is sending me barking up the wrong tree. If I use the lightning:fileCard component, which implements the behaviour I want, I can see that this still fires lightning:openFiles events, so the event is still used by Salesforce internally even if discouraged.

Does anyone know the "proper" way to replicate lightning:openFiles behaviour using lightning:navigation?

Answer 1

Your page reference is wrong. It's documented in the LWC Guide, and should look like this:

{
            type: 'standard__namedPage',
            attributes: {
                pageName: 'filePreview',
            },
            state : {
                recordIds: '069xxxxxxxxxxx,0691yyyyyyyyyyyyy',
                selectedRecordId:'069xxxxxxxxxxx'
            }
        }