SharePoint folder and .sppkg file

[jsoriasanz]

Sample

https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-document-preview

Author(s)

hugoabernier

Question

I am trying to test the react-command-document-preview development on my SharePoint Online but I can't compile it as the "SharePoint" folder with the necessary files and the final ".sppkg" file is missing.

Can someone upload the SharePoint folder to the repository?

I have tried with a SharePoint folder from another application and I can compile it but the development does not work in my SharePoint Online as the button does not appear.

[ghost]

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

[bcameron1231]

You must run
gulp bundle --ship gulp package-solution --ship

[jsoriasanz]

Hi @bcameron1231 and thank you for your answer,
When I run this I get the following error:

Error - 'package-solution' sub task errored after 2.11s
Could not find Element Manifiest: sharepoint\assets/elements.xml

Any ideas?

[bcameron1231]

Ah my apologies, I didn't realize it's looking for the xml file. Ya it should be in there. Basically you need to create the sharepoint/assets/elements.xml file. In there you will need to provide the custom action registration.

See this documentation.
https://learn.microsoft.com/en-us/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api#add-a-listview-command-set-to-a-solution-package-for-deployment

I haven't tested, but this looks to be a document library. This elements xml may work, though I haven't tested

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
    <CustomAction
        Title="SPFxDocumentPreview"
        RegistrationId="101"
        RegistrationType="List"
        Location="ClientSideExtension.ListViewCommandSet.CommandBar"
        ClientSideComponentId="5fc73e12-8085-4a4b-8743-f6d02ffe1240"
        ClientSideComponentProperties="{&quot;sampleTextOne&quot;:&quot;One item is selected in the list.&quot;, &quot;sampleTextTwo&quot;:&quot;This command is always visible.&quot;}">
    </CustomAction>
</Elements>

[jsoriasanz]

Hi @bcameron1231,

I have tried with your elements.xml and replaced the ClientSideComponentId with my file ID: /src/extensions/documentPreview/DocumentPreviewCommandSet.manifiest.json

When I run the command again I get the following error:
Error - 'package-solution' sub task errored after 2.14s
Could not find Element Manifiest: sharepoint\assets/ClientSideInstance.xml

Just in the documentation that you have sent me appears the method to create this ClientSideInstance.xml file, here is the sample:
{ "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json", "solution": { "name": "command-extension-client-side-solution", "id": "0abe5c73-1655-49d3-922b-7a47dd70e151", "version": "1.0.0.0", "includeClientSideAssets": true, "isDomainIsolated": false, "features": [ { "title": "Application Extension - Deployment of custom action.", "description": "Deploys a custom action with ClientSideComponentId association", "id": "25f8df47-61f2-4d75-bfe2-8d614f775219", "version": "1.0.0.0", "assets": { "elementManifests": [ "elements.xml", "clientsideinstance.xml" ] } } ] }, "paths": { "zippedPackage": "solution/command-extension.sppkg" } }

*I have created the file but two ID's appear but I don't know why to replace them as neither matches the elements.xml file in that same document.

When I run the command again, it correctly creates the .sppkg file in /sharepoint/solution but when I install the application in SharePoint Online the following error appears in the column "Valid app package": No. Invalid SharePoint App package. Error: The specified node cannot be inserted as the valid child of this node, because the specified node is the wrong type.

Thank you again.

[jsoriasanz]

Any ideas?