Asana project embed layout URLs no longer compatible

[MichelleBlanchette]

Asana recently updated their URL structure for project views within the web app. This has already caused confusion with a user (including myself while resolving the issue on their site). Fortunately, I was able to fix the URL by using the "Copy Project URL" button in the Asana app. However, the simple and intuitive method of copying the browser address bar is much preferred. Additionally, this means Completionist Pro's integration is now broken for specifying the layout via the project URL.

I posted the following details in Asana's Community Forum: https://forum.asana.com/t/how-to-determine-project-layout-view-from-url/558032

---

Problem

With the recent change in Asana that added icons to the List, Board, Calendar, etc. layout tabs in a project, it seems the URL structure has also changed. This has broken an incredibly intuitive UX that I was taking advantage of in my application.

In my application, I allow Asana users to simply provide the project link (actually, the web browser address URL) of the view/layout which they'd like to "embed".

For example, the URL for a project's board layout was originally like:

https://app.asana.com/0/<project_gid>/{overview,board,list,calendar}

Now the URL seems to be something like:

https://app.asana.com/0/<project_gid>/<project_view_gid??>

Questions

1. Is there still a simple and intuitive way for a user to simply "grab" the URL of a specific project view/layout?
2. How do I parse this new URL format to determine the desired project view?
3. Is there documentation or was there a warning for this update?
4. Was it risky on my part to have relied upon the Asana web app's internal URL structure? a. I figured this was a simple, intuitive way for a user to say, "embed this project like this," by simply copying the URL of what they're looking at. However, I'm now wondering if that's bad practice and not recommended. My original thought was that Asana's own app URLs would be even less likely to change than API endpoints, but I suppose the API endpoints do at least provide fair warning of upcoming changes. :grimacing: b. I realize this also wasn't a device-agnostic approach since the Asana mobile app doesn't have an address bar nor does the desktop app. Perhaps that's reason enough my approach was wrong from the start—despite my app being used 99.99% of the time within a desktop web browser. c. Also note that my implementation is a text-based integration (eg. oEmbed)—otherwise, I would definitely build a more elaborate "project + layout picker" form component-based UX.

Somewhat similar thread: https://forum.asana.com/t/how-to-distinguish-between-a-project-and-a-team-url/166931

[MichelleBlanchette]

The specified layout should still be carried through to the frontend for extensions of the React component rendering: https://github.com/PurpleTurtleCreative/completionist-pro/pull/47#issuecomment-1872092928

When I solved this quickly before in https://github.com/PurpleTurtleCreative/completionist/pull/198, I was thinking this wasn't Completionist's problem to solve since it only ever utilizes the list layout, anyways. However, since it has always output the data-layout attribute on the root node from parsing the project URL, my previous solution wasn't consistent with the functionality before the break. Basically, my solution wasn't backwards-compatible. I mean, it was because the links still parse the understood layout, but now the user has no (obvious/natural) way to specify the layout (even if it isn't currently utilized by Completionist). It could be by extenders and custom CSS or the like.

So I'm going to add the layout shortcode attribute and priority will be as such:

1. Shortcode attribute layout
2. Parsed layout from shortcode attribute src Asana project URL
3. Default to list