View and Data API

About Me

Shiya Luo

Developer Evangelist @ Autodesk


What does View and Data API do?

See it live

The Stack

Server-Side REST API

  • Upload
  • Translation
  • Storage

Client-Side JavaScript API

  • Viewing - THREE.js
  • Embed in Webpage
  • Access to objects

The Stack

Explain the stack



Server-side Workflow

  • Register + create app
  • Get access token
  • Create bucket
  • Upload file/object to bucket
  • Request translation
  • Access from client

Register + Create App

Register + Create App

Get Access Token

Store access token in session

Create a Bucket

"Buckets" are containers for data. Retention policies are:

  • Transient: 24 hours.
  • Temporary: 30 days.
  • Persistent: until deleted.

Must be between 3 to 128 characters and contain only lowercase letters, numbers and the symbols . _ -

Upload File to Bucket

Set References


Encode URN

Once the file has been successfully uploaded, we should have recieved back an id in the form of a URN. It should look something like: "urn:adsk.objects:oss.object:mybucket/myfile.ext"

Translate the File

View Translation Status

See what the current status of your translation is

View Your File!


JavaScript API

On your page

Reference the following JavaScript Libraries:

<link rel="stylesheet" href="" type="text/css">
<script src=""></script>

Put the viewer on your page

Create a div with id "viewer"

<div id="viewer"></div>

Initialize with JavaScript

function initialize() {
    var options = {
        'document' : 'urn:dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6bXlidWNrZXQvc2t5c2NwcjEuM2Rz',
        'getAccessToken': getToken,
        'refreshToken': getToken,
    var viewerElement = document.getElementById('viewer');
    var viewer = new Autodesk.Viewing.Viewer3D(viewerElement, {});

    Autodesk.Viewing.Initializer(options,function() {
        loadDocument(viewer, options.document);


function loadDocument(viewer, documentId) {
    // Find the first 3d geometry and load that.
    Autodesk.Viewing.Document.load(documentId, function(doc) {
    var geometryItems = [];
    geometryItems = Autodesk.Viewing.Document.getSubItemsWithProperties(doc.getRootItem(), {
        'type' : 'geometry',
        'role' : '3d'
    }, true);

    if (geometryItems.length > 0) {
 }, function(errorMsg) {// onErrorCallback
    alert("Load Error: " + errorMsg);


function getToken() {
        return "GX6OONHlQ9qoVaCSmBqJvqPFUT5i";

The minimal sample code can be found at

It's less than 60 lines of JavaScript + HTML


  • I didn't cover all the APIs
    • Sample apps
    • Documentation
  • These slides are on
  • Ask me when you need help