Osama's Weblog

I was studying the latest pages developers guide and found some components that have been added to salesforce.com.

These are

• Apex Panel Bar
• Apex Panel Grid
• Apex Tab Panel

These controls can further enrich the user experience and the developer can now avoid to use external library components such as jQuery etc in visualforce.

I have created a simple demo which can show these working. Its almost same as in the guide.

JQuery has always fascinates me. It makes the UI very attractive and user friendly. I had to implement a datepicker in a text field. I decided to use the JQuery UI datepicker. I am sharing the code that I did. Its easy to understand.

I made a static resource with the name slider and uploaded all the css and js files of JQuery UI that are available for download here .

1) Include the css files in your page

<link type="text/css" href="{!URLFOR($Resource.Slider, 'themes/ui-lightness/ui.all.css')}" rel="stylesheet" />
<script type="text/javascript" src="{!URLFOR($Resource.Slider, 'jquery-1.3.2.js')}"></script>
 <script type="text/javascript" src="{!URLFOR($Resource.Slider, 'ui/ui.core.js')}"></script>
 <script type="text/javascript" src="{!URLFOR($Resource.Slider, 'ui/ui.datepicker.js')}"></script>

2) Make a input text field and create the following JQuery function as below

 <input id="datepicker" type="textbox" />
<script type="text/javascript">
    $(function() {
        $("#datepicker").datepicker({ showOn: 'button', buttonImageOnly: true, buttonImage: '{!$Resource.calendar}' });
    });
    </script>;;

3)   $(“#datepicker”).datepicker({ showOn: ‘button’, buttonImageOnly: true, buttonImage: ‘{!$Resource.calendar}’ });
The datepicker pops up when you click on the image button that is created using the above statement. If  you want to pop it up by clicking the textbox only, replace the above statement with the below one:

  $(“#datepicker”).datepicker();

I hope it helps for you as it did for me. Feel free to ask questions

Placing a visualforce page on sidebar is really simple.

1) Create a visualforce page.

2) Create a custom  HTML homepage component. Place the following code in the HTML area.

<iframe src="/apex/[PAGE NAME]?core.apexpages.devmode.url=1" width="100%" frameborder="0" height="100"></iframe>

replace [PAGE NAME] your custom page name.

3)Place it on the left side of home page layout.

and here u go…

There is a really good example of invoking apex code through apex code here. But I have found another way to invoke the apex method without using visualforce pages.

This is how I did:

1) Suppose you want to place a button on the Account detail  page to call apex method. Clone the Account detail page by creating a new visualforce page.
<apex:page standardController=”Account” extensions=”newCOn” >
<apex:form >

<apex:commandButton value=”Convert” action=”{!getID}” ></apex:commandButton>
<apex:detail relatedList=”true” relatedListHover=”true” />
</apex:form>
</apex:page>
2) Create the method getID() in the extension class that has been defined above.
public class newCon()
{
public void getID()
{
//make your custom logic here
}
}
3) Override this page on VIEW page under Setup>Customize>Accounts.

And in this way you have called an apex method without redirecting it to another visualforce page.

Feel free to ask questions.

Payment gateways are parimary requiremnt in most of the business application these days. Applications building up on force.com platform require payment gateways.

Integration of paypal seems to be a very common issue. One of my readers asked me to write the code to integrate paypal with apex.

Below I am writing the code which I wrote for a project. I hope this will help many of the apex developers. This particular method is for DoDirectPayment method.

public class PayPalApi
{
public static String result {set;get;}
public static String makeCallout(String amount, String shipToName, String shipToStreet1, String shipToStreet2, String shipToCity, String shipToState, String shipToPostalCode, String shipToCountry, String creditCardType, String creditCardNumber, String expMonth, String expYear, String payerFName, String payerLName, String payerCountry, String payerStreet1, String payerStreet2, String payerCity, String payerState, String payerPostalCode, String CVV2Number)
{ // Instantiate a new http object
Http h = new Http();
// Instantiate a new HTTP request, specify the method (GET) as well as the endpoint
HttpRequest req = new HttpRequest();
// The webservice url - Pass in the endpoint to be used using the string url
String url = 'https://api-3t.sandbox.paypal.com/2.0/';
String soapXML;


soapXML =  '<soap:Envelope xmlns:soap=' + '\'' + 'http://schemas.xmlsoap.org/soap/envelope/'  + '\'' + ' xmlns:xsi=' + '\''+ 'http://www.w3.org/2001/XMLSchema-instance'  + '\'' + ' xmlns:xsd=' + '\''+ 'http://www.w3.org/2001/XMLSchema' + '\'' + '>';
soapXML += '<soap:Header><RequesterCredentials xmlns="urn:ebay:api:PayPalAPI"><Credentials xmlns="urn:ebay:apis:eBLBaseComponents">';
soapXML += '<Username>PAYPAL_USER_NAME</Username><ebl:Password xmlns:ebl="urn:ebay:apis:eBLBaseComponents">';
soapXML += 'PAYPAL_PASSWORD</ebl:Password><Signature>PAYPAL_SIGNATURE</Signature>';
soapXML += '</Credentials></RequesterCredentials></soap:Header><soap:Body><DoDirectPaymentReq xmlns="urn:ebay:api:PayPalAPI">';
soapXML += '<DoDirectPaymentRequest><Version xmlns="urn:ebay:apis:eBLBaseComponents">1.00</Version>';
soapXML += '<DoDirectPaymentRequestDetails xmlns="urn:ebay:apis:eBLBaseComponents">';
soapXML += '<PaymentAction>Sale</PaymentAction><PaymentDetails><OrderTotal currencyID="USD">' + amount + '</OrderTotal>';
soapXML += '<ShipToAddress><Name>' + shipToName + '</Name><Street1>' + shipToStreet1 + '</Street1><Street2>' +shipToStreet2 + '</Street2>';
soapXML += '<CityName>' + shipToCity + '</CityName><StateOrProvince>' + shipToState + '</StateOrProvince><PostalCode>' + shipToPostalCode + '</PostalCode>';
soapXML += '<Country>' + shipToCountry + '</Country></ShipToAddress>';
soapXML += '</PaymentDetails><CreditCard><CreditCardType>' + creditCardType + '</CreditCardType><CreditCardNumber>' + creditCardNumber + '</CreditCardNumber>';
soapXML += '<ExpMonth>' + expMonth + '</ExpMonth><ExpYear>' + expYear + '</ExpYear><CardOwner><PayerStatus>verified</PayerStatus><Payer>bgiles@ddd.com</Payer>';
soapXML += '<PayerName><FirstName>' + payerFName+ '</FirstName><LastName>' + payerLName + '</LastName></PayerName><PayerCountry>' + payerCountry + '</PayerCountry>';
soapXML += '<Address><Street1>' + payerStreet1 + '</Street1><Street2>' + payerStreet2 + '</Street2><CityName>' + payerCity + '</CityName>';
soapXML += '<StateOrProvince>' + payerState + '</StateOrProvince><Country>' + payerCountry + '</Country><PostalCode>' + payerPostalCode + '</PostalCode></Address>';
soapXML += '</CardOwner><CVV2>' + CVV2Number + '</CVV2></CreditCard></DoDirectPaymentRequestDetails>';
soapXML += '</DoDirectPaymentRequest></DoDirectPaymentReq></soap:Body></soap:Envelope>';

req.setBody(soapXML);
req.setEndpoint(url);
req.setMethod('POST');
req.setHeader('Content-length', '1753' );
req.setHeader('Content-Type', 'text/xml;charset=UTF-8'); req.setHeader('SOAPAction','');
req.setHeader('Host','api-aa.sandbox.paypal.com');

HttpResponse res = h.send(req);
String xml = res.getBody();

XmlStreamReader reader = res.getXmlStreamReader();
result = readXMLResponse(reader,'Ack');
return result;
}
public static String readXMLResponse(XmlStreamReader reader, String sxmltag)
{
string retValue; // Read through the XML
while(reader.hasNext())
{
if (reader.getEventType() == XmlTag.START_ELEMENT)
{
if (reader.getLocalName() == sxmltag) {
reader.next();
if (reader.getEventType() == XmlTag.characters)
{ retValue = reader.getText();
}
}
} reader.next();
}
return retValue;
}
}

Other paypal methods dont require this type of coding because they are mostly redirected to paypal website. If you need further help, feel free to ask questions.

P.S: This code is completely working. You just have to replace with your credentials.

We can traverse a string in in order to search for a particular sort of expression. For example if we want to search a date expression from a string, we can use do that. For this to be done, we have PATTERN and MATCHER classes in apex.

I had to parse an email message to search for a regular expression. Using PATTERN class, we can set any kind of expression we have to search for. e.g

Pattern cpattern = Pattern.compile('[S][O]-(\\d{0,100})-(\\d{0,100})-{\\d{0,100}')

The above statement sets a particular regular expression. In order to search this kind of expression in a string, we can use the following statement:

Matcher cmatcher = cpattern.matcher(myString);

We can set a Boolean variable which can return true or false if he value is found in the string or not:

myVar = cmatcher.find();

and if we want to get the part of the string that has been found in the given string:

myName2 = cmatcher.group();

The overall code looks like:

public class linkTestController {
public String myName {set;get;}
public String myName2 {set;get;}
public Boolean myVar {set;get;}
public Integer myVar2 {set;get;}

public linktestController()
{
myName = '1313 1231231 SO-20091217-000253   asdad   123  adasd';
Pattern cpattern = Pattern.compile('[S][O]-(\\d{0,100})-(\\d{0,100})*');
Matcher cmatcher = cpattern.matcher(myName );
myVar = cmatcher.find();
myName2 = cmatcher.group();
}

}
Now, if I display the value of myName2, it will return ‘SO-20091217-000253’ (without quotes) only.

Please feel free to ask any questions.

I was working today and there was a requirement for a third party integration on a visual force page. That requires a html form  which takes input and redirects to the required page by pressing submit button.

there were html input tags.. <input type="text" name="txtBox" />

I was jus thinking how to populate this textbox with the apex variable I have at the backend, I was about to try the javaScript method to populate this textbox with apex controller variable. But before that what I did was, I just called the variable name in the ‘value’ attribute of the input component this way:

<input type="text" name="txtBox" value="{!myVar}" />

this seems pretty simpler. it saved my lot of time by not getting into javaScript. I didnt know before that we can call apex controller variable for html components.

Feel free to ask any questions.

//
//

Most of the times there is a requirement to call a method on different events of a webpage component. for example; ‘onchange’ event of a text box. This is done in html pages by javaScript.

In Visualforce pages, there is a requirement sometimes to call a method on some event which is placed in the controller of the page. To do it, I have been using the actionFunction apex component and the call the method through javaScript. Below is the code below what I have been doing since few days:

<apex:page controller=”TestClass”>

<apex:form>

<script>

func scr(){

acFunc();

}

</script>

<apex:actionFunction name=”acFunc” action=”{!funct}”/>

<apex:inputText id=”txt” value=”{!textBox}” onclick=”scr();”/>

</apex:form>

</apex:page>

———-Controller————
public class TestClass()
{
public String textBox; {set;get;}
public void funct()
{
textBox = ‘This text is displayed after reRendeing’;
}
}

But, today I found another apex component, actionSupport,  which can do the same thign without involving javaScript.

here is the code below showing the working of actionSupport component.

<apex:page controller=”TestClass”>

<apex:form>

<apex:inputText id=”txt” value=”{!textBox}”>

<apex:actionSupport action=”{!funct}” event=”onclick” >

</apex:inputText>

</apex:form>

</apex:page>

———-Controller————
public class TestClass()
{
public String textBox; {set;get;}
public void funct()
{
textBox = ‘This text is displayed after reRendering’;
}
}

Actually, javaScript does get invoked but using actionSupport but its on server side. I find it easy to call an apex function this way. But it depends upon the requirements provided. Sometimes we cant afford too much server side interaction. That was it for actionSupport. Hope you have found it helpful as I did find it efficient for my work.

Feel free to ask questions.

It is pretty useful to access variables, defined in Apex controller, in JavaScript. It has been very useful atleast for me. Its efficient and saves alot of time.

Here is the code below showing the use of apex variables in javascript.

<apex:page cache=”false” controller=”myController”>

<script>

alert(‘{!myVariable}’);

</script>

</apex:page>

public class myController

{

public String myVariable=’I am a Variable’ {set;get;}

}

Simple!

Feel free to ask any questions

There is a general requirement of passing parameters from one page to another through queryString using GET Method. The same thing was required in a project. Below is the code showing ho did I do that in Visual Force page using apex.

This is the page FROM which the parameter has to be sent

<apex:page>
<body>
<form name="myForm" method="get" action="nextPageURL">
<input type="hidden" value="SampleValue" name="name"/>
<input type="submit" value="Submit"/>
</body> </apex:page>

According to this code, there is a hidden input with value “SampleValue” and when we submit, this value is passed to next page in query string. The url would look like “nextPageURL?name=SampleValue.

The code blow how to retrieve the receved paramter. The code below has to be in the other page.

<apex:page>
<head>

<script type="text/javascript">
function getValue(varname)
{
  var url = window.location.href;
  var qparts = url.split("?");
  if (qparts.length == 0)
  {
    return "";
  }
  var query = qparts[1];
  var vars = query.split("&");
  var value = "";
  for (i=0;i<vars.length;i++)
  {
    var parts = vars[i].split("=");
    if (parts[0] == varname)
    {
      value = parts[1];
      break;
    }
  }
  value = unescape(value);
  value.replace(/\+/g," ");
  return value;
}
</script>

</head>
<body>
<script type="text/javascript">
   var name = getValue("name");
   alert(name);
</body>
</apex:page>

The getValue() method search for “name” and decrypt the received paramter from the query string. It worked for me. Feel free to ask any questions