Asana project statuses : creating web summary

Question

My goal is to query Asana for project statuses (posts within the 'Progress' tab) and display them on a webpage. The intention is to give some visibility to those who can't go into Asana's UI and see the information there. Here's the thing though. I built webpages back when we viewed them with this so I'm not savvy on frameworks, builds, etc.

Is there a way to keep things relatively simple and create a .html file with a script that can handle the requests and return values? I'm running a slim version of IIS on my machine at work and would likely serve it up from here.

I went through the process of getting the personal access token and registering the app. I'm not sure if this is necessary, but I have those pieces in place, if so.

An old noob could certainly use some help or a nudge in the right direction - thanks.

Answer 1

I'm a Developer Advocate here at Asana. There is indeed a way to get what you're looking for!

With credentials in hand, you can check out our client libraries for your language of choice. You can even do things client-side by using the node-asana client library (it runs just fine in browser javascript) if you want to have no backend and just serve it out of a HTML file. Of course, I have to caution you here, though: it may make more sense to use, say, PHP running in IIS, because if you serve the script in a html file, it's being run on the client, and so keeping credentials secret is more challenging.

Each language will show you what to do with your OAuth app or personal access token. The main difference between the two is that your personal access token acts "as you" when you access our API; it's a bit simpler than a full OAuth app. An OAuth app acts with you as the application maintainer, but acts as a user who grants your application access to their data, i.e. you send them to Asana which asks if it's ok for TWZApp to get access to their own data. It's generally simpler to develop with the personal access token to get started, but OAuth apps are "more correct" when it comes to certain automation flows: for instance, if you don't have access to a project in Asana, but you want to summarize it for someone who does, you would not be able to see the project with your own personal access token, but the user can grant your application permission to see the project "as them". You can read more info in our page about authentication.

If you look at the examples, hopefully those can make some sense as to how to get it hooked up into your webpage and get going on the javascript side. Off the top of my head, what you're looking to do will be to get started with something like (continuing with javascript):

... for each project ...
client.projects.findById(projectId).then(function(project) {
  console.log(project);
});

You can see what comes back from the API in this way and figure out how you want to interpret the results (i.e. show a color as an image, put the text in a <p> element, or what have you)

What comes back is JSON, so you should fairly easily be able to traverse the data. Specifically, you're looking for data.current_status which will have properties color, text, author, and modified_at which should be fairly self-explanatory with regards to what those properties represent in Asana.

Hopefully this helps you get started! Best of luck!