Showing posts with label VF. Show all posts
Showing posts with label VF. 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:
  1. Make a IMAGE formula field as given in screeshot above
  2. Upload the menu-resources.zip file available on this url
     http://www.aslambari.com/downloads/menu-resources.zip
  3. Make one home page component (HTML type and Narrow side)
  4. 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: , , , , , , , , , , , | 12 Comments »

Authorize.Net Apex Library: Salesforce and Authorize.Net Integration

Saturday, May 28, 2011 by Aslam - The Alexendra
Hi All,
Recently I came across one requirement where end user wants an easy way to pay fixed amount online from Salesforce to third party something like Donate page. In one of my previous post i showed you how you can do that using Paypal. Here is that paypal solution:
http://techsahre.blogspot.com/2011/01/simple-paypal-integration-with.html

I was thinking to implement the same thing but this time end user wanted something simpler easy to use and easy to test solution. Then i found that 'Authorize.Net' is one of the good solution for this type of requirements. Then i created one simple ready to use online payment tool in salesforce using 'Authorize.Net' as payment gateway.



I found a good tutorial here in PHP how to make that here. I used the same idea and rebuild my Apex solution.

You can download the package from this link:
https://login.salesforce.com/?startURL=%2Fpackaging%2FinstallPackage.apexp%3Fp0%3D04t90000000PqIH

Before using the tool, you first need to follow some basic things:

1) For checking/testing the things you need first test accounts. Go to "test account" page on Authorize.Net and create one merchant account (Card Not Present).

2) Change your "login" and "transkey" variables in "AuthorizeDotNet" class with the merchant account's API login id and transaction id.

After that you can simply use VF page "DoPayment" to see how this works.
/apex/DoPayment



On click of submit you will get information about your transaction, if successful it will show you transaction id and success message. Otherwise will show error message.

Check out this easy cool stuff and give me feed backs as always.


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

Making Related List without using Apex Class

Thursday, May 5, 2011 by Aslam - The Alexendra
Hi All,
Here i want to give some sample code to show you how to make RelatedList on your VF page without using any Apex Code. There are two solutions for this problem.

1) Using <apex:relatedlist>
Suppose you have standard Case object and have one custom child object named "Child__c" to case. Then you can show your relatedlist on vf page using below code.

<apex:page standardController="Case">
<apex:relatedList list="Childs__r"/>
</apex:page>

The list will be displayed on your page but it always gives "Action" column also with "Edit | Del" links. If you want to get rid off that then you need to do a little jquery trick to remove that. See the below code.

<apex:page standardController="Case">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

<script>
$(document).ready(function(){
$('#Childs a').attr('target','_blank');
});
</script>

<style>
.pbButton{
display:none;
}
.actionColumn{
display:none;
}
</style>

<Div id="Childs">
<apex:relatedList list="Childs__r"/>
</Div>

</apex:page>

The main issue i found using above approach of making list is that it depends on fields selected on page layout for that relatedlist. If you have added 2 fields on your layout, your vf will also show two fields. If you remove that related list from layout, then your vf will show only default fields ( name) only. So, in some sitations this solution is not perfect. For that reason, here is another solution.

3) Using relations objects iteration and Standard Tags.
Here is the other way to achieve your related list on vf page:

<apex:page standardController="Case">
<apex:sectionHeader title="http://www.aslambari.com" subtitle="Related List Example"/>
<apex:pageBlock>
<apex:pageBlockTable value="{!Case.Childs__r}" var="child">
  <apex:column headervalue="Name"><apex:outputLink value="/{!child.id}">{!child.name}</apex:outputLink></apex:column>
  <apex:column value="{!child.detail__c}"/>
  <apex:column value="{!child.is_active__c}"/>
  <apex:column value="{!child.createddate}"/>
  <apex:column value="{!child.createdbyId}"/>
</apex:pageBlockTable>
</apex:pageBlock>
</apex:page>
Here is a working demo for above code sample:
http://labsprojects-developer-edition.ap1.force.com/apex/RelatedListSample?id=50090000000sW5q


The above way, you can customize your list as you want.

Hope It helps developers to find quick solution for related list.

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

Using Map In Your VF Pages

Wednesday, March 16, 2011 by Aslam - The Alexendra
Hi All,
Most of you aware of this but i am sure most of you (like me) un aware about that we can use Map directly on VF pages. Atleast for me, it is a news :) . Anyway, i am going to show you how to use simple map on your VF page so that you can avoid Model class (If you making only because of thinking that VF does not support Map). Here I am going to show a simple program which counts duplicate accounts by name and shows on VF screen. Here Account Name is "key" of Map and the "value" part is count of duplicate account.





Class Code:
public class TestMapController{

  public map<string,integer> data {get;set;}

  public TestMapController(){
      data = new map<string,integer>();
      for(Account acc: [Select Id, Name, (Select Id, Name, Email from Contacts), Phone from Account]){
          integer count = data.get(acc.name);
          if(count != null)
              count++;
          else
              count = 1;
          data.put(acc.name, count);
      }
  }
}




VF Page Code:
<apex:page controller="TestMapController">
<apex:pageblock title="Map Usage On VF">
<apex:pageBlockTable value="{!data}" var="d">
   <apex:column headerValue="Account Name">
       {!d}
   </apex:column>
   <apex:column headerValue="Duplicate Count">
       {!data[d]}
   </apex:column>
</apex:pageBlockTable>
</apex:pageblock>
</apex:page>



Hope this will help new developers who struggle to manage and show their data model on pages.

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

Barcode, Salesforce and PDF

Wednesday, February 16, 2011 by Aslam - The Alexendra
Hi All,
Recently I faced one issue where i need to generate Barcode on the fly in VF and also render that as PDF. I searched on Net and community, found some people have done Barcode generation using Javascript. But in my case i need to render it as PDF and VF does not support Javascript when renderAs PDF. So i decided to go the way to generate Barcode image. The first thing came in my mind is PHP/GD way to generate Barcode image and use that url in VF to show image. Then i found this site useful and very useful PHP script which fits my need
http://www.sid6581.net/cs/php-scripts/barcode/

I used this script, done some modification in this and hosted on my site And used in my VF page as below:-

<apex:image value="http://www.aslambari.com/barcode.php?barcode=CS1001&width=200&text=1&height=100" />


Here is some details about how you use the url and parameters to generate barcode:
URL: http://www.aslambari.com/barcode.php
Params:
barcode: [any text to render as barcode]
text: [0 or 1]
format: [jpeg/png/gif]
width: [the width you want]
height: [the height you want]



It works great if my VF render as normal HTML page, but as soon as i make it renderAs="PDF", VF again not works, it does not allow dynamic generated images. So again i got disappointed.
Then i thought again and did apex code to fetch the dynamic binary data generated my PHP site url and save it into attachment and use that url in my VF page. I was thinking this time i will win for sure, but again it did not work. HttpResponse does not allow Blob response, it always gives response as String and that mingled my image data. Disappointed again.

Then finally i have decided to create dynamic generated barcode on PHP and save as temprary images and use that url in my img tag and renderAs="PDF", this time i got success :)

Here is the working demo for my work:-
https://labsprojects-developer-edition.ap1.force.com/BarCodeSample

If you need complete code for above demo site, here is the link:
http://www.aslambari.com/SF_Barcode.zip

Enjoy barcoding :)

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