Wednesday, June 17, 2009

multiple actions using context menus in rails application

Context menus for a web application ? I know I am not a big fan for context menus either, but if somebody wants it bad you have to put them in, besides it depends on the website's scope.

So all the rails developers are familiar with the scaffold generated tables, with show, edit, delete actions as links to each row.

Now recently Ryan Bates updated his railscasts with multiple edits, which deals with how to edit and update common fields of a two or more "resources" at a time.

And I use redmine as a productivity tool and they have a cool (but very non intuitive) feature of a context menu through which you could do the same, like edit two issues, or change priority of those issues etc.

So here's what I did to get that redmine's context menu functionality with as little pain as possible.

Jquery's context menu plugin + Ryan Bates' multiple edits
and you get

to accomplish above
step 1: Wrap your table in form which posts to a special RESTful action in this case i called it multiple_actions in your template file and put a check_box field before each row. (see Ryan's scre

form_tag multiple_actions_banners_path, :id => 'multiple_actions'

step 2: configure this route in routes.rb

map.resources messages, :collection => {:multiple_actions => :post}

step 3: Define the action in your controller.rb file


  def multiple_actions
unless params[:message_ids].blank?
@banners = Message.find(params[:message_ids])
end
case
when params[:revoke]
revoke_multiple(@messages)
flash[:notice] = "Revoked #{@messages.count} Messages
......
else
end
respond_to do |format|
format.html {redirect_to(messages_path)}
end
end



step 4: Now for javascript , using guide lines from jquery context menu


function initializeContextMenu()
{
jQuery("table.listview tr td").contextMenu({
menu: 'myMenu'
},
function(action, el, pos) {
switch(action){
case 'revoke':
form_submit(action);
break;
case 'clone':
form_submit(action);
break;
case 'delete':
form_submit(action);
break;
case 'destroy':
form_submit(action);
break;
default :;
}
}
);
}

function form_submit(action)
{
if(jQuery("input:checked").length > 1) {
if(confirm("This action will impact multiple messages. Are you sure?")){
jQuery("#submit_type").append(jQuery("<input type='hidden' name='" + action +"'></input>"));
jQuery("form#multiple_actions").submit();
}
}
else {
alert('Select at least one item.');
}

}


Thats it that got me a minimal context menu capability.

Please understand that context menu is mostly eye-candy, because its not very intuitive and not the first thing a user would think of doing in a web browser.
It would be rather more useful if along with context menu we add buttons like in Gmail labs features for "Mark as Read" or "Delete" buttons, that would be very helpful for regular users.

No comments:

Post a Comment