Javascript based Barcode decoder in Salesforce1 – Very fast and Simple

Very fast and Simple Barcode decoder in Salesforce1 using quaggaJS javascript library

Recently there was a need for Barcode decoder  component in Salesforce1 using Javascript. I tried few libraries like JOB (Javascript Only Barcodereader), this post from Bob Buzzard (it uses JOB library) and QuaggaJS. And after comparing all these, decided to go with quaggajs library because of its speed. Bob Buzzard already wrote very good article on JOB library and I would suggest to try that code as well. You can find same code rewritten for lightning component here.

Quaggajs supports Code 128Code 39, Code 39 VIN, EAN, EAN-8UPC, UPC-E and Codabar format of Barcode.

To run this code you will need 3 static resources in your visualforce page :

  1. JQuery
  2. Bootstrap (totally optional and can be safely ignored) and
  3. QuaggaJs

If you want, below images can be used to try this code. Also, please note – If you are using mobile camera to capture barcode, make sure image is white else this library will not work.

Barcode decoder sample in Salesforce 1
Barcode decoder sample in Salesforce 1
Barcode decoder sample in Salesforce 1
Barcode decoder sample in Salesforce 1

Continue reading “Javascript based Barcode decoder in Salesforce1 – Very fast and Simple”

Getting started with basics of Lightning Component

As you might already know that next big change in Salesforce is introduction to lightning components. As technology is changing rapidly and to take advantage of cutting edge innovations in web technology, Salesforce doesn’t want to stay behind. If we see trend, all major platform has introduced component based design like Polymer, React, Web Components, Angular 2.

We will be discussing basics of Lightning components in this post and how Lightning application, component, controller, helpers and Apex controllers are connected with each other.

Lightning components are based on open source UI framework for web development. Every Salesforce organization already has aura documents available in their instance and can be opened by navigating to http://instance.salesforce.com/auradocs. You can also visit my other blog post explaining FAQ of lightning and Lightning Trailhead module.

In below image, I have tried to explain at high level, how different JavaScript files are related in Lightning components, there are many other parts as well, but I tried to keep it short and simple.

Getting started with lightning components
Getting started with lightning components

Continue reading “Getting started with basics of Lightning Component”

Create and update records using Javascript button in Salesforce- Ajax Toolkit

On this blog we have already seen “how to use Ajax Toolkit to mass update records” without writing any Apex code. In this article as well, we will use Ajax Toolkit to add custom button in Account page layout and update record.

There are endless possibilities and use-cases where this approach can be very useful in Salesforce projects and can be accomplished by Salesforce admins. Lets say we want to create child record on click of button, Update current record on basis of some logic, Update hidden fields, execute existing Apex code using Javascript and so on. All of these can be implemented wthout writing single line of Apex code, Trigger or Visualforce pages.

In this post, we will add custom button on Account detail page and execute Javascript to update Account name using Ajax toolkit. This is just proof of concept and any other field can be updated.

Creating Custom button :

Navigate to “Customize | Accounts | Button, Links and Actions”.

Create new button of type “Detail Page Button” , behavior “Execute Javascript” and content source “Onclick JavaScript”.

Update Record using Javascript

Update Record using Javascript

Continue reading “Create and update records using Javascript button in Salesforce- Ajax Toolkit”

Getting started with React

Author posted by Jitendra on Posted on under category Categories Web Technology and tagged as Tags , , , with Leave a comment on Getting started with React

React is open source Javascript library used by Facebook and currently very popular amongst web developers to create user interface. React can be used as View part of MVC design pattern with powerful templating feature supported by “JavaScript syntax extension (JSX)“. React focuses on component based development where each components has its own life cycle. Once of exciting behavior of React is its unidirectional data flow from Parent to child components. React is different than AngularJs in such a way that React passes data in unidirectional however in angularJs data must be available to $scope variable (bidirectional binding). Reusable components in AngularJs should be created as Angular directive however in React every component can be reused.

React Javascript library by Facebook
React Javascript library by Facebook

In this article, I will show very simple Hello world program using React framework.

<html>
	<head>
		<script src="http://fb.me/react-0.13.1.min.js"></script>
		<script src="http://fb.me/JSXTransformer-0.13.1.js"></script>
	</head>
	<body>
		<div id="main"></div>
		<script type="text/jsx">
			var HelloWorld = React.createClass({
				render : function(){
					return (
						<h1> Hello World</h1>
						);
				}
			});

			React.render(<HelloWorld/> , document.getElementById('main'));
		</script>
	</body>
</html>

Output : Hello World in h1 tag. Continue reading “Getting started with React”

Salesforce interview question related to Lightning framework – Part 20

Salesforce interview questions for Salesforce developers and admin , mostly related to newly released Salesforce Lightning components and applications

191. Why do we still need Visualforce once Lightning will be GA ?
Ans : Visualforce provides the facility for delivering template-driven web pages and email messages. In addition, developers wishing to simply utilize a basic container and maintain more control over the lifecycle of the request may choose Visualforce pages. Finally, organizations that can’t use Apex code can’t use Lightning Components, but they can use Visualforce.


192. What is difference between Visualforce Components and Lightning Components ?
Ans : Visualforce provides the facility for delivering template-driven web pages and email messages. In addition, developers wishing to simply utilize a basic container and maintain more control over the lifecycle of the request may choose Visualforce pages. Finally, organizations that can’t use Apex code can’t use Lightning Components, but they can use Visualforce.


193. Currently, can you show Lightning components tab in Mobile as well in desktop ?
Ans : Currently you can only use Lightning Components in the Salesforce1 Mobile App or a standalone app. Continue reading “Salesforce interview question related to Lightning framework – Part 20”

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 – Drag and Drop File Uploader Component with Progress Bar – HTML5 and Pure Javascript Based”

Getting Started with AngularJs

Author posted by Jitendra on Posted on under category Categories HTML and tagged as Tags , , , , , with 2 Comments on Getting Started with AngularJs
AngularJS by Google
AngularJS by Google

AngularJs is most accepted MVC framework in Javascript developed by Google. In my point of view, If its developed by Google then there must be something new and unique about this library. It can be used to provide MVC architect to your web application. It has great developers community, so if you are stucked somewhere while using this library, you will have tons of supporters.

So what is so special about this framework, other than its developed by Google ?

  • Unlike Backbone and Ember, You don’t have to spend time on Event Handling (Bind, UnBind Events etc).
  • It Works on principal of Dirty Checking.
  • Automatically fires event if something gets changed.

What ? Dirty checking ? wouldn’t it be performance impact on my web application?

You are correct. But Google team has answer for this.

  • AngularJS performance mainly linked to your computer (Client’s Computer) performance.
  • Ergonomical point of view, an HTML page should not have more than 200 fields. More fields will just distract users.

In this article, I will demonstrate how to use AngularJs framework to create simple application. Continue reading “Getting Started with AngularJs”

AutoComplete Component in Visualforce using JQueryUI

In this tutorial, I am going to explain very Simple AJAX and JSON based Auto Complete component with the help of JQuery UI. First I am assuming that you already have Static Resource of named “AutoCompleteWithModal“. This Static resource has all images, CSS and JQuery library needed to implement this component.

In one of my old post, I have already explained that how to generate JSON in Visualforce page. So Considering same article I have create Visualforce page named “Account_JSON” which returns list of Accounts on basis of text entered in input field. Continue reading “AutoComplete Component in Visualforce using JQueryUI”

Create Simple Mass Delete Button for ListView using Salesforce Ajax Toolkit

In Many situation, I needed a Mass Delete Kind of button. Where, i can select records in ListView and simply click “Delete” button.

In this example, we will create a simple List View button and add on “Search Layout” of that object.

Salesforce Mass Delete Button - List View
Salesforce Mass Delete Button – List View

So, create a new Custom Button with following property:

  1. Display Type :  List Button
  2. Behavior : Execute JavaScript
  3. Content Source :  OnClick JavaScript

and use below Source code: Continue reading “Create Simple Mass Delete Button for ListView using Salesforce Ajax Toolkit”

Handling Colon in Element ID in JQuery – Visualforce problem

Resolving the JQuery error when the Element ID contains colon with Live Demo

Today i came across very known problem of jQuery and thought of sharing same with everyone. In Salesforce the element id is in the format of “j_id0:j_id3:j_id4:c_txt“. In previous post we have already discussed about getting the elementId in Visualforce.
When i tried to find the element in JQuery like $(‘#j_id0:j_id3:j_id4:c_txt’), i was getting the error on JavaScript console of the browser. After few searches, i got to know that this is known problem and faced by many of the developers.

Live Demo

Continue reading “Handling Colon in Element ID in JQuery – Visualforce problem”