Building your token usage dashboard with Forge
Bastien Mazeran, Designated Support Specialist, at Autodesk on December 18, 2018
You have just read Understanding your Autodesk token consumption with Forge and wanted to learn how to integrate the new Forge TokenFlex Usage Data API with your token consumption dashboard.
In this article, we will discuss a sample web dashboard application, you can reuse today to quickly build your own consumption reporting dashboard solution.
Please note that this dashboard solution will only work for customers on a TokenFlex agreement. If you’re not on TokenFlex, you can stop here. If you are, please read on. Below is a quick overview of the sample consumption reporting dashboard solution:
This dashboard web solution uses the Forge Authentication API to perform the login. The Forge TokenFlex Usage Data API only supports the 3-legged oAuth flow, which is the most secure login flow Autodesk has to offer today and it ensures the TokenFlex Usage Data API only displays information that is associated with the logged in user.
Typical users who are associated to TokenFlex contracts are contract managers or software coordinators. It is therefore critical you always log in with users that have those roles.
If you log in with a regular user, you will not see any token consumption data.
The dashboard application is composed of multiple components. At the top, you will find all your contracts and their respective metadata. You will also see which contracts are expired and which ones are active.
You can click on the Map View button for a specific contract to get a map of your token usage data per office location:
The dashboard application is querying the TokenFlex Usage Data API for data, and that returned data is sent out to Google Maps API. The dashboard then declares Google Maps InfoWindow objects that will place markers on specific office locations, and when a marker is selected a new info window is displayed with token consumption data.
In this example, the backend queries the contract details (see API reference here), takes the country names returned and mark their locations on Google Maps, along with usage data of specific locations. See the API reference above to find out what data is available and their query patterns – also note that these queries are asynchronous and you will need to fetch the query results from the detail_uri in the JSON response, with the exception when the results are already cached and readily available in the immediate response to the query. More details can be found in the API reference here.
At the bottom of the dashboard, you will find reports such as pie charts, column charts that display contract data in a graphical way. The reports are created using the chart.js framework.
One of the main advantages of chart.js is that it takes care of the rendering of chart graphics so you can focus on getting your data feeds and chart configurations right - sounds like spreadsheets with Excel ah? Another benefit is that, unlike d3.js (another popular charting library), chart.js renders to H5 canvas instead of SVG elements, with browser-native 3D support (WebGL), as well as other extra features and performance boosts.
The source code of the sample web dashboard can be accessed from here. If you are a developer, you can start cloning this repository using git directly to your local development machine.
Additional technical resources: