SharePoint Online integration

I wrote a while back (8 years ago already 😬) about integrating the Forger Viewer into a SharePoint page. I was using SharePoint 2010 back then, and now skipping through SharePoint 2013 and 2019, I'll use SharePoint Online.

Quite a few things changed in SharePoint, but the parts relevant to my test project are:
- I can automate some of the things I previously done in my SharePoint page using Power Automate
- SPFx seems to be the technology needed to create my Web Part that uses the Viewer

1) Power Automate

I could use Power Automate to create a Flow that will automatically upload to Forge and translate a file that was newly added to SharePoint Documents

To keep track of the urn of the file and translation process I added a new property to the Documents called "Urn":

Then I could create the Flow that uploads all newly added files to my bucket on Forge, translates it to SVF and then sets the Urn property of the file in SharePoint to the urn of the file in my bucket that I can pass to the Viewer in order to display it.

As soon as the Power Automate Flow kicks in after a new file has been uploaded, I set the Urn property of the file to "Translating ..." then, once it's finished, it will be updated with the actual urn of the file in the bucket:

The only way I found to export the Flow so that others outside the company can see all the components and parameters used was to add it to a Solution and export that as Unmanaged:

Here is the json export describing the flow: PowerAutomateFlow-ForgeTranslateFile.json 

[Update 2023-10-17] Because some OSS APIs got deprecated, I migrated the flow to use the POST /signed endpoint for the file upload.

I needed to add an extra step in the flow like this:

Also had to update how the "file_url" variable is initialized. Now it uses this expression: 

concat('https://developer.api.autodesk.com/oss/v2/buckets/adam_sharepoint/objects/', triggerOutputs()?['body/{FilenameWithExtension}'],'/signed?useCdn=true&access=write')

The json file with the above changes is here: PowerAutomateFlow-ApsTranslateFile.json

Note: there might be a 100MB size limit for reading file content (in order to upload it to OSS) inside Power Automate, you'd need to implement a workflow to do that by chunks if you want to support such files
 

2) SPFx Web Part

Last time I had to install SharePoint 2010 in order to develop a Web Part for it. This time I just had to install a couple of components in order to get started. One issue is that these components do not support the latest version of node.js and npm, so I had to switch to an older one.

Fortunately, I found a nice tool that makes it really easy to install various node/npm versions and switch between them:
https://github.com/nvm-sh/nvm 

Once I had that, I could just run this in the terminal to get a node version that the Microsoft components will work with:

(base) C02XJG9QJG5J:SharePoint nagyad$ nvm install 14.15.0
(base) C02XJG9QJG5J:SharePoint nagyad$ nvm use 14.15.0
Now using node v14.15.0 (npm v6.14.8)

 After that I could install the Microsoft part successfully:

npm install @microsoft/generator-sharepoint --global

And could build the Hello World part that became the basis of my Web Part. 

As mentioned in the Hello World part instructions, you can run the following to test your application locally as you keep making changes to it:

gulp serve

Used CLIENT_ID & CLIENT_SECRET variables in ViewerWebpartWebPart.ts to call the Autodesk authentication endpoint to get an access token for file viewing. 
It would be better to have a dedicated server side functionality for providing an access token as that would hide CLIENT_SECRET completely.

One of the first issues I had was around referencing the viewer3D.js library from my Web Part. I tried adding the '<script>' tag to this.domElement.innerHTML in the render function in ViewerWebpartWebPart.ts, I tried to add it as an external reference in config.json - but neither of those worked. What did work was calling SPComponentLoader.loadScript.

I added a slightly modified version of ForgeViewer.js to the src folder of my project that can be called to display the Viewer in the Web Part.

I only needed to modify the main scss and ts files of my project in order to add some styling and show the list of files available in the Documents folder. All the changes are between commented <new></new> tags, so easy to find them.

Once I was happy with things I could generate the package that can be uploaded to SharePoint by running this in the terminal which generated forge-test.sppkg inside the sharepoint > solution folder:

gulp bundle --ship
gulp package-solution --ship

I just had to upload it to the site's App Catalog:

Then I could add it to the page on my SharePoint site:

The result can be seen at the top of the article.

Source code: https://github.com/adamenagy/sharepointonline-integration