GroupRows Plugin for jQuery

Demo

Click here to view the demo

How To Use

Download

$("table").groupRows({
  groupColumn: iColumnIndex
});

Options

Option Type Default
groupColumn Integer 0
ignoreFirstRow Boolean True
columnsForGroupRow Integer Array []

Methods

Name Example Purpose
destroy $.groupRows.destroy(table); Remove the current groupings from the table.

Description

This plugin will group the rows of a table together based on a column you specify.  It goes from the top of the table to the bottom and starts a new group whenever it finds new content in the column you specified.

It is useful for making large tables easier for users to scan and understand.  The demo is an example of a long table of steps to perform for certain processes.  Users can group by roles or products to make the table easier to understand.  You could also use additional javascript to auto expand groups based on the statuses of the records in the group.

The “columnsForGroupRow” can be used to display the content of columns from the first record in a group on the group row itself.  An example is showing the subject from every group’s first record on the group rows themselves so users can even more quickly gain an understand of groups.

Advertisements

Console 2 for Salesforce

See a more recent version of this project in the Console 3 for Salesforce post

Introduction

We are heavily invested in the Salesforce CRM platform where I work.  We recently tried to come up with a better way for internal employees to view all the different records related to their work.  This is a summary of the problem and the final solution.

The Console View

salesforce-consoleSalesforce has a special view called the Console view that allows users to view and edit multiple related records in one screen without having to go back and forth between pages.  Users are given a main list of records to work on (assignments, cases, tasks etc.) and as they click those records the related records are loaded in other frames.

The Limitation

A limitation of the Console view is that you can only work with one main listing of records at a time.  Most employees have to work with assignments, cases, tasks, and approval records throughout their day.  If they can only see and work on one main listing at a time, then they might not see new records or updates to records in their other lists.  If they are working on their assignments they can’t see their cases or tasks unless they select a different main listing from the dropdown.

The Research

One of Salesforce’s major new features for its platform is Visualforce, a MVC webpage model driven by the Apex programming language.  This allows developers to create dynamic pages with HTML and server controls much like ASP.NET.  A nice new feature of Visualforce is the enhancedList control which allows you to display a table of records that users can sort, page through, and refresh using Ajax so the page never has to reload.  It is built using the Ext JS library and functions similar to this grid example.

Figuring out how to create a page where user’s could see all the records they wanted to was one part of the solution, another part was figuring out how to manage what list of records users would see.  We did not want to have to create a page for each user.  Luckily, the power of combining Visualforce, Apex, and the Force.com framework is that data from standard or custom objects is available to Apex and can be displayed within Visualforce pages.  This enable us to create a custom object to store which list views users see and allows us to have just a few pages that pull in this data.

The Solution

console-viewThe backbone of the solution is how the data is stored and managed.  We created a custom object named “Console View” to store what list views a user would see for particular tabs.  We could easily identify which user was viewing the Visualforce page by reading their user id from the Apex.  By knowing the userid and what tab they were viewing, we could load the list view id’s.

mytodosUsing Apex, Visualforce, and the new enhancedList control, we were able to create a page that can display 5 main record lists at one time.  This allows a user to view a majority of the main records they are concerned with without having to switch back and forth throughout the day to see if there have been any changes.  Below is a complete list of the benefits and features we obtained from this setup.

Benefits and Features

  • See data from multiple list views at one time
  • See data from general “My” list views available to all users
  • See data from user specific list views that only a single user has access to
  • Page through and sort individual list views without the page refreshing
  • Auto refresh of all list views at a set interval
  • Collapse list views by clicking the title
  • Multiple users can see their specific list views using the same visual force page
  • Clicking a record opens a new window for the record that is headerless and sidebarless

Visualforce Page

Below is the markup for the visual force page shown in the example screenshot.  A great thing about this setup is that you can have multiple visual force pages that can load the same data.  They are basically just template layouts for the enhancedLists controls.

Visualforce Page

Visualforce Resources Page

Below is the markup for the resources page that gets included by the template/layout pages.  This javascript/css is kept in a separate page so all other pages can just include which makes for easier updates.  The javascript uses the jQuery library to find the different elements on the page and to manipulate them.

Visualforce Resources Page

Apex Controller

Below is the controller class for the pages.  It queries the list id’s to use for the current user and tab and then provides the id’s to the enhancedList’s when they request them.

Apex Controller

Create Web Tabs to the Pages

For users to easily access the pages we created Web Tabs that link to pages and pass in their tab name.  This allows users to have multiple tabs (My To Do’s, My Accounts, My Misc etc.) that link to differing pages.  We have to pass in a tab name because Apex can’t automatically read which tab the user is on. Below is an example Link URL to use for a tab.

/apex/Console2Template1?tab=ToDos

Caveats

Below is a list of certain limitations or reasons you might not want to use this setup.

  1. Loading  and refreshing 5 enhancedLists on a single page can cause older computers to crawl.  There is a lot of javascript that runs for them so some computers might not be powerful enough to view the pages practically.
  2. There is a limitation of 5 enhancedLists in one Visualforce page that is enforced by Salesforce so users still might not be able to view everything they’d want to.
  3. A Visualforce page cannot have its tabStyle set dynamcially so you will need to create a Visualforce page for every tab that you want to create.

jQuery Thumbnail Hover Popup for Greasemonkey

Demo

Click here to view the demo

How To Use

Download

$("img").thumbPopup({
  imgSmallFlag: "_s",
  imgLargeFlag: "_l"
});

Options

Option Type Default
popupId String thumbPopup
popupCSS Properties {‘border’: ‘1px solid #000000’, ‘background’: ‘#FFFFFF’}
imgSmallFlag String _t
imgLargeFlag String _l
cursorTopOffset Integer 15
cursorLeftOffset Integer 15
loadingHtml HTML <span style=”padding:5px;”>Loading</span>

Description

This plugin will display a thumbnail’s larger image like a tooltip when you hover over the thumbnail.  I originally made the plugin for Greasemonkey so I could preview larger images on certain sites without having to click to the next page.  It also works great when implemented directly on a site.

This plugin can be used on sites whose thumbnails and larger images have almost the exact same filenames except for one piece that changes between the two.  Here are some example sites, the filename conventions they use, and example userscripts for Greasemonkey:

Size Flickr Vi.sualize.us TinyPic
Small filename_s.jpg filename_m.jpg filename_th.jpg
Medium filename_m.jpg
Large filename.jpg filename_h.jpg filename.jpg
Userscript Userscript Userscript