Google Polymer Component for Salesforce List View API

Having worked with +Akhilesh Gupta  and +Martin Meyer on multiple +Polymer assignments, we have done some cool work on polymer and developed some fancy dashboard for big-screen in +Salesforce for in house projects, a dashboard manifesting cool stats on large screen all through latest Polymer components. We wrote many cool components, animated pages and on top of Visualforce integrating latest of Polymer, with its evolving capabilities. 

Recently I wrote a component for generating list view for Salesforce standard objects, in here I'll explain how to built a list-view component but before we proceed, I would like you to read, this post about Salesforce Labs project for Mobile  and Polycharts on Salesforce Blog to get brief idea about, how we have developed a complete library (open-sourced) on top of Salesforce for generating mobile application using Polymer. I am reusing some of the data-components, from this libraries as well and will explain as we move forward.Clearly, polymer is all about reusing components and write minimum code and produce more. 

Salesforce offer listview API , while working one of the application requiring list view, I took standard approach of querying saleforce through Ajax,  and while googling for help, I saw very detailed post written by +Andrew Fawcett  on ListView API and another interesting post by +Karanraj Sankaranarayanan

Components driven models is all about, reusing components, so I thought of writing a Google Polymer Component for Salesforce ListView API that do the same job but with a very little code. 

Using workbench, you easily query all list the view available for a standard objects

List Views : /vXX.X/sobjects/{sobjectType}/listviews

Returns the list of list views for the specified sObject, including basic information about each list view. You can also call this resource for a specific listview entity ID to return information for only a specific list view. 

To retrieve the results on page, using ajax to make call to API as shown below


Now it is fairly easily to convert this into a +Polymer script using Google Polymer API

Now lets define this components and attribute, and the attributes you want to define

Once components are ready, follow the instruction on the Mobile UI Library written by Mobile Sdk Team to play with it.

Create an html or visualforce page to consume component, the component will return the list of values, you can consume it and display, however you want. I recommend reading another example bootstrap table component explaining, how to import and use Polymer Components with Visualforce Pages or simply run this html (pass access-token of Salesforce) on your local machine using either Node.js or any other local server.

Full Github Repository can be access here