3 Apr 2023

outsystems integration

If you are using outsystems and interested in integrating APS in it, then the following might be useful.

Our getting started tutorial shows you how to get your files to our servers, translate them and display their 3d visuals in your webpage. I followed the same in the SharePoint sample and will do the same here. 

I started off with creating a new Traditional Web app:

Create traditional web app in outsystems

Then added an empty Web Screen where we'll list the files stored in our APS bucket and display the selected model in the Viewer:

Empty screen

Added another Web Screen that already had the Upload widget in it to enable upload of new models and just deleted everything from it that was not needed:

Screen for upload

Also created a Web Block to make it easier to include the Viewer in any parts of the web app, set its Style Sheet and added JavaScript code to expose some functions that can be used later on: initializeViewer() and loadModel() 

Adding web block

Then defined all the API endpoints this app will use from Autodesk Platform Services. Just had to set the headers and add a sample response so that outsystems can generate the data types for the response:

API endpoints usedAlso added an endpoint that will be used on the client side from the Web Block's JavaScript code:

token endpoint used by the Web Block

In the main web screen added a flow that will use all the REST endpoints we added. Request an access token, get the list of objects in the bucket, include both the css and js file of the Viewer and then call the "initializeViewer()" function that is part of the ViewerBlock's code. Also added local parameters: one to store the cursor as we iterate through the contents of the bucket called StartAtUrlParam, and one to store information about the list of files we retrieved called ObjectsInBucket. The latter will be referenced by the Record List I added next.

preparation flow

So I added the Record List that will be using the ObjectInBuckets local variable as a source, plus a Separator and an instance o the ViewerBlock

record list

Added some JavaScript code to the main Web Screen that can load a new model and will be used for the onclick event of the rows of the Record List

onclick event

Also had to create a flow for the second Web Screen that will be called when the user clicks the Upload button. It requests an access token, then a signed URL for the file that we want to upload, then uploads the content using that URL, triggers the SVF translation job for the file, and finally pops up a notification about the successful upload

upload flow

Here is the finished website in action: https://youtu.be/wQho4a4JguE

And here is the saved application that you should be able to test in your environment. Please check out the readme for info on what needs to be modified in the app in order to run it with your credentials: https://github.com/adamenagy/outsystems-integration

There is actually a component for our Viewer that you can use provided by OutSystems: https://www.outsystems.com/forge/component-overview/1337/autodesk-forge-connector


Related Article