Google Polymer and Salesforce Visualforce Table

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 Lightening, 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 poly

<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”>


<!– Import bootstrap through CDN –>

<link rel=”stylesheet” href=”//”/>

<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>




<tbody id=”contactTableBody”>

<template repeat=”{{ rec in data }}”>

<tr class=”{{theme}}”>

<template repeat=”{{ field in fieldsReady }}”>

<td >{{rec[field]}}</td> </template>







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,


this.fieldsReady = [];

for (i = 0; i < arrayLength; i++) {





updateChart: function() {

var data = [];

this.$.obj_collection.collection.models.forEach(function(model) {


}); = data;


created: function() {

this.fieldsReady = [];






document.addEventListener(‘WebComponentsReady’, function() {


accessToken: “{!$API.Session_ID}”,

instanceUrl: “https://” + window.location.hostname







# Then create a Visualforce Page : datatable

<apex:page showChat=”false” showHeader=”false” standardStylesheets=”false” >

<script src=”//”></script>

<script src=”//”></script>

<link rel=”import” href=”/apex/forceui_bootstrap_datatable”/>


<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>




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

1 Comment
  1. Salesforce | Saloni
    Saloni 2 years ago

    Keep updating about new updates related to salesforce.

Leave a Reply


We're not around right now. But you can send us an email and we'll get back to you, asap.


About Us

Forcetalks is a Salesforce collaboration platform for coders & developers, geeks & nerds, consultants & business heads, admins & architects, managers & marketers and of course the business owners. A community where you can learn from, where you can contribute to. For you. For Salesforce. Read More...

Copyright 2020 Forcetalks. All Right Reserved.

Log in with your credentials


Forgot your details?