Google Polymer And Salesforce Visualforce Table

We all have heard about Salesforce Lightning Framework in a way or other. Component driven development is the hottest trend in the market these days. While Dreamforce launched Lightning, Google has launched Polymer. And using Google Polymer with Salesforce to generate Bootstrap Table Component we can handle and display data Awesomely with a very small line of code. Bootstrap with Google Polymer in Visualforce will let you change the attributes easily and plugin salesforce data with it.

Just link this table components to a custom/standard object in order to generate bootstrap tables to pull data. This is how it looks:

In the image above, I have pulled twelve (12) contact records and listing selected fields and marking them as a success (which turn the table green in bootstrap).

You only need a line of code to do all this magic 

<force-ui-data-table sobject="Contact" fields='Id, Name, FirstName, LastName, Phone, Email' orderby="Name" tableclasses="table-hover" theme="success" limitresults="12"></force-ui-data-table>

_________________________

# First create a Visualforce Page: forceui_bootstrap_datatable

<apex:page contentType="text/plain">
    <link rel="import" href="{!URLFOR($Resource.MobileUIElements, 'dist/mobile-ui-elements.html')}"/>
    <polymer-element name="force-ui-data-table" attributes="sobject fields orderby limitresults tableclasses theme" noscript="true">
        <template>
            <!-- Import bootstrap through CDN -->
            <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
            <force-sobject-collection id="obj_collection" sobject="{{sobject}}" querytype="soql" query="{{query}}" on-sync="{{updateChart}}"></force-sobject-collection>
                <table class="table {{tableclasses}}" border="0" cellpadding="0" cellspacing="0">
                    <thead>
                        <tr>
                            <template repeat="{{ field in fieldsReady }}">
                                <th >{{field}}</th>
                            </template>
                        </tr>
                    </thead>
                    <tbody id="contactTableBody">
                        <template repeat="{{ rec in data }}">
                            <tr class="{{theme}}">
                                <template repeat="{{ field in fieldsReady }}">
                                    <td >{{rec[field]}}</td> 
                                </template>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </template> 
            <script>
                Polymer(‘force-ui-data-table’, {
                    observe: {
                        sobject: ‘ready’,
                        fields : ‘updateFiledsArray’,
                        limitResults : ‘ready’,
                        orderby : ‘ready’ 
                    },
                    ready: function() {
                        this.query = “Select ” + this.fields + ” from ” + this.sobject + ” ORDER BY “+ this.orderby+ ” limit ” + this.limitresults ;
                    },
                    updateFiledsArray: function() {
                        var tempArray = this.fields.split(‘,’), arrayLength = tempArray.length, i;
                        this.fieldsReady = [];
                        for (i = 0; i < arrayLength; i++) {
                            this.fieldsReady.push(tempArray[i].trim());
                        }
                        this.ready();
                    },
                    updateChart: function() {
                        var data = [];
                        this.$.obj_collection.collection.models.forEach(function(model) {
                            data.push(model.attributes);
                        });
                        this.data = data;
                    },
                    created: function() {
                        this.fieldsReady = [];
                    }
                });
            </script>
        </polymer-element>
    <script>
        document.addEventListener('WebComponentsReady', function() {
            SFDC.launch({
                accessToken: "{!$API.Session_ID}",
                instanceUrl: "https://" + window.location.hostname
            });
        });
    </script>
</apex:page>

_________________________

# Then create a Visualforce Page: datatable

<apex:page showChat="false" showHeader="false" standardStylesheets="false" >
    <script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.3/polymer.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.3/platform.js"></script>
    <link rel="import" href="/apex/forceui_bootstrap_datatable"/>
    <body>
        <force-ui-data-table sobject="Contact" fields='Id, Name, FirstName, LastName, Phone, Email' orderby="Name" tableclasses="table-hover" theme="success" limitresults="12"></force-ui-data-table>
    </body>
</apex:page>

_________________________

“The world needs Superman. The team needs Clark, So Be a Clark of Salesforce.”