Wednesday, January 28, 2015

Integrating Google Polymer with VisualForce - Salesforce


I am making myself busy in learning Google Polymer since last 2 weeks. Believe me, Google Polymer is the future, not because of it is developer by Google, because of it's Web Component development style.

Today morning, I was trying to integrate Google Polymer with VisualForce. I searched in Google, but there was hardly any stuffs how to integrate Google Polymer with VisualForce. So I thought why not document the basic steps with a Hello World example to demonstrate the integration of Google Polymer with VisualForce.

Let's start -

Step 1:
Download Google Polymer on your machine. Please refer my previous blog post to understand the procedure.

Google Polymer - How to install

Step 2:
Once you download the polymer, you will find a folder named "bower_components". Compress the folder with the name "Polymer.zip". (Note: you can choose any name here :-))

Step 3:
Upload the Polymer.zip as static resource in your development environment as shown below -

Step 4:
Create your web component(New VisualForce Page) with Label: Hello-World, Name: Hello_World
<apex:page contentType="text/plain">
     <link rel="import" href="{!URLFOR($Resource.Polymer, '/bower_components/polymer/polymer.html')}"/>
     <polymer-element name="Hello-World" noscript="true">
        <template>
            <p>Hello <b>SUDIPTA DEB</b> from Google Polymer Web Component</p>
        </template>
    </polymer-element>
</apex:page>
Note: Created web component "Hello-World".

Step 5:
Create the VisualForce Page(testHelloWorld) to refer the Web Component as shown below -
<apex:page >
    <script src="{!URLFOR($Resource.Polymer, '/bower_components/webcomponentsjs/webcomponents.min.js')}"/>
    <link rel="import" href="/apex/Hello_World"/>
  
    <body>
        <!-- Declare the web component by tag -->
        <Hello-World></Hello-World>
    </body>
</apex:page>
Note: In the body section, I just referred web component by name. Before that I just imported the previously created web component file named "Hello_World".

Step 6:
Now when you check the page, you will find - 

Great!!. So finally we have successfully integrated Google Polymer with VisualForce. Now it's time to explore both the sea - Google Polymer and VisualForce.




1 comment:

  1. The blog gave me idea to integerate google polymer with visual force and salesforce My sincere thanks for sharing this post and please continue to share this post
    Salesforce Training in Chennai

    ReplyDelete