Examples and documentation for UI integrations

Hey!

I am looking for documentation and examples on how to write an app that integrates into UI. For example, CVS importer adds a custom menu item, Everhour adds calendar and tracking input etc

However, I can not find documentation explaining the process and requirements. Would appreciate pointing them out.

V

In my opinion there are two scenarios:

  1. you have a deal with Asana and they help you (I think only Harvest does have a deep integration :thinking:)
  2. you are an outsider developer, and you are on your own, trying to understand how their DOM is made and use the API for the calls. If DOM changes, you won’t be notified, your app will break.

@Phil_Seeman @lpb @James_Carl what do you think?

Hi @Victor4, I agree with @Bastien_Siebman. There’s not much documentation about this specifically at Asana Developers - API, Documentation & Community Support • Asana about DOM changes and you’d want to be as careful/defensive as possible to stave off breakage as much as possible.

I haven’t looked closely at the code, but perhaps @ShunS’s Asana Navigator: Unofficial efficiency browser extension to enhance navigation for Asana tasks is an example for you. This is a Chrome Extension, so that limits you to Chrome Desktop (and Opera I think). See his GitHub - ShunSakurai/asana-navigator: Unofficial Google Chrome and Firefox extension to enhance navigation for Asana and the readme there.

Hope that might help a bit,

Larry

4 Likes

Yeah I agree as well. Integrating into the Asana UI is currently not officially supported so you’re basically on your own, but @lpb has given you some good directional pointers.

2 Likes

Hi @Victor4,

Tony here from the Asana platform team. As our community members mentioned above, we do not officially support building UI integrations outside of the ones we have built internally (Dropbox/CSV importer/Harvest etc). Some developers have also worked around this by using browser extensions to build UI integrations (Everhour, Toggl etc).

That being said, we would love to offer developers the ability to integrate with the Asana UI in the near future. If you or any others are interested, please let us know what you are looking to build through this quick survey!

5 Likes

Thanks, @TonyC, I just completed the form, and I recall supplying similar info some time ago as well, in some format, perhaps related to my Asana2Go app.

Thanks again,

Larry

2 Likes

@Victor4: Everhour.com did a great job to integrate their UI into Asana. We use that day by day with most people in our teams. So might either want to give that tool a try to see how it integrates technically or ask the guys that developed it.

Hope this helps,

Patrick

2 Likes

Thanks @lpb for mentioning my extension!
Just as some people said, I did a lot of “Inspect Element” on Asana task pages to learn the structure of the DOM.
I was able to implement some features, but I still can’t do things such as:

  • Refreshing only part of the window when switching tasks – I know it’s done by Luna framework and I can see it’s done by sending POST request to the server, but I can’t use it in my extension. I wrote in the recent developer survey that it will be really great if developers could use that feature
  • Displaying tooltips with the cool black background

Hope this helps and I’m willing to share whatever I know.

P.S. below are my favorite Chrome extensions that interact with Asana UI:

4 Likes

Awesome, thank you! Will look into it! But definitely would be great with a product-supported integration as things can break quickly and fix can be difficult.

1 Like

Sounds great! If you know any of them would appreciate an intro!

1 Like

Great! Done!

@Victor4: Feel free to DM me.

1 Like

I found a way to jump to another task without loading the whole Asana page. It’s now significantly faster. I’ll test and release the new Asana Navigator version tomorrow.

var openPageWithoutRefresh = function (newUrl) {
  window.history.pushState({}, '', newUrl); // parameters: state, title, url
  window.history.back();
  setTimeout(function () {
    window.history.forward();
  }, 100);
};
2 Likes