Salesforce Remoting & jQuery Drag/Drop Mash-up

Wednesday, February 27, 2013 by Aslam - The Alexendra
Hi All,
Today I am going to show you a good useful mash-up using jQuery Drag/Drop feature with Salesforce Remoting. I have created a simple application where user can see a Dashboard where all Un-Assigned tasks are shown on left side. All available contacts will be available on right side.
Now, user can drag any task from left side list and drop on right side, for any contact. Internally the Task will be assigned to that particular Contact. This is done internally using Salesforce Remoting.
This type of applications are very convenient to use and do the work smoothly.



You can test the application here.
http://labsprojects-developer-edition.ap1.force.com/TaskAssignmentDashboard

Here are few assumptions/points regarding above demo;

1) I have used Contacts to assign the Task but actually we must use Users
2) I have given demo for Tasks, but we can use this application for other useful things like Cases, Leads and Opportunity assignments
3) The demo actually will not update the records in database. I have commented actual database update because of demo purpose. You can only check the drag and drop and assignments.

Mail me if you need the code for above demo.

Your suggestions to improve this app , are always appreciated.

Thanks
Aslam Bari
Posted in Labels: , , , , , , | 142 Comments »

Salesforce JQuery Mobile Demo

Tuesday, February 12, 2013 by Aslam - The Alexendra
Hi All,
Here I am going to show you a demo of jQuery Mobile development which is using Salesforce Sites. Its very easy and convinient to integrate both technologies which is natively compatible with your mobile. It comes with a very cool native look and feel UI, responsive UI themes and APIs. With couple of tags you can build up your site compatible with multiple devices.



Here is a working demo. I am showing contact list from salesforce. You can search contacts. You can click any contact to see the detail.
http://labsprojects-developer-edition.ap1.force.com/JQMContacts

Open web browser in your mobile phone and open the above url to see in action.

If you need source code for above, drop me an email: aslam.bari@gmail.com

Thanks
Aslam Bari
Posted in Labels: , , , , | 19 Comments »

Salesforce Calendar Component - SFC

Wednesday, February 6, 2013 by Aslam - The Alexendra
Hi All,
Recently I had a requirement where a client wanted to show complete year calendar on page with following requirements.

1) We can pass any year to calendar and it must print the complete year (12 month) calendar
2) It must have provision to highlight the holidays
3) It must be printed or saved or emailed as PDF also

To achieve it, i first find the jQuery UI DatePicker best fit. But there is a issue with this approach. JS does not work properly when we do RenderAs pdf in vf pages. So, this approach will not work.
Then finally I come up with my own solution by making native salesforce approach -  SFC Component. Feature for this are as below:

1) We can pass the component year and month
2) We can pass the component holidays list as well


Here is the syntax how you can use this:


<c:SFC_MonthComponent month="7" year="2013"/>

Above syntax will print July, 2013 calendar


<c:SFC_MonthComponent month="7" year="2013" holidays="25,30"/>

Above syntax will print July, 2013 calendar. In addition it will also highlight the 25th and 30th of the month as holidays

You can download the code from here:
http://www.aslambari.com/salesforce_calendar.html

You can see the working demo here
http://labsprojects-developer-edition.ap1.force.com/FullYearCalendar?year=2013

You can change the year parameter from url to see the calendar for different years on the above demo. For demo purpose i have highlighted few dates as holidays (orange color).

In the code, i have used some styles for printing calendar like holidays highlight. You can simply change those style to match up your theme.


The above code is for version 1. As this is native vf/apex, you can simply use "renderAs=pdf" to get the output in PDF format.

In next version , here is my plan to enhance it with following features.

1) Different preset of themes for styling the calendar component
2) Give Event feature for clicking on any date. You can do different operations on that click of any date

As always, your suggestions are welcome to enhance this tool


Thanks
Aslam Bari
Posted in Labels: , , , , , , | 9 Comments »

Simple jQuery Dependent Picklist

Friday, January 18, 2013 by Aslam - The Alexendra

Hi All,
Today I am going to show you how to make dependent picklist on visualforce page with some few lines of code. This is client side dependent list. So it has following benefits:

1) No Action Function or Ajax, means we dont need to call server side script to filter the list of records.
2) Its based on javascript so its fast
3) We can extend the level of dependency



The idea here to use jQuery and one small method to make the dependency. I have got this idea from here.
1) First make your parent select list as below


 <select id="accountList" size="1">    
     <option value="">-Select-</option>             
     <apex:repeat value="{!accounts}" var="acc">                     
         <option value="{!acc.Id}">{!acc.Name}</option>
     </apex:repeat>                 
 </select>
2) Make your child select list. Make sure to give option a class name like this "child_{parent_record_value}". 



 <select id="contactList" size="1">                 
     <apex:repeat value="{!contacts}" var="con">                     
         <option class="child_{!con.accountid}" value="{!con.Id}">{!con.Name}</option>
     </apex:repeat>                 
 </select>
3) Put the below code in your head section


    function prepareList(parent,child,isSubselectOptional){
        $("body").append("<select style='display:none' id='"+parent+child+"'></select>");
        $('#'+parent+child).html($("#"+child+" option"));
        $('#'+child).html("<option> — </option>");
        $('#'+parent).change(function(){
            var parentValue = $('#'+parent).attr('value');
            $('#'+child).html($("#"+parent+child+" .child_"+parentValue).clone());
            if(isSubselectOptional) $('#'+child).prepend("<option> — Select — </option>");
        });
    }
4) Call the below method on load of the page. Make sure to pass proper parent and child select list ids.

$(function() {        
        prepareList('accountList','contactList', false);
    });

Thats it. Now you can see on the page the dependency is created automatically.

You can download the code from here

You can see the working demo here
http://labsprojects-developer-edition.ap1.force.com/DependentPicklist


Thanks
Aslam Bari
Posted in Labels: , , , , , , , , | 8 Comments »

Simple Context-Menu For Web Page

Tuesday, January 1, 2013 by Aslam - The Alexendra
Hi All,
Here I am going to give a demo for how you can make a context menu on your web page using few lines of code. Many times such web applications needed where user can do many operations on different kind of records. In that scenario making lot of buttons or checkboxes are easily avoided if you go with context menu.


Context-Menu


How to implement Context-Menu:

1) Make your context-menu html code and put that at the end of body.


<ul id="menu" class="custom-menu">
        <li><a href="javascript:alert('Clicked Add Notes');"  onclick="addnote();">Add Notes</a></li>
        <li><a href="javascript:alert('Clicked Add Memos');" id="menu_2">Add Memos</a></li>
        <hr style="clear:both;color:#E6E6E6" />        
        <li><a href="javascript:alert('Clicked View Order');" id="menu_4">View Order</a></li>
        <li><a href="javascript:alert('Clicked View Invoice');" id="menu_5">View Invoice</a></li>
    <li><a href="javascript:alert('Clicked View Employee');" id="menu_3">View Employee</a></li>
</ul>

2) Include jQuery main js file, in our case i have used jquery-1.8.3.js

3) Put below code in your head section of html file


<script>
$(function() {
    $(".emp").bind("contextmenu", function(event) {
            event.preventDefault();
            $("#menu").show();
            $("#menu").css({top: event.pageY + "px", left: event.pageX + "px"});
    });
        
    $(document).bind("click", function(event) {
        $("#menu").hide();
    });
});
</script>


Here #menu is Id of your html menu area, ".emp" is the class name of element on which you want to bind this context-menu on right click.

4) Give some good look to your menu, put below code in your head section style tag


<style>
.custom-menu {
    z-index:1000;
    position: absolute;
    background-color:#FFF;
    border: 1px solid black;
    padding: 5px;
    list-style: none;
    width:150px;
    display:none;
}
.custom-menu a{
    text-decoration: none;
    padding:5px;
    font-size:13px;
    width:100px;
    display:block;
    color:#000;
}
.custom-menu a:hover{
    text-decoration: none;
    border:1px solid #ccc;
    background-color:greenyellow;
    
}
.custom-menu li{
    margin:5px;
}
</style>


5) Now, design your web page and give class "emp" to the elment where you want this context menu to open.

Here is working demo:
http://labs.aslambari.com/context-menu/contextmenu.html
Click the names of employee on the page, you will see the context-menu

You can download complete code here:
http://aslambari.com/downloads/context-menu.zip

Let me know your thoughts

Thanks
Aslam Bari



Posted in Labels: , , , , , , , | 1 Comment »

Change Email Utility - Salesforce

Thursday, October 11, 2012 by Aslam - The Alexendra
Hi All,
Here i am introducing one utility created by me. It is used to change the email address of salesforce org. You must have username, password and security token for the org. 




How to access utility?
You can access this utility from my site, here is the url:
http://www.aslambari.com/salesforce_email_utility/

Why and When you need this?
I recently came across one situation when i deadly need this utility. One of my colleague recently setup one new salesforce org. He given his username, password, email for the org. He completed his work and sent me details about username, password, security token as well. After couple of hours, when i tried to login and test from my home, i was unable to login because my IP is not white listed. I called my colleague, but his phone was off, and its DEADLINE for me to give this info to client to show him all the work. My IP was not white listed so i can't login, the email address assigned to org was for my colleague , so i even can't get the activation code. What to do?
Then i thought to create this utility.

Benefits:
You can change email address of the user of the salesforce org. You must know username, password and security token. This utility only send you a Email Change notification. You will get one email. You can accept that verification email change. After that when you try to login from browser using username and password, then you can easily get verification code of the org as your email address is now changed for given org.

Let me know your thoughts on this utility.

Thanks
Aslam Bari
Posted in Labels: , , , , , , | 12 Comments »

OAuth Token as Salesforce SessionId in SOAP API (PHP)

Sunday, October 7, 2012 by Aslam - The Alexendra
Hi All,
Most of the time developers who write applications in php/java or any other language, using salesforce soap APIs (partner wsdl or enterprise wsdl), they hard-code the username/password and security token in their code or in a property file. But there is one issue in this approach, anytime, if your org password or security token get change, your application may down. You have to update the credentials in your code or property file on server to get your application work.

One alternate solution for this issue is to use OAuth token in your code and write one automated code which will refresh your oauth token whenever it gets expired. The approach which i am going to tell in few moments has a benefit that you don't have to modify your code much. The place where you setting your sessionid, you just need to change that place, instead of getting sessionid from login method, you simply need to change with oauth token way.

Here is a complete process to achieve this:


1) Go to your org, Setup->Remote Access, make New remote access entry there for your application. Give return url for the file which will get oauth code returned. In my example, i used this url
http://localhost/oauthsample/tokenprint.php




You will notice that you will get Consumer key and Consumer secret.

2) Make one php file at this location oauthsample/tokenprint.php with below code. The purpose of this code is simply print the oauth code.

<?php
var_dump($_REQUEST);
?>


3) Now use your browser, prepare this url and invoke from address bar of browser

https://login.salesforce.com/services/oauth2/authorize?response_type=code&client_id=<your_consumer_key>&redirect_uri=http://localhost/oauthsample/tokenprint.php
 

As soon you invoke this url, you will see the generated oauth code on screen, copy the "GENERATED CODE" from the browser window.

4) Now use following html code, run it in your browser, by simply double click, fill the values in each field.


<form method="post" action="https://login.salesforce.com/services/oauth2/token">
<input type="hidden" name="grant_type" value="authorization_code"/>
<table>
<tr>
<td>
GENERATED CODE
</td>
<td>
<input type="text" name="code" />
</td>
</tr>
<tr>
<td>
CONSUMER KEY
</td>
<td>
<input type="text" name="client_id" value=""/>
</td>
</tr>
<td>
CONSUMER SECRET
</Td>
<td>
<input type="text" name="client_secret" value=""/>
</td>
</tr>
<tr>
<td>
REDIRECT URL
</td>
<td>
<input type="text" name="redirect_uri" value="http://localhost/oauthsample/tokenprint.php"/>
</td>
</tr>
</table>
<input type="submit" />
</form>











5) After you execute this, you will get xml output on screen something like this:




Here you will get two important things, one Refresh Token and second "access token".

6) Now, in your PHP/Java code you need to replace your session id with this access token. There is another thing in your code "server url", this you need to hard code something like below (make sure to use instance url of your org) : 

$mySoapClient = $sfConnection->createConnection('partner.wsdl');
$serverUrl = "https://ap1.salesforce.com/services/Soap/u/25.0/00D90000000Abcd";
$sessionId = "<<ACCESS TOKEN>>";
$mylogin = $sfConnection->attach($serverUrl, $sessionId);



7) Now, how to deal with expired token? For that you need to either make a separate method for it, or simply you need enclosed you code in try, catch block and look for INVALID SESSION exception. That exception will come whenever you try to access server contents and your token is expired. So the idea is, whenever that happen , simply catch that exception and use below code to get new access token. In below code, simply replace the different fields with your org info like consumer key, secret and important "REFRESH TOKEN" which we got in step #5.


<?php

function getNewToken(){
    try{
        $url = 'https://login.salesforce.com/services/oauth2/token';
        $fields = array(
                                'grant_type' => "refresh_token",
                                'client_id' => "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
                                'client_secret' => "xxxxxxxxxxx",
                                'refresh_token' => "xxxxxxxxxxxxxxxxxxxxxxxxxxxx"
                        );


        foreach($fields as $key=>$value) { $fields_string .= $key.'='.$value.'&'; }

        $ch = curl_init($url);

        //set the url, number of POST vars, POST data
        curl_setopt($ch,CURLOPT_POST, true);
        curl_setopt($ch,CURLOPT_POSTFIELDS, $fields_string);
        curl_setopt ($ch, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);

        //execute post
        $result = curl_exec($ch);

        //close connection
        curl_close($ch);

        $json_a=json_decode($result,true);

        return $json_a;
    }catch(Exception $e){
            var_dump($e);
    }
}
?>
You can simply call this method getNewToken() to make new token whenever needed.

You are now all set, now you don't have to worry about user credentials updation or revealing it.

Let me know if you face issue in any step.

Thanks
Aslam Bari
Posted in Labels: , , , , , , , , , , | 19 Comments »
Subscribe to: Comments (Atom)