Category Archives: Web Technology

Articles related to Web Technology like HTML, PHP, JavaScript, JQuery

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

Pagination, Searching and Sorting of Data Table using AngularJS

We have already discussed “Basics of AngularJS” and “Simple Searching and Sorting“. In this article, we will add Pagination feature also to our previous example. What makes difficult is Sorting result when values are returned from Search and pagination is enabled. Unlike previous post we cannot use standard “OrderBy” filter provided by AngularJs framework, this time we have to create Javascript function inside Controller for Sorting purpose.

Prerequisite Libraries :

  1. UnderscoreJs
  2. Bootstrap CSS
  3. AngularJs

This post used “Custom Service”, so please read this article to understand Dependency Injection in AngularJs.

Searching Sorting and Pagination in Table using AngularJS

Searching Sorting and Pagination in Table using AngularJS

Continue reading

Dependency Injection in AngularJs

In this series, we have gone through many articles on AngularJs. This time I will discuss about Dependency Injection in AngularJs .

Dependency injection is a software design pattern that allows the removal of hard-coded dependencies and makes it possible to change them, whether at run-time or compile-time.

Before going to DI first we have to know about Service.

What is Service , factory or Provider in AngularJs?

They all are same, with different way of writing. This (Singleton design pattern) defines dependency between your controller and View through application.
We can Inject a service in Controller, which will watch over changes automatically and change its View as per required.

We have many inbuilt standard service available like $scope, $filter. All inbuilt services in AngularJS starts with this sign $. In same way we can create our own custom service and then inject in Controller. Continue reading

Table with Sorting and Searching using AngularJS

I hope, from last article you got basic information about AngularJS. This time, I will demonstrate how to add basic Searching and Sorting capability to data table using AngularJs.

Output will look something like this :

Searching and Sorting in Table using AngularJS

Searching and Sorting in Table using AngularJS

Prerequisite Libraries :

  1. UnderscoreJs
  2. Bootstrap CSS
  3. AngularJs

Continue reading

IndexedDB – Client Side Database

One of many features of HTML5 is capability to store data on client machine with the help of “Indexed Database API“. Using this technique web developers can add offline capabilities to their application. Currently almost every modern browser supports “IndexedDB”.

Unlike traditional RDBMS, IndexedDB doesn’t have table or columns which supports SQL. In RDBMS, it is very hard to change structure of table once schema is decided. IndexedDB actually stores object which can be of any type. Store Object in IndexedDB and process inside Javascript, it is that simple. Every object needs to have unique Index which makes it accessing faster and efficient. Before IndexedDB, we had “Web SQL Database“. However W3C announced that it is depreciated, still few browsers continues support for Web SQL.

Lets start with Example on Indexed DB :

Very first step in IndexedDB is opening database. Below Code Sample will explain the process.

Continue reading

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

Client side Templating using Underscore.js and JQuery

Recently, I ran into requirement where I was getting JSON response and needed to render it on my Mobile application. I had two Options, Server side processing and Client side Templating. I studied and checked both way ; came to conclusion on using Client side Templating. There are many plugins and libraries available however there is one which stands different, easy to use and faster as compared to others which is “Underscore.js“.

Underscore.js library needs JQuery as prerequisite. You can find complete documentation here, Only remember following three points :

  1. <% %> – to execute some code
  2. <%= %> – to print some value in template
  3. <%- %> – to print some values with HTML escaped

Example Source code:

Continue reading

How to make WordPress blog faster and minimize CPU Usage

In this article, I will share my personal experience regarding this blog performance and nightmares of disabling website everyday because of CPU Utilization. I tried all my best however I was unable to figure out the cause of high CPU Usage by wordPress. I tried many articles on Google and at last I found some pointers and able to escape from this problem.

This article is specific to my problem only, However I am sure it will help many others also.

I started with ways, which will less impact my blog and will take less time.

1. Disable WordPress Cron Job

This was my first step, disabling cron Job. In most of cases we are not using this feature. Mostly it is used when you schedule some article to publish on some day or time. To disable it, Open “wp-config.php” file and add below line at top of page.

define(“˜DISABLE_WP_CRON’, true);

What if I need this cron job ?

You can easily create a cron Job anytime, by following below process.
a. Log into your cPanel.
b. In the Advanced section, click Cron jobs.
c. Under Add New Cron Job, select the time interval. It is recommended not to add time interval less than 15 minutes.
d. Set the cron command to the following, replacing yourwebsite.com with your actual domain name:

wget -q -O – http://yourwebsite.com/wp-cron.php?doing_wp_cron >/dev/null 2>&1

The above command tells the Linux server to run wp-cron via wget, which will trigger the wp-cron.php script to do it’s job on your schedule instead of on each page view. This will lessen the amount of processes on the server.

e. Click Add New Cron Job to set the cron.

2. Disable Plugins

Now, Here comes actual reason for WordPress blog high CPU usage. I had many plugins and started to disable one by one. Continue reading

JQuery Based Raffle in Salesforce

Recently i run into very interesting scenario where i had to randomly take name of few contacts. There are many ways to do it but I thought why not to implement this functionality in Salesforce with help of some Javascript? So i came up with this - JQuery based Raffle in Salesforce.

I have created a List View Button, where I select few contacts and using JQuery, One Contact is selected Randomly. Assuming that you already know how to create List View Button, I will share my Visualforce and Controller Extension code with you.

Also, Please note that to run this demo, you need to have JQuery file in your static resource with name “JQueryAndCss”.
Continue reading

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