Showing posts with label aslam. Show all posts

Salesforce Context Menu for list views

Tuesday, May 20, 2014 by Aslam - The Alexendra

Hi All,

This is a quick demo for a utility component. I designed it for standard salesforce list views. Its a kind of context menu which can be opened on clicking of a IMAGE formula field. You can show your useful menu options in this context menu. Each option can have the record id automatically by JS, so that your target page or screen can have proper processing based on passed record id.

How to configure:

Make a IMAGE formula field as given in screeshot above
Upload the menu-resources.zip file available on this url
http://www.aslambari.com/downloads/menu-resources.zip
Make one home page component (HTML type and Narrow side)
Put below code in that component


<!-- include files -->
<script src="/resource/1400648652000/dupedetector__menu_resources/menu-resources/jquery.min.js"></script>
<link rel="stylesheet" href="/resource/1400648652000/dupedetector__menu_resources/menu-resources/menu.css">

<!-- HTML Menu -->

<div class="dropdown-menu" id="dropdown-menu">
<a href="/003?rlid=RelatedContactList&amp;id=" target="_BLANK">
<img src="/resource/1400648652000/dupedetector__menu_resources/menu-resources/application_view_detail.png" />
Sync Contacts
</a>
<a href="/006?rlid=RelatedOpportunityList&amp;id=" target="_BLANK">
<img src="/resource/1400648652000/dupedetector__menu_resources/menu-resources/calendar-disabled.png">
Export Orders</a>
<a href="/005?rlid=RelatedCaseList&amp;id=" target="_BLANK">
<img src="/resource/1400648652000/dupedetector__menu_resources/menu-resources/zip.png"/> 
View Cases
</a>
<div class="break"></div>
<a href="/_ui/core/chatter/ui/ChatterPage" target="_BLANK">
<img src="/resource/1400648652000/dupedetector__menu_resources/menu-resources/connect_light_small_short.gif"/> 
Sync Feeds</a>
<a href="00T?rlid=RelatedActivityList&amp;id=" target="_BLANK">
<img src="/resource/1400648652000/dupedetector__menu_resources/menu-resources/phone.png"/>
Calls History
</a>
<a href="/002?parent_id=001900000054UZ7&amp;id=" target="_BLANK">
<img src="/resource/1400648652000/dupedetector__menu_resources/menu-resources/3668432.png"/>
Box.Net Documents
</a>
<a href="00T?rlid=RelatedActivityList&amp;id=" target="_BLANK">
<img src="/resource/1400648652000/dupedetector__menu_resources/menu-resources/feature_gmail_icon.gif"/>
Google Mails
</a>
<div class="break"></div>
<a href="00T?rlid=RelatedActivityList&amp;id=" target="_BLANK">
<img src="/resource/1400648652000/dupedetector__menu_resources/menu-resources/delete.png"/>
Delete Logs
</a>
</div> 


<!-- JS Part -->
<script>
    function init_sfdc_menu(){
        $('.x-grid3-col-00N9000000A4pIp').click(function(event){
            event.stopPropagation();
            var id = $(this).attr("id").split("_")[0];
            
            $('.dropdown-menu').css( {position:"absolute", top:event.pageY-100, left: event.pageX-30});
            
            $('.dropdown-menu').find('a').each(function(){
                var oldhref = $(this).attr("href");
                oldhref = oldhref.substring(0,oldhref.lastIndexOf('=')+1);
                $(this).attr("href", oldhref + id);
            });
            $('.dropdown-menu').show();
        });
        
        $(document).click(function(){
            $('.dropdown-menu').hide();
        });
    }

    $(document).ready(function(e) {
        $('#bodyCell').bind('DOMNodeInserted DOMNodeRemoved', function(event) {
            setTimeout(init_sfdc_menu(),500);
        });

    });
</script>

Changes:
I have designed this component for just showing how to use this utility, so i have not make it very robust or optimize and have left few hard coded ids few places, but any developer who needs to make it work proper, needs to do following changes in files:

Open the menu.css and change hard coded id "00N9000000A4pIp" to your image formula field id on list view
Change the same id available on component code
Once you uploaded your static resource, you will get one timestamp for that which you can see in my component code few places, you need to change it with yours as well and make sure you provide proper url, for example my url for jquery.js is this:

"/resource/1400648652000/dupedetector__menu_resources/menu-resources/jquery.min.js"

You need to change this url with yours.

Here is a screencast you can see how it works.

Email if for any issue, happy coding :)

Thanks

Aslam Bari
http://www.aslambari.com

Posted in Labels: apex, aslam, Aslam Bari, context-menu, home page component, jquery, list view, option menu, Salesforce, salesforce blog, VF, Visual Force | 12 Comments »

Extend Salesforce Rich Text Editor as Multi-Purpose

Sunday, March 10, 2013 by Aslam - The Alexendra

Hi All,
Recently one of client wants some enhancement to existing 'Send Email' screen. They want some functionalities which standard email editor does not support and even salesforce Rich Text Editor also does not support.
I did some research and found that we can extend standard salesforce Rich Text Editor in many ways. One of the enhancement which I did, I am going to show you all.

Client wants a way to fetch all related contacts and opportunities from current account in the email editor on the place he wants and editable and also wants to control as many times as he needed. To achieve this task, I came up with the custom button solution which can be embedded into standard Rich Text Area of salesforce and can attach some event handlers to them.

I created one component called "AddButtonToolbar". In this component, for demo purpose i have created two custom buttons for showContacts and showOpportunities. But you can make as many as you want. Here is the basic configuration you can do:


<apex:component>
  <apex:attribute  name="accountId" type="string" description="passed account id"/>
  <script src="{!URLFOR($Resource.ckeditor,'ckeditor/jquery-1.4.2.min.js')}"></script>
  <script>
      //Event Handler for ShowContacts button 
      //Fetch and prepares the contact table in editor
      function showContacts(){
              // invoke your sfdc method here
      }
      
      //Event Handler for ShowOpportunities button
      //Fetch and show the opportunities in RTE
      function showOpportunities(){
             // invoke your sfdc method here
        }
      
      /****
          Custom buttons configuration
          Provide name, label, command (js function), and Image for the button
      */
      var config = {
            "Buttons": [
                {
                    "Name" : "Contacts",
                    "Label" : "Show Contacts",
                    "Command": "showContacts",
                    "Image": "{!URLFOR($Resource.ckeditor,'ckeditor/plugins/timestamp/images/16-cube-green.png')}"
                },
                    {"Name" : "Opportunities",
                    "Label" : "Show Opportunities",
                    "Command": "showOpportunities",
                    "Image": "{!URLFOR($Resource.ckeditor,'ckeditor/plugins/timestamp/images/contact.png')}"
                }
            ]
       }
       
       
       function initialize(){
             for(var i=0; i<config.Buttons.length;i++){
                addButton(config.Buttons[i].Name,
                          config.Buttons[i].Image,
                          config.Buttons[i].Command,
                          config.Buttons[i].Label);
             }
        }
       function addButton(name,image,command,label){
            $('#cke_21').append('<span class="cke_toolbar_start"></span>'+
                                '<span role="presentation" class="cke_toolgroup">'+
                                    '<span class="cke_button">'+
                                        '<a onclick="'+command+'();" onblur="this.style.cssText = this.style.cssText;"  role="button" hidefocus="true"  title="'+label+'" class="cke_button_outdent cke_disabled" id="'+name+'" aria-disabled="true">'+
                                            '<span class="cke_icon" style="background-image:url('+image+');background-position:center;">&nbsp;</span>'+
                                            '<span class="cke_label" id="'+name+'">'+label+'</span>'+
                                        '</a>'+
                                    '</span>'+
                                '</span>'+
                                '<span class="cke_toolbar_end"></span>'
                                );
       }

        
        var defaultFunc = window.onload;
        window.onload = function() {
            if(defaultFunc)
                defaultFunc ();
            setTimeout("initialize()",1000);
        }
   </script> 
</apex:component>

Line #21-#35 shows configuration option for your buttons.
initialize() method starts creating the buttons.

Here is a working demo for above functionality:
http://labsprojects-developer-edition.ap1.force.com/ExtendRTE?id=001900000054UZ7

You will see two buttons on right side. Click on those buttons to see things in action.

Additionaliy you can put your email address and try to send email to your account to see how email will look.

Mail me for full code as always :)

Thanks
Aslam Bari

Posted in Labels: aslam, Aslam Bari, email, email editor, extension, force.com, remote, rich text editor, rte, Salesforce, salesforce.com, Visual Force | 24 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: apex, aslam, Aslam Bari, dependent, dependent picklist, jquery, Salesforce, salesforce.com, visual | 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.

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: aslam, Aslam Bari, context-menu, jquery, jquery menu, right click menu, Salesforce, Visual Force | 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: aslam, Aslam Bari, Email Utility, IP range, Salesforce, sfdc, White list | 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: aslam, Aslam Bari, force.com, oauth, oauth token, php, Salesforce, salesforce soap api, session id, sfdc, soap | 19 Comments »

Technology Share - TechShare

Salesforce Context Menu for list views

Extend Salesforce Rich Text Editor as Multi-Purpose

Simple jQuery Dependent Picklist

Simple Context-Menu For Web Page

Change Email Utility - Salesforce

OAuth Token as Salesforce SessionId in SOAP API (PHP)

Contributors

Blog Archive

Followers