Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/mailtoharshit/polyforce

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
https://github.com/mailtoharshit/polyforce

Last synced: 2 months ago
JSON representation

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

Lists

README 

        
# PolyForce

## Using Polymer components with Visualforce 



# Table of Contents

 

* [Quick Start](#quick-start)

* [Supported Attributes](#supported-attributes)

* [Related Resources](#related-resources)

* [Contributers](#team-members)



# Quick Start

To run in your browser two easy steps :



Deploy this package in your org  --- > 

[![Button](https://raw.githubusercontent.com/afawcett/githubsfdeploy/master/src/main/webapp/resources/img/deploy.png)](https://na17.salesforce.com/packaging/installPackage.apexp?p0=04to00000003EDJ)



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



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

   

   ```

      

   ```

2. Start using them : Listing some sample charts types

   

   ```

   ##Sample Donut Chart : 


    

   ```

![ScreenShot](http://i32.photobucket.com/albums/d22/Harshit_Pandey/piechart_zpsb49e85a3.gif?t=1412410188)



  ```

   ##Sample Pyramid Chart : 


    

   ```

![ScreenShot](http://res.cloudinary.com/hzxejch6p/image/upload/h_372,w_1024/v1410681362/pyramid_utc8o8.gif)



  ```

   ##Sample Pie Chart : 


    

   ```

![ScreenShot](http://res.cloudinary.com/hzxejch6p/image/upload/h_370,w_1024/v1410679705/donut_chart_ykc9cz.gif)



   ```

   ##Sample Bar Chart : 


    

   ```

![ScreenShot](http://cdn.makeagif.com/media/9-27-2014/fZi0zb.gif)



  

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



   ```

   

     

    

    

    

  

     

    Sample Donut Chart : 


    

   ```

   

   

###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](https://static.dyp.im/3ZqKwf9WDS/20b9628e26be22cf4180aaccb7afbd55.gif)](https://www.youtube.com/watch?v=67FjSemJ7uQ&feature=youtu.be)



   3. Salesforce Mobile UI/ Polymer Package official library - https://github.com/ForceDotComLabs/mobile-ui-elements

   4. What is Polymer : Presentation by Eric Bidelman 

   5. What is a Webcomponent : http://webdesign.tutsplus.com/articles/how-to-create-your-own-html-elements-with-web-components--cms-21524

   6. Sharing Polymer Component : http://code.tutsplus.com/tutorials/sharing-polymer-components-part-2--cms-21497

   7. Interacting with Google Service with nothing but just HTML using Polymer 

      [![ScreenShot](http://i32.photobucket.com/albums/d22/Harshit_Pandey/ScreenShot2014-10-04at34714AM_zpsf69275ff.png)](https://www.youtube.com/watch?v=eORqFaf_QzM)



 

# Team Members

* "Harshit Pandey"  

* "Martin Mayer"  - Linkedin : http://www.linkedin.com/in/martinguillermomeyer/

* "Akhilesh Gupta" 

* "Lauren Grau" 

* "Avinava Maiti"  



[![Analytics](https://ga-beacon.appspot.com/UA-55449664-1/mailtoharshit/PolyForce/blob/master/README.md)](https://github.com/igrigorik/ga-beacon)