Skip to content

Instantly share code, notes, and snippets.

@willjohnson
Last active October 6, 2021 13:52
Show Gist options
  • Star 10 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • Save willjohnson/6334811 to your computer and use it in GitHub Desktop.
Save willjohnson/6334811 to your computer and use it in GitHub Desktop.
Asana tasks widget for Dashing

Description

A Dashing widget for displaying tasks assigned to you in Asana.

Dependencies

You need an account with Asana to use this.

Add to dashing's gemfile:

gem 'asana'
gem 'json'

and run bundle install.

Usage

Add the widget HTML to your dashboard

    <li data-row="1" data-col="1" data-sizex="1" data-sizey="2">
      <div data-id="asana_tasks" data-view="AsanaTasks" data-title="Today's Tasks"></div>
    </li>

Create a directory titled "asana_tasks" under your widgets directory and move asana_tasks.coffee, asana_tasks.html, and asana_tasks.scss into that directory.

Get your API key from Asana by logging into asana.com, clicking on your name in the bottom left, and selecting account settings. Select the Apps tab and click on API key.

You also need the name of the workspace that you want to show tasks from.

Modify the api_key and workspace_name variables of the asana_tasks.rb file.

Move asana_tasks.rb into your jobs folder.

class Dashing.AsanaTasks extends Dashing.Widget
<li data-row="1" data-col="1" data-sizex="1" data-sizey="2">
<div data-id="asana_tasks" data-view="AsanaTasks" data-title="Today's Tasks"></div>
</li>
<h1 class="title" data-bind="title"></h1>
<ul>
<li data-foreach-item="items">
<i data-bind-class="item.icon"></i>
<span class="label" data-bind="item.label"></span>
</li>
</ul>
<p class="more-info" data-bind="moreinfo"></p>
<p class="updated-at" data-bind="updatedAtMessage"></p>
#!/usr/bin/env ruby
require 'asana'
require 'json'
# You need to enter your API key to query Asana.
# You can find that by clicking on your name in the bottom left and selecting Account Settings.
# Click on the Apps tab.
api_key = 'ASANA API KEY'
# The name of the workspace you would like to query. Case sensitive so you might need to go to Edit Workspace Settings to see.
workspace_name = 'WORKSPACE NAME'
# Number of tasks to show
num_tasks = 10
Asana.configure do |client|
client.api_key = api_key
end
# get workspace id
workspace_id = nil
workspaces = Asana::Workspace.all
workspaces.each do |workspace|
if workspace.attributes['name'] == workspace_name
workspace_id = workspace.attributes['id']
end
end
# set workspace
workspace = Asana::Workspace.find(workspace_id)
# :first_in sets how long it takes before the job is first run. In this case, it is run immediately
SCHEDULER.every '30m', :first_in => 0 do |job|
list = Array.new
tasks = workspace.tasks(:me)
i = 0
tasks.each do |task|
task_detail = Asana::Task.find(task.attributes['id'])
if task_detail.attributes['assignee_status'] == 'today'
if task_detail.attributes['completed'] == true
icon = 'icon-check'
else
icon = 'icon-check-empty'
list.push({label: task.attributes['name'], icon: icon}) # moved here due to no longer being able to archive tasks
i += 1 # moved here due to no longer being able to archive tasks
end
end
break if i == num_tasks
end
send_event('asana_tasks', {items: list})
end
// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color: #12b0c5;
$value-color: #fff;
$title-color: rgba(255, 255, 255, 0.7);
$label-color: rgba(255, 255, 255, 0.7);
$moreinfo-color: rgba(255, 255, 255, 0.7);
// ----------------------------------------------------------------------------
// Widget-list styles
// ----------------------------------------------------------------------------
.widget-asana-tasks {
background-color: $background-color;
vertical-align: top;
.title {
color: $title-color;
}
ol, ul {
margin: 0 15px;
color: $label-color;
}
ol {
list-style-position: inside;
}
li {
margin-bottom: 5px;
margin-left: 0px;
text-align: left;
}
.list-nostyle {
list-style: none;
}
.label {
color: $label-color;
}
.updated-at {
color: rgba(0, 0, 0, 0.3);
}
.more-info {
color: $moreinfo-color;
}
}
@ilyakatz
Copy link

ilyakatz commented Sep 5, 2013

cool widget

@kramse
Copy link

kramse commented Jan 25, 2014

Works nicely, Thank you!

@dunnston
Copy link

dunnston commented Jan 5, 2016

This no longer works. I suspect it's because the current asana gem is using an updated api. I am close to making this work with the updated version. I can get a list of tasks in irb but can't get the list to show on my dashboard. Any ideas on how to make this work with the current version of the asana gem?

@willjohnson
Copy link
Author

@dunnston I moved my original code here (https://github.com/willjohnson/dashing-asana-tasks) and updated it to use the new api.Hopefully that will work for you.

@crazyrider2016
Copy link

I read on the official Asana Website that there is no Support of the API key anymore - only a Access token can be generated.

"API Key (Deprecated): The API Key is being phased out and will eventually not be supported for use with the Asana platform."

As I understand the code above, you did not implement this authorization method yet - as it says in the code still API key? I just wanted to clarify upfront, before starting to do anything with this.

@crazyrider2016
Copy link

anyway i tried to set it up as described, found the script that uses the token verification. however does not work. it is updated frequently but no tasks are being displayed. any ideas?

@kitusmark
Copy link

kitusmark commented Jan 3, 2017

It does not work for me. I got everything setted up with the new api but it doesn't show the tasks. Does it work with organizations instead of workspace?

The console log retrieves the tasks id's everytime it updates but nothing shows on the web browser.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment