Salesforce – Drag and Drop File Uploader Component with Progress Bar – HTML5 and Pure Javascript Based

HTML5 Drag And Drop File

HTML5 based Drag And Drop File

You may find many ways to upload attachments in Salesforce using visualforce however most of them uses some Javascript libraries (means either you need to depend on static resources or add CDN in remote site settings) or they do not have progress bar or they are not drag and drop. I thought to create one simple Visualforce component which can show progress bar and have drag and drop capabilities.

Initially i gave though to use visualforce remoting however challenge was how to show progress bar and same challenge was with custom controller or extension also. So, i decided to create one simple Apex REST API to upload attachment.

Continue reading

Salesforce FAQ – Part 19

181. Lets consider your custom Object named “Training__c” has field “Trainer__c”. You have set some default value in that field. Will that default value apply to new record created by apex code ?
OR
How to make sure that record created from apex code should respect default value of fields ?
OR
Default value in field from Apex code.
Ans :

After API 20, it should automatically populate However there is known issue for same here, click here if it impacts you.
Workaround :
If Default value of field is not getting populated by Apex then we have to use “Dynamic Apex”.  Create instance of object from sObjectType like shown below:

Training__c tr= (Training__c) Training__c.sObjectType.newSObject(null, true);

//Check if Value in field "Trainer__c" is default value
System.assertEquals('Jitendra', tr.Trainer__c);

182. What is best practice to refer dynamic custom messages in Visualforce with multi-language support ?
Ans :
Using Custom Label or OutputField or InputField tag, Platform itself will take care of internationalization. However in some cases, Message needs to be dynamic at the same time it should also support muti-language. In Custom Label, we cannot save dynamic String.

Let’s assume we want to show message something like “DEVELOPERNAME is not authorized to access this page”.
Here, Developername should be dynamically changed in visualforce which supports multilanguage. For each developername, it is not feasible to create custom labels. So below workaround can be used :

Step 1 : Create a Custom Label with text “{0} is not authorized to access this page“. In every language, dynamic value should represented by {0}.

Step 2 : In Controller of Visualforce write something like this :

String developerName = 'Some DeveloperName';
String message = String.format(Label.DEVELOPERNA, new String[] { developerName });

Continue reading

Access Camera and Audio recorder of Mobile device in Visualforce and upload as chatter file

In this article we will see how to use Camera and Audio recorder of mobile device in Visualforce and upload as chatter file. It may look that it is very tricky to access device camera and audio control in Visualforce however you may be right if there were no HTML5. Thanks to HTML5 for magic.

Visualforce Camera Access - Front Page

Visualforce Camera Access – Front Page

Visualforce Camera Access - Use Camera Prompt

Visualforce Camera Access – Use Camera Prompt

Continue reading

Why to use Bower for your web developement

What is Bower
It is client side package Manager and Great tool to manage all you web dependencies like JavaScript libraries and other assets.

Bower

Bower

What can be done from Bower
Web sites are made of lots of things — frameworks, libraries, assets, utilities, and rainbows. Bower manages all these things for you.

# registered package
$ bower install jquery

# GitHub shorthand – download repository SOQLBuilder from user Jitendra on Git
$ bower install JitendraZaa/SOQLBuilder

# Git endpoint
$ bower install git://github.com/user/package.git

# URL
$ bower install http://somewebsiteURL.com/script.js

Continue reading

How to use PostgreSQL in Nodejs

I have written many articles on Node.js and AngularJs. In this article, I will demonstrate how to use PostgreSQL with Node.js and deploy on Heroku. I think you already smelled that this is one of starting article which will finally merged with Salesforce to create some cool application.

Assuming you already have some background knowledge on Node.js and Heroku, If not please visit previous articles of this blog or my Slideshare account. Using Angularjs is totally optional and you can use library like JQuery or plain JavaScript.

To connect PostgreSQL, we need “pg” module.

PostgreSQL in Node.js

PostgreSQL in Node.js

Continue reading

Dreamforce 2014 Session – create web based IDE for Salesforce

In Dreamforce 2014, I got chance to present demo of creating online IDE for Salesforce using Tooling API. I used Node.js as a language to communicate with Salesforce API on Heroku Platform.

Demo

  1. Simple Editor
  2. Editor with Ace framework

Complete source code (Github)

  1. Simple Editor
  2. Editor with Ace framework

Dont forget to share your feedback.

Below is the presentation slide I used

Creating Salesforce Query Builder in Node.js and AngularJs using Salesforce REST API and OAuth2 with Heroku Button

In this post, we will be creating a Salesforce Query (SOQL) Builder. It uses Google’s Angularjs MVC Javascript library and REST API provided by Salesforce. For Authentication, it uses OAuth2.

Node.js is used as a primary language and hosted on Heroku. If you want to directly deploy to your Heroku Account, You can use Heroku Button on this Git Repository.

We have many tools available online for Query builder, However none of them were satisfying me so though to create my own tool.

This Node.js application is used for building SOQL with following features :

  • Toggle between API name and Label Name
  • Search Objects or Fileds needs to build SOQL (In my case, it was primitive. I had more than 70 Objects and many of those objects has 300+ fields)
  • Checkboxes to select fields (No need to hold control button to select multiple fields)
  • Automatic Query Builder at Right side of page
  • Shows API count used by application
  • Search returned records
  • Sorting on Table Headers
  • Pagination

Note : You will need to create “Connected App” in Salesforce to allow OAuth as explained in this post.

Live Demo of application

Continue reading

Create Node.js Application using Eclipse and deploy to Heroku – Video Tutorial

In Below video, I have explained how to create basic Node.js application in Eclipse with help of Egit and Heroku plugin and deploy to Heroku.

Please read below two articles, to get familiar of Plugins and how to setup :

  1. Salesforce + Git + Eclipse + EGIT = Better and Distributed Source Control
  2. Creating First Application in Heroku using Eclipse

Continue reading

Resolve Error : Eclipse SSH key is not matching the SSH key(s) that is associated with your Heroku account

We have seen that how to create First Heroku application using Eclipse. However it is possible that after following all steps properly in above article you may receive error saying

the Eclipse SSH key is not matching the SSH key(s) that is associated with your Heroku account. To fix this error, you can: – Associate your SSH key to your Heroku account by going to “Preferences” OR – If the SSH Key is correct, restart Eclipse

Eclipse and Heroku SSH key is not matching

Eclipse and Heroku SSH key is not matching

However, if you will login to heroku, you will find that application is already created. Error is only at Eclipse end. Continue reading

Ajax based AutoComplete / TypeAhead Directive in AngularJS

Previously we already discussed below Auto Complete components:

  1. Ajax Based Multiselect JQuery Autocomplete Control in ASP.Net
  2. AutoComplete Component in Visualforce using JQueryUI

In this article, we will be creating TypeAhead Directive (Auto Complete) again in Salesforce However this time we will use AngularJs. Why we are using AngularJS ? We discussed already in one of article.

Getting Remote Data in JSON format using AJAX from:

To get data from remote source, we are using same code “Visualforce Account_JSON” and “Controller AccountJSONCreator ” explained in this article. Only thing I have added in wrapper class is ID field.

Other than AngularJs, we are also using Bootstrap in this article to make slick UI.

TypeAhead Demo using AngularJs

TypeAhead Demo using AngularJs

Angular Directive :

Directive is great way of declaring your own component and re-use throughout page. write once and re-use every where. Our directive will look like : Continue reading