We’ve become badly addicted to the most excellent Jott here at Enleiten. Unfortunately, while it’s incredibly easy to use and quite useful, it hasn’t been possible to integrate into our trusted system until now. We are still waiting for Jott developers to add us to their official list of Jott Links, but until they do, here’s how you can set up a custom link yourself.

Step 1: Sign in to your Jott account

Click ‘Add Jott Links’ to add a new link

Uploaded with plasq’s Skitch!

Step 2: Add a Custom link

Click ‘Add’ on the Custom row.

Uploaded with plasq’s Skitch!

Step 3: Create the link

The name you enter is the one you say when you call Jott — I use ‘Enleiten’, but it’s up to you.
For the Setup Url, enter ‘http://www.enleiten.com/todo/jott/setup’.
For the Link Url, enter ‘http://www.enleiten.com/todo/jott’.
Then, just click Save.

Uploaded with plasq’s Skitch!

If you’re not currently logged in to Enleiten, you’ll be prompted for your username and password, otherwise, you’ll just be redirected back to your Jott inbox.

Uploaded with plasq’s Skitch!

Step 4: Use it!

To use your new Jott Link, just call Jott, say ‘Enleiten’, and say something. Within 30 seconds or so, the transcription will arrive in your Enleiten inbox, with a link back to your Jott account so you can listen to the original recording.

Enjoy!

Spread it: |||||

This tutorial is a followup to Instant Shiny Forms with Rails and YUI, with a bit more of an interesting technique that (I think, at least) really demonstrates where YUI shines. In the last tutorial, we embedded a hidden form in a “show” view, so we could render a YUI dialog instead of loading the edit page separately, or using a technique like in-place editing. While this is useful, I find it to be of somewhat limited utility. In this article I’ll demonstrate a technique to move that dialog to the index view using the Yahoo Connection Manager, so we can skip the show step all together.

Step One: The ‘_form’ partial

For the sake of simplicity, I’m going to cheat and reuse the partial from the last demo:

<% form_for(form) do |f| %>
  <%= f.error_messages %>

    <%= f.label :title %>
    <%= f.text_field :title %>

    <%= f.label :body %>
    <%= f.text_area :body, :rows => 6 %>

    <%= f.label :published %>
    <%= f.check_box :published %>

<% end %>

While we’re at it, let’s make one small change to the edit action in our countroller:

def edit
  @post = Post.find(params[:id])
  respond_to do |wants|
    wants.html
    wants.js { render :partial => 'form', :object => @post }
  end
end

This way, ajax calls will just get the form.

Step Two: The Index view

Again to keep things simple, we’re using a standard scaffold view here, with three changes. First, we’ll set an id on the table. And second, we want to add a class to all of the edit links, so we can find them again later. Finally, we also add a placeholder div in YUI module format, complete with our standard issue Web 2.0 spinner. With the changes, the final looks something like this:

<h1>Listing posts</h1>

<table id='posts'>
  <tr>
    <th>Title</th>
    <th>Body</th>
    <th>Published</th>
  </tr>

<% for post in @posts %>
  <tr>
    <td><%=h post.title %></td>
    <td><%=h post.body %></td>
    <td><%=h post.published %></td>
    <td><%= link_to 'Show', post %></td>
    <td><%= link_to 'Edit', edit_post_path(post), :class => 'edit_link' %></td>
    <td><%= link_to 'Destroy', post, :confirm => 'Are you sure?', :method => :delete %></td>
  </tr>
<% end %>
</table>

<br />

<%= link_to 'New post', new_post_path %>

<div id='edit_post_div' style='visibility: hidden;'>
	<div class="hd">Edit Post</div>
	<div class="bd"><%= image_tag 'spinner.gif' %> Loading...</div>
</div>

I did say this was straight scaffold, right?

Step Three: Javascript Includes and other layout nonsense

We return again to the YUI Dependency Configurator to get our includes in order. For this, we’ll need Container, Button and Connection Manager. We’ll go ahead and use the rollups, just to cut our download list a bit. We’ll also want to make sure we’re at least loading application.js, since we don’t want any code polluting our html if we don’t have to. Finally, add a class of ‘yui-skin-sam’ to the body element, so we pick up Yahoo’s skin for our dialog elements. Put it together, and this is the entirety of our layout:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  <title>Posts: <%= controller.action_name %></title>
  <%= stylesheet_link_tag 'scaffold' %>
  <!-- css -->
  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/assets/skins/sam/skin.css">
  <!-- js -->
  <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/utilities/utilities.js"></script>
  <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/container/container-min.js"></script>
  <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/menu/menu-min.js"></script>
  <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/button/button-min.js"></script>
  <%= javascript_include_tag 'application' %>
</head>
<body class="yui-skin-sam">

<p style="color: green"><%= flash[:notice] %></p>

<%= yield  %>

</body>
</html>

Step Four: Implement our dialog

The basic strategy here is fairly simple. We use the edit_post_div skeleton to create a basic dialog. Then, we use the ‘edit_link’ class to add onClick handlers for all of the edit links in the table, which stash the href where we can get to it again, and show the dialog. When the dialog is shown, we do an http GET to fetch the appropriate form from the server and update the dialog. All told, it’s about 70 lines of code with comments. And most of that’s formatting:

// Wrap an outer function to prevent namespace pollution
(function() {
  // Set up some shortcuts to YUI bits
  var yLang = YAHOO.lang;
  var yDom = YAHOO.util.Dom;
  var yEvent = YAHOO.util.Event;
  var yConnect = YAHOO.util.Connect;
  var yDialog = YAHOO.widget.Dialog;

  // Placeholder for our dialog
  var editPost = null;

  // Set the default Accept header for Connection Manager to match
  // what Rails expects from js

  yConnect.initHeader('Accept',
    'text/javascript, text/html, application/xml, text/xml, */*', true);

  // When our placeholder is ready, build the initial Dialog
  yEvent.onContentReady('edit_post_div', function() {
    function handleSubmit (arg) {
      this.submit();
    }
    function handleCancel (arg) {
      this.cancel();
    }
    editPost = new YAHOO.widget.Dialog("edit_post_div",
      { width               : "30em",
        fixedcenter         : true,
        visible             : false,
        constraintoviewport : true,
        modal               : false,
        postmethod          : "form", // We're still going to do a normal form submit
        buttons : [ { text:"Submit", handler:handleSubmit, isDefault:true},
                    { text:"Cancel", handler:handleCancel } ]
      });
    editPost.render();

    // When the dialog is displayed, update its form
    editPost.subscribe('show', function() {

      function onSuccess (oArg) {
        // Set the body of the dialog to the returned form partial
        this.argument.setBody(oArg.responseText);
        // Re-render the dialog, just be on the safe side
        this.argument.render();
      }

      yConnect.asyncRequest('GET', this.sourceUrl, { success: onSuccess, argument:this });
    });
  });

  // When the user click on one of our edit links, show the edit dialog
  yEvent.onContentReady('posts', function() {
    var links = yDom.getElementsByClassName('edit_link', 'a', this);
    for (var i = links.length - 1; i >= 0; i–){
      yEvent.on(links[i], 'click', function(e) {
        // Stop event propagation
        yEvent.preventDefault(e);
        yEvent.stopPropagation(e);

        // Stash the clicked link
        this.sourceUrl = e.target.href;
        this.show();
      }, editPost, true);
    };

  });
})();

And that’s about all there is to it. Easy, right?
Obligatory screenshot of the finished product:

Spread it: |||||

You’ve been sending us feature requests and suggestions to improve our interface, and we’ve just rolled out a bunch of the changes you’ve been asking for

If you like to prioritize your projects, you can now choose the order your projects are in to customize the display order of your projects. (The “all projects” link is at the bottom of the project panel in basic accounts)

Adding tasks directly to projects has been improved:

Under “Profile”, you can now also set a variety of email options. Add additional email addresses so you can forward tasks directly to your Enleiten inbox.

In your profile, you can also opt to receive a daily email of your next actions list, or any contexts you choose.

We’ve also added basic search, so you can locate your tasks individually.

Got any questions? Feel free to leave a comment or send a task to us at Enleiten support.

Spread it: |||||

A few months ago I’d offered to help some friends with their wedding and put together their flowers. In GTD style, I put everything in my system: requests for the list of corsages needed, requests for photos of bouquets the couple had found online and liked, information about when the flowers needed to be available for photos at the ceremony, etc. And most importantly, the RFQ I sent my supplier.

I’d used this vendor before for flowers, because it was quick and easy to email in a list of what I was looking for a checking prices. So off it went, with the waiting task in place, and out of my head.

Having the system in place saved me on this one, because my weekly review came around and that request had been sitting too long. Turns out my supplier was no longer in business, even though their email didn’t bounce and their website and price list were still up and running. Running across that outstanding item on my list was an excellent prompt at a time I wasn’t thinking about the project all the time, with the focus on picking up hardware and getting my schedule at work in order.

With that prompt in mind, I had enough time to call on my request, find out what was happening, and deal with the crisis of locating a new supplier who still had time to get my order placed with the growers.

For any other aspiring wedding couples out there, we’ll be putting together a set of wedding checklist templates. You’ll be able to sign up for an account and do all your wedding planning online, a great way to coordinate with family and loved ones dispersed across the country to get your wedding plans done.

It’ll take us a few more weeks before those checklists come out of beta to play, but if you’ve got samples of your checklist you’d like to contribute, or would be interested in getting into the beta early to help us finetune it, drop us a line at info@enleiten.com.

A big welcome to GTD Times readers.

We’ve had some comments about the ads interfering with trying out our application, so we’ve turned off ads on all free accounts for the week. Ad-free accounts are $5 a month, and we’ll work on bringing back less obtrusive ones when we turn them back on.

If you’ve got comments or suggestions for us, please feel free to leave us a comment or drop us an email at support@enleiten.com. We value your comments, and user requests weigh heavily in deciding what changes and improvements we make.

If you’re looking for some quick ways to get started, we’ve got screenshots outlining the feature sets in our help documentation, and some short screencasts to let you see how things work.

A quick note for users of other apps: Checking off the box next to a task entry marks it as complete. To edit task details, you can double click on the item you want to change, or click the “i” on the right to get into extended details.

I had the pleasure of chatting with Steve Borsch earlier this week. He’s a GTD fan, longtime tech advisor and expert, and contributor to Minnov8, a community blog covering emerging tech in MN. In addition to giving us some excellent feedback, he’s reviewed Enleiten’s GTD and project management application.

…Enleiten has nailed the workflow and functionality (Projects/People/Contexts) in much the same way that Google nailed search vs. cluttering up the page with lots of ads, upsells and cross selling. They’ve hit the sweet spot of GTD and lightweight project management and coupled it with a group approach — one I’d term a “social GTD” application.

As more of us seek ways to coordinate and orchestrate our activities with an ever widening number of other always-on, always-connected, and willingly participative people (many of whom have already embraced GTD), Enleiten has significant opportunity to become a preferred and social way to get things done.

Read the rest:
Enleiten: A Social GTD

This tutorial will demonstrate how to convert standalone Ruby on Rails forms to a YUI dialog (hey, it’s one less page load) in only 4 easy steps.

We’ll start with a quick and dirty (and all scaffold) blogging app. I assume you know a thing or two and don’t need me to walk through this. You’ll note that there are no changes required to your controllers to make this work.

Step 1: Include YUI and all of its goodness.

There are a number of tutorials out there for this — Stuart Grimshaw has one method in this article , but an easy way is to use the YUI configuration tool and just serve the files from their CDN — it’s probably faster than your servers, anyway. I prefer to include the files I need, so that javascript_include_tag can at least concatenate them down to one file — which your users will then cache. For this example, I’m going to just do a conventional form submit, rather than an Ajaxy form handler — it doesn’t work with the Prototype.js Ajax class, and Yahoo Connection Manager is a subject for another post.
The basic HTML to include for the YUI container module (which includes Dialog and some other goodness) is:

<!-- css -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/container/assets/skins/sam/container.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/button/assets/skins/sam/button.css"> 

<!-- js -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/animation/animation-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/element/element-beta-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/button/button-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/container/container-min.js"></script>

You will also want to add a class=”yui-skin-sam” to the body tag in your layout, so you pick up the styling correctly. If you want your own, go for it.

Step 2: Extract your form to a partial.

Of course, you already do this, so #new and #edit use the same partial, right? If not, go ahead and do that.

Step 3: Include the _form partial in the view

You may need to make a couple of changes to get this two work. The YUI container class uses a standard markup pattern like this:

<div id="my_form_div">
  <div class="hd">Header</div>
  <div class="bd">Body</div>
  <div class="ft">Footer (optional)</div>
</div>

We don’t need a footer for Dialog to work — in fact, it will add its own later, so we can leave that out. Insert the partial in the body, and your “Show” view should have something like this:

<p>
  <b>Title:</b>
  <%=h @post.title %>
</p>

<p>
  <b>Body:</b>
  <%=h @post.body %>
</p>

<p>
  <b>Published:</b>
  <%=h @post.published %>
</p>

<%= link_to 'Edit', edit_post_path(@post) %> |
<%= link_to 'Back', posts_path %>

<div id="edit_post_div">
  <div class="hd">Edit Post <%=h @post.title %></div>
  <div class="bd"><%= render :partial => 'form', :object => @post %></div>
</div>

And the page should currently render something like this:

Step 4: Wire up the dialog box.

You have a couple of options on where to include the javascript to activate this. The Rails default would be to just stick in a javascript_tag in the view after the form, so it’s available when you need it. The YUI standard would be to create an event listener to wait for the form element to be available and then do what needs to be done. My personal preference is to maintain a library of all of the javascript objects I’m using in an app in application.js, and then include a separate file per controller that sets up the listeners to activate the elements I want. To keep things simple, though, I’ll go with the first option — a javascript_tag block after the form. Code first, explanation later:

(function() {
  function handleSubmit (arg) {
    this.submit();
  }
  function handleCancel (arg) {
    this.cancel();
  }
  var postEditor = new YAHOO.widget.Dialog('edit_post_div',
    { width               : "40em",
      fixedcenter         : true,
      visible             : false,
      constraintoviewport : true,
      modal               : true,
      postmethod          : "form",
      buttons : [ { text:"Submit", handler:handleSubmit, isDefault:true},
                  { text:"Cancel", handler:handleCancel } ]
    });
  postEditor.render();
  YAHOO.util.Event.on('edit_post_link', 'click', function(e) {
    YAHOO.util.Event.preventDefault(e);
    YAHOO.util.Event.stopPropagation(e);
    postEditor.show();
  });
})();

So what did we just do there? The Dialog constructor takes two arguments, the id (or HTMLElement reference) of the wrapper div, and a configuration hash. The config hash sets up a 40em-wide dialog box that’s centered in the viewport, initially hidden, can’t be dragged off the screen, and that doesn’t allow you to interact with the rest of the page. To save the (nominal) trouble of dealing with Connection Manager, we’re going to submit the form using a conventional POST (or set postmethod to ‘async’ to do an ajax post). We’ve also set up “Submit” and “Cancel” buttons. The call to render() actually converts the form into the hidden dialog box.

Finally, we set up an onClick listener for the Edit link, which displays the dialog — and gives us something like this:

Further Reading

• There are a few tutorials up on the Rails wiki
• The YUI4Rails project seems to be coming along nicely, and promises a more Rails-ish integration than just writing javascript.
• There’s also Chetan Patil’s YUIRails project, which implements parts of the Prototype API using YUI — so you can use YUI as a replacement for prototype, but still take advantage of RJS to some extent.
• If you like paper, Learning the Yahoo! User Interface LIbrary will get you up and running with YUI in no time.
• Followup post, this time using connection manager: Dynamic dialogs with Rails and YUI

We’ve been working on getting some screencasts together to show how Enleiten’s project management app works. I’ve added the link over there on the right, so you check out the collection at your leisure.

Here’s a quick little video telling you about the three way you can currently add tasks to your Enleiten account.

And here’s a quick run through of the different ways you can retrieve and sort your tasks when you’re ready to get down to work.

If you’ve got any other requests for video tutorials, please leave a note in the comments or send us an email to support@enleiten.com.

Enleiten Pro in is beta right now, but if you’re curious what we’ve added, here’s a sneak peek.

You’ll be able to share entire projects with your groups, instead of just delegating individual tasks. You can also create project templates so you can streamline your group’s workflow or have a handy place to store your own checklists.

Your account doesn’t limit the number of groups you can create - just pick group members from your “People” list and you’re ready to go.

Yahoo! has been on a roll the last couple of weeks, which is excellent news for those of us that have become (maybe a little too much) attached to some of their front-end tools.

Let’s see, we’ve got:

• A new wireframe stencil kit that integrates both their excellent Design Pattern Library and YUI. [ed. Why didn't they have that a year ago?] (via the YDN Blog)
• The Yahoo User Interface javascript library has been bumped to 2.5.2 — DataTable users can finally take out that mess of patches, and they’ve added support for Firefox 3.0RC1 and Opera 9.5b2. (via YUIBlog)
• BrowserPlus looks to be a promising way to bring in some of the goodies that Firefox has made available for years (and that WebKit is fast catching up to). Now if they’d just do a public release, there’s way too much in there I want to use.
• Oh, and Douglas Crockford has a new book out. Javascript: The Good Parts looks to be all kinds of useful — I’ll post a review as soon as I lay my hands on it. If you’ve not watched them, I can’t recommend the series of training videos he did a year or so ago highly enough.