Skip to content

PolyForce is the project started as an idea with a motive create polymer applications/components that derive data from Salesforce, The idea create a robust set of polymer components that can mutually be shared with each other and on the other hand provide a working sample for developers to learn and get inspired to built more components

Notifications You must be signed in to change notification settings

mailtoharshit/PolyForce

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

87 Commits
 
 
 
 

Repository files navigation

PolyForce

Using Polymer components with Visualforce

Table of Contents

Quick Start

To run in your browser two easy steps :

Deploy this package in your org --- > Button

  1. Open this url -> (your-salesforce-instance)/apex/amchart (example : https://na17.salesforce.com/apex/amchart)

  2. Done

     Note  "platform.js" and "polymer.js" are the libraries for Polymer Framework, and Mobile-UI-Elements is a set of Polymer based Web Components that allow accessing data from Salesforce.
    

##Start using charting component in Visualforce:

  1. Import charting component (installed through unmanaged package) on your page

       <link rel="import" href="/apex/force_ui_amchart"/>
    
  2. Start using them : Listing some sample charts types

    ##<b>Sample Donut Chart : </b><br/>
     <force-amchart charttype="pielegend" sobject="Opportunity" titlefield="Name" valuefield="Amount"       
     limitResults="50"></force-amchart>
    

ScreenShot

 ##<b>Sample Pyramid Chart : </b><br/>
  <force-amchart charttype="pyramid" sobject="Opportunity" titlefield="Name" valuefield="Amount"       
  limitResults="50"></force-amchart>

ScreenShot

 ##<b>Sample Pie Chart : </b><br/>
  <force-amchart charttype="pyramid" sobject="Opportunity" titlefield="Name" valuefield="Amount"       
  limitResults="50"></force-amchart>

ScreenShot

##<b>Sample Bar Chart : </b><br/>
 <force-amchart charttype="bar" sobject="Opportunity" titlefield="Name" valuefield="Amount"       
 limitResults="7"></force-amchart>

ScreenShot

Supported Attributes

We have built chart components that support six key attributes

Charttype : (supported) donut, pie, pielengend, bar, bar_rotate, pyramid, barline
sObject : (supported) salesforce standard object
titlefield : Stirng (fieldname) (x-component)
valuefield : String (fieldname) (y-component)
limitResults: Limit the result (integer)
orderby = DESC/ASC

Visualforce Page for Pie Chart :

<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="{!URLFOR($Resource.MobileUIElements, 'dist/mobile-ui-elements.html')}"/>
 <link rel="import" href="/apex/force_ui_amchart"/>

 <!-- Using charting component after package installation --> 
 <b>Sample Donut Chart : </b><br/>
 <force-amchart charttype="pielegend" sobject="Opportunity" titlefield="Name" valuefield="Amount" 
 limitResults="50"></force-amchart>

###Hang tight for npm and bower package and upcoming components

Related Resources :

  1. How create Polymer Components in miunutes : http://www.oyecode.com/2014/07/google-polymer-create-your-first-custom.html
  2. Design Salesforce UI with drag and drop using Salesforce Polymer Pack for Mobile : Check out embedded video driven by Akhilesh Gupta and Eugiene Oaksman in San Francisco HTML5 meetup at http://www.oyecode.com/2014/07/how-to-use-google-polymer-with.html

Try designer here at https://sfdc-designer.herokuapp.com/ or click image below to check full blown video

ScreenShot

  1. Salesforce Mobile UI/ Polymer Package official library - https://github.com/ForceDotComLabs/mobile-ui-elements
  2. What is Polymer : Presentation by Eric Bidelman
  3. What is a Webcomponent : http://webdesign.tutsplus.com/articles/how-to-create-your-own-html-elements-with-web-components--cms-21524
  4. Sharing Polymer Component : http://code.tutsplus.com/tutorials/sharing-polymer-components-part-2--cms-21497
  5. Interacting with Google Service with nothing but just HTML using Polymer ScreenShot

Team Members

Analytics

About

PolyForce is the project started as an idea with a motive create polymer applications/components that derive data from Salesforce, The idea create a robust set of polymer components that can mutually be shared with each other and on the other hand provide a working sample for developers to learn and get inspired to built more components

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published