Awesome Salesforce | Creating powerful list for all Salesforce Resource at one place


Awesome list is project initiated by Sindre ranked as most popular person on Github. He created a github page, which list (awesome) resources for Node.js. Later this cought fire and technology dedicated developers started listing awesome pages for their favorite technologies and these are listed on the master awesome-list now.

Salesforce Awesome Page : 
I created awesome page for Salesforce with a few categories to jump start, I would like all developers and salesforce enthusiast to fork it and add valuable link and design better categories. I have created few categories and that are debatable but good at ab-initio.


How can I contribute : 
You can have to make it clean (in other words make it awesome(r) like never before), I created guidelines for contributors to follow a consistent formatting

What resources can I bring in ? 
Primarily git repos, tools, plugins, youtube channel, official twitter channel, shared libraries, blogs and frameworks (if any) and yes please spread this page to your colleagues and spread awesomeness all over


GetMDL.IO | Using Material Design with Salesforce to create beautiful applications

Material Design is gaining pace in the community of UI/UX designers and developers across the globe, I see adaption of material design among Rails/.Net and mobile platform. Clearly salesforce is next big platform to try material apps.

What is a Material Design :


Material is metaphor, it is a design paradigm provided by Google that offer brand new user experience to interact with an application. The colors collection, transition effects, UI components and animations effects. Yes, forget bootstrap, its the time to add more material to your applications.

Where do I find Material Design Libraries ? 

This week, Google have officially launched Material Library (compiled CSS/JS) as stable release under the title 'Material Design-Lite'. I have been building many prototype using Angular and Material on top of Salesforce, before writing a blog post, I learned official annoucement from Google, about material design lite, which is powerful make is super easy to design powerful, interactive application on top of Salesforce.

How does the Material Applications look like ?

I believe this video embedded below, says more than words created by google, this video demonstrates the experience of material design and will make your re-think before you jump on designing your next project. 

Who is using this design paradigm already ?

Checkout the Android Application store here to know, if you are already late in adoption

What is Materialize, is this Bootstrap Killer ? 




Yes, it can potentially, but I do not say its a killer but it will make your rethink the way you design your application and if you are considering bootstrap, this is must try.



Let's  jump start with Material Design with Salesforce


Import library from CDN (note the compiled library which is just 27kb extremely lightweight than Bootstrap) and you can refer to them easily from here. I have uploaded this library in the 'Feather Repo' so it can also be referenced from Github as CDN (learn how)

You can refer Feather Github Repo. 
Just add the following <link> and <script> elements into your HTML pages (27kB gzipped):

<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.indigo-pink.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">



Salesforce Remote Object to populate material table


Let's design a page with sidebar and header panel, and pull records on click of button using Salesforce Remote Objects 

<body>
  <!--Query Salesforce using Javascript Remote Objects-->
  <apex:remoteObjects>
    <!--Name the field you like to query-->
    <apex:remoteObjectModel name="Account" jsShorthand="acc" fields="Id,Name,BillingState, Phone" />
  </apex:remoteObjects>

  <!-- Always shows a header, even in smaller screens. -->
  <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
    <header class="mdl-layout__header">
      <div class="mdl-layout__header-row">
        <!-- Title -->
        <span class="mdl-layout-title">Salesforce with Material Design</span>
        <!-- Add spacer, to align navigation to the right -->
        <div class="mdl-layout-spacer"></div>
        <!-- Navigation. We hide it in small screens. -->
        <nav class="mdl-navigation mdl-layout--large-screen-only">
          <!-- Accent-colored raised button with ripple -->
          <button id="pullbutton" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" onclick="DML()">
            Pull Accounts
          </button>
          <a class="mdl-navigation__link" href="http://www.oyecode.com">Back to Article</a>
        </nav>
      </div>
    </header>
    <div class="mdl-layout__drawer">
      <span class="mdl-layout-title"></span>
      <nav class="mdl-navigation">
        <a class="mdl-navigation__link" href="http://www.oyecode.com">Oyecode Home</a>
        <a class="mdl-navigation__link" href="">Material Forms</a>
      </nav>
    </div>
    <main class="mdl-layout__content">
      <div id="loader" class="mdl-spinner mdl-js-spinner is-active pre-loader"></div>
      <div id="content" class="page-content">
        <div class="demo-grid-1 mdl-grid">
          <!-- Your content goes here -->
          <div class="mdl-cell--12-col">
            <table id="summaryOfResults" class="mdl-cell--12-col mdl-data-table mdl-js-data-table mdl-shadow--2dp">
              <thead>
                <tr>
                  <th style="text-align:center">Name</th>
                  <th style="text-align:center">Billing State</th>
                  <th style="text-align:center">Billing City</th>
                </tr>
              </thead>
              <tbody>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </main>
  </div>
</body>

</html>
See the Pen Qbrgjw by Harshit Pandey (@oyecode) on CodePen.


Result : Click to pull account or access live Visualforce Page here




Introducing Project Feather

A collection of material design mockups designed on top of Force.com Platform



I have been developing lightweight page templates that uses material design on top of Force.com Platform. Project feather is open source repo, where ill add collection of material templates to be shared with community. Please feel free to contribute and fork this repo and share your cool ideas to awesome salesforce community.



Can Github be CDN for Salesforce Projects ?


Salesforce Static Resources

Salesforce have came a long way through but, I still find there are areas in the world of force.com platform where massive facelift needs to be done and one of the most challenging corner is the 'static resources' in Salesforce. Every-time, you have to upload your static files (like say javascript/css and other files) to Salesforce even for making a minor change. I always felt a need of private CDN (Content Delivery Network) option from Salesforce and I hope Salesforce will focus a better solution to make steps easy for developers, so that they avoid repetitive job of uploading code.

Hunt for CDN to share resources

Clearly we know, Salesforce static resources are secure as they are shielded by Force.com Platform security channel, but if we deal with some shared resource which are common and shared by multiple applications, in this case, I always look nothing better than Github Itself, as pushing my code to is painless.

Can Github be my CDN ?

Unfortunately, you cannot deliver files in your application directly from Github (supported by Content-Type) but there is solution to the problem. Use RawGit to access your Github resources.
Have you ever wanted to access Github file resource directly as static hosted files but weren't able to ? Well RawGit give you a way to take the URL reference for any Github resources and make it properly accessible by web browser or client application. RawGit offer both url for you, to be consumed for production and sandbox, you can generate both the endpoints. It provides a proxy that maps the HTTP (Content-Type) in the header to file type, so that it can be loaded properly.

Since RawGit can generate both sandbox and production url endpoints for them, but make sure you understand the difference in them and this service is CORS enabled at the same time.

Creating CDN files from Github is simple and three steps process

  • filter_dramaStep 1: Grab your GitHub Public Repo URL
    https://github.com/mailtoharshit/Fabric/blob/master/css/style.css
  • place Step 2: Go to Rawgit and paste the url

  • whatshot Step 3: Import generated url in your application


Start using CDN in your Salesforce Projects Easily




Google Polymer 1.0 | Now ready for Production

Google Polymer is production ready now  


Before Polymer provided two class of components (core-elements) which were skeleton components that cover head/body/foot of pages covering structure of the application. Another set of components were paper-elements which was designer class of components supported by Google Material Design standards.
With Polymer 1.0, Google have clearly classified components in seven different categories which makes it easy for developer search and look for right components. The core-elements are now called as Iron-elements, click the picture below to go custom elements page.





Polymer 1.0 is written to be fast and lightweight in nature is thirty five percent (35%) faster than early developer preview release and require three times less coding. Polymer replaced the old shadow dom polyfill with new Polymer Shim which is very lightweight, it has new styling of data-binding which lets the user to write significantly less code and produce more results. With Polymer 1.0 the components have mechanism of sharing behavior between them, now they respond to cross events smoothly like never before.Below is the architecture and model of how the Polymer components works together with existing framework






In Google I/O,  Google have launched stable release of Google Polymer, this time, Google have broadly categorized components which (almost) every web application need. Google divides them into groups: Iron Elements, Paper Elements, Google Web Components, Gold Elements, Neon Elements, Platinum Elements, and Molecules.

Iron Components


Iron Elements is a collection of basic elements. These basic elements are what we normally use to build a web page such as an input, form and image. The difference is Polymer adds some extra powers to these elements.
Iron elements are all prefixed with iron-, for example <iron-image>, which is used to display an image. The <iron-image> element has been equipped with some extra attributes that we cannot apply in the regular <img>element. We can, for example, add preloadfade, and placeholderattributes.
Google Web Components 
 The Google Web Components are special elements that deals with  google services such as Google Maps, Youtube and many more. Elements in this group make interacting with Google services just a few lines away.
The following is an example to show a Google Map using the <google-map>element.

Youtube Element offer one line code to integrate with youtube to any page, with lots of fancy attribute to support manipulation with youtube embedding, including chrome-less player



    Paper-Elements
As Google introduces Material Design, to add material element, simply add <paper-material> element. Primarily paper element are supported by two key attributes 
  • elevation  to lift the shadow and enforce elevation
  • animated  to apply the elevation changes



How do I get started ?

Read here, to learn how to start with your first polymer project. You have to make sure you have bower (package manager) installed. Bower download all components for your to jump start and download all dependencies.
bower install --save Polymer/polymer#^1.0.0

After successfully download,  import webcomponents.js in your project and then start importing html components as needed in the project.


Project Fabric : (In Progress)

Over the period of time, I decided to built a library manifesting collection of Polymer Components to showcase the usage. I am open for developers to fork it and jump start on project and please commit if you want to add a new component to showcase. At the same time, stay tuned for Salesforce component collection built on top of Salesforce, which will be released fairly soon as a new project. Start playing with Github here 


Polymer Editors : 

Google Chrome Developer Editor

Google I/O In the development phase at the moment, but the chrome developer editor is powerful IDE release by Google and I find this IDE to be powerful from chrome application developments (like web app and chrome extension) but now chrome IDE supports Polymer Projects and comes with implicit servers




Ele : Online WebComponents Builder 


A powerful online and beautiful tool for building HTML component online, wired to support Polymer at heart.


Official Polymer Builder :


As I described in the previous post before, Google Provides official builder that leverage drag-drop facility to web-components, get started here


Polymer Starter Kit :

In Google I/O, Polymer Team launched Polymer Starter Kit, for newbies to play with Platform. It is quick and easy and comes with three packages, focusing on beginner, intermediate and for yomen user. If want to learn how to use Yomen, here my pervious post here.




PolyCast : Official Polymer Youtube Channel :

I also recommend following these coolest of channels shown hereStay tuned for more update on Polymer with Salesforce in coming releases !!

Mapbox - Design Beautiful Mobile Friendly Maps for your Salesforce Applications

Maps are powerful way of presenting data, these days maps are consumed across all platform and by many applications. Data representation with Geo information becomes most valuable when shown beautifully on map. While dealing with the map application, you have to make sure the script used behind the application is not heavy weight in nature and offer seamless integration. To design one application for desktop and mobile, adding responsiveness in your application is another overhead that developer go through.

In my last post, I talked about multiple ways to integrate Google Map with Salesforce specially focusing on goole map v3 release, though I find google map v3 to be slick, but doesn't offer massive customization that change the end user experience completely.


In the Salesforce ecosystem, I love to overwhelm the end users my presenting geo-data on map and fortunately I have worked with many clients who needs this kind of information and have studies widely google map, bing map to other libraries.

Recently, I stumbled upon, a coolest of mapping tool called Mapbox, that offer powerful and fairly very lightweight, mobile ready maps and same time allow heavy customization and myriad themes to consume.

Mapbox comes with a design studio, which lets you chose from fancy collection of themes with powerful customization. Let us go in details,  and see what mapbox offers



Loading a basic Map on Mapbox

Go to +MapBox and create your free account to play with library. Once you generate your public api token, you can fork the snippet below to create or load your basic map

Loading Animated Marker : Example Flying Aeroplane

If you want to display a moving marker, demonstrating path, its easy and fancy


Beautiful Direction Search on top of Map


Map Design Studio 


Map design studio are available in both desktop client (more powerful) and online version, the edge of mapbox over google maps is the unique user-experience it offer which looks slick, clean and professional than regular google maps.


With designer studio online, you can instantly chose themes and import your csv files when data resources is static and upload to put markers. Once uploaded the online studio generates links and code to embed on an html file in run time


GeoCoding API 

MapBox offer, GeoCoding API, both forwarded and backward Geocoding, which mean that you can get geocode (latitude, longitude) for a given an address, and vice-versa

Below is a sample api request I sent with a valid token 
http://api.tiles.mapbox.com/v4/geocode/mapbox.places/1600+pennsylvania+ave+nw.json?access_token=pk.eyJ1IjoibWFpbHRvaGFyc2hpdCIsImEiOiI0NWM5NTMwYTFkMDgzNGJkMzBjOTQzYjk3NWQ1NjQ4NiJ9.P7bq4kbNHZdBdg62o7Rv1Q




In the similar fashion, you can ask for reverse geocoding and proximity of a given location, which is cheaper in comparison to google maps.

Forwarded Geocoding with Proximity

http://api.tiles.mapbox.com/v4/geocode/{dataset}/{query}.json?proximity={longitude},{latitude}&access_token=<your access token>

Reverse Geocoding 

http://api.tiles.mapbox.com/v4/geocode/{dataset}/{lon},{lat}.json?access_token=<your access token>


Mapbox with Salesforce 1 Mobile Application

I have developed a sample application below, hosted a public site on force.com. The map embedded on this page is responsive in nature and tested on Salesforce 1 application

Here is direct link to the page : http://polyforce-developer-edition.na17.force.com/


I also tested this public url on screenfly.com to see check multiple devices here. I hope to see more fancy application coming on top of Salesforce using Mapbox in near future and will keep posted about my experiments with library

PS : Image credit to Mapxbox


Visual Studio Code | Powerful IDE now available for Mac

In my career as a developer, I have came across wide range of IDE's and among all I find Visual Studio to be one of the most completed and graduated development tool available for developers. Visual Studio was limited to Windows Platform and and was made available to Mac system with the help of project Mono (open source, cross platform framework), that allow you to program in C# on top of Mac machine.Though, you can program using .Net Framework, but at the same time, you have to compromise the smoothness and richness of Visual Studio IDE.


Recently, Microsoft have released their fancy, slick and cool IDE for Mac/Linux world as Microsoft Code. This IDE offers a very rich experience for developer on Mac/Linux platform, interestingly, this IDE is released a part of Visual Studio Family by focusing not only on Microsoft .Net framework but also to support Node. JS at the same time


They both allows you to connect with Visual studio online for future proof architect like (Git can be local as well) but source repository connection like (GitHub)Visual Studio online allows offer features like continuous integration, overall performance monitoring and Team Foundation Server with free up-to 5 developers on one account.



I like the approach Microsoft is taking towards openness in IDE, this will open up best of two worlds for developers. 







.Net Framework 2015 as Open Source and Component Driven

.Net is available as .Net Core, which is modern, support component driven architecture, and allows you ship private version of .Net Core which changing your application behavior. At the same time new CLR (Common Language Runtime) like JVM in java will be release for Mac/Linux and Windows

ASP.Net will work everywhere now

ASP.net will be available to all machines, check open source project at Github. Likewise Node.js, ASP.Net will be offered with web-server for Mac and Linux

Plugins available for your favorite editor(s)

Microsoft developers community have started a group/organization called OmniSharp  which is  dedicated to develop plugins that offer intellisense to your favorite editor(Sublime Text, Atom, EMac) to name a few,


Growing Salesforce Relationship with Microsoft 

While working at Salesforce, I got opportunity to see and participate on many fledgling open source Microsoft projects which are public now. Specially loving the work by my friend and  former collegue Eugene Oaksman for developing Salesforce Mobile SDK for Windows and my all time favorite Wade Warner (who left Microsoft as chief of Evangelist, Joined Salesforce build insanely cool tools and joined Windows Azure Team back in Microsoft) his work on building Force.com Toolkit for .Net is remarkable

Recently Salesforce have released the Salesforce Services for Microsoft Visual Studio, which is an extension for Visualforce IDE that lets you access Salesforce REST API,  add .Net NuNet library and configure connected application OAuth Endpoints.




Below is the video in action recorded by Wade Warner all credited to him and Salesforce.com Inc, demonstrating Salesforce Integration using Visual Studio, read his full blown blog post here by +Dave Carroll 

There are few more interesting articles I recommend reading on hottest trending subject both on Salesforce and Odata connector and Accessing SQL Server Azure Database with Salesforce using Salesforce Lightning Connect written by +Mohit Srivastav here  and here and on official blog by Sara here

Download Visual Studio here to start rocking the stage.

Next Steps

Read on to find out about:
  • Code Basics - a quick orientation of VSCode
  • Editing Evolved - from code colorization & multi-cursor to IntelliSense
  • Debugging - OK time for the really fun stuff - break, step, watch


AngularJs 2.0 or Polymer ? Open Discussion and Views



+Mohit srivastav and I have written couple of years back blog of post on 'Getting Started on AngularJs with Salesforce'. Things are matured so much from there on, we have received massive feedback from people and some contribution on changes to make a template from Karthik on Github

What's new about Angular 2.0 ?

I like the new approach from Architects, team have approached carving this new framework by providing documents beforehand, which offer a rare opportunity for developer to understand and participate in Angular from early on.

I'll briefly review the cutting edge subjects, specially what Angular is focused and what new features are introduced or likely be introduced

  • Lose Coupled Components : Angular have detached is module from its core and are released in versions now. NgModules.Org holds vast components revisions. Version 2.0 is now gaining active support from participants.

  • Less Code more Application focus : Likewise Salesforce platform, Angular want's its developer to focus less on code and more on business objective. New annotation and ESC6 now backbone these standards



  • Mobile First Approach : As we see mobile is future, and is biggest potential marketing around the globe, angular team wants the adaption of this framework in the world of mobile development to a massive level. As we know, the mobile is all about improving performance, reducing memory consumption and load time. Improving on these measures will clearly upscale desktop application performance.

Few interesting features that Angular is focused on, are available in many new framework like Polymer, React, Brick and in Salesforce its Aura/Lightning they all offer component driven architecture or approach for development.

Polymer vs Angular 2 ? What's their status relationship ?


Is polymer a framework ? 

Well, effectively its not, basically polymer is more of a library that provides sugar layer of top of web-components which in turn effectively lets you to deal with components smoothly.

Most common question that I keep hearing is,  Will Polymer kill Angular down the line ? If you can answer, let me know your views

Are AngularJs or Polymer related ?

No, they are not, Angular 2.0 is rewritten with intention to support web-components, as we know creating components in Angular directive is relatively complex, while on the other hand polymer make it much easier with their polyfills. Since Polymer adoption is increasing inside google (check google I/O homepage) made on top of polymer and material design, I see polymer had bright future at the same time. Google Chrome team is working closely with Polymer and empowering the relationship in each release cycle.

AngularJs have wide adoption among developers and I believe it is the most graduated javascript framework existing on planet, clearly it needs to be future proof which is component driven model, rewriting is right choice. But few topics that I most interested to see are Dependency Injection, Templating, Anotation, Scaffolding and Touch Routing.

Those in angular snippets below demonstrates few of this topics clearly

Templates in AngularJS 2.0 

@ComponentDirective({
          selector: 'oye-hello',
          template: 'Oye Hello!'
        })

<oye-hello></oye-hello>

Touch Animations 

Angular have provided design documents for touch animation and gestures for devices programming here

Scaffolding 

Likewise Yomen in Polymer (read post on creating polymer apps with Yomen) Angular is working on develop a Yomen for AngularJS 2.0 but at the same time they have tailored workflow for Angular applications available here at NgTrailer


Yes, Angular is also working on Gulp to support AngularJs 2.0

Change Detection 

Polymer offer promising and easy feature for change detection, while Angular is progressing and its own its way to handle this using watchtower.js and zone.js. VictorSavin have written a blog post about change detection on AngularJS 2.0 here.



ESC6 Support 

Angular will be designged to follow ES6 for which you need to transpile. Read more about compiler here. For those who don't know what is ESC6, I recommend watching slidshow by  +Christophe Coenraets here.

Stay tuned for angular updates  and meantime you can check out the video by +Alex Eagle on getting started with Angular2.0 (Googler working on Angular)