Isomorphic SmartClient How To : Handling ComboBox picker selection

If you are working with ComboBox Item in SmartClient, you might be required to perform some action ( setting a flag, or modifying the selected data ) when a picker selection is made. Though this task can be easily done by using the example code provided by Isomorphic when you are working with static data , it gets trickier when the field names you are going to work with are only available at runtime. The documentation and examples are not very obvious about how to do this. Well, the key to this lies in the fact that the ComboBox Item in SmartClient JavaScript framework is actually a ListGrid. You can do whatever you can you with a ListGrid by accessing it through the "pickListProperties" attribute of the combo box. Since, we want to handle ComboBox picker selection event, we can do it by implemeting the 'rowClick' event inside 'PickListProperties' attribute.
Here is the code

 { 
         name: "symbol", 
         editorType: "comboBox", 
        
         pickListProperties: { 
           rowClick: function(record, recordNum, fieldNum){ 
              doSomethingWith(record[fieldName]); 
             return true; 
           } 
         }, 
       } 

Isomorphic SmartClient version 8.3 - My review

I have been working with LGPL version Isomorphic SmartClient framework currently. For those who don’t know it, SmartClient is primarily a JavaScript framework which allows you to build "Enterprise Grade" web applications. And it is quite true as well.    In the following lines, I would like to present it pros and cons which may prove useful for some of my reader. Let me start with Pros.

Pros.

Controls Library with Extensive Functionalities

SmartClient makes developer's life a lot easier (if he/she knows her way around...let me come back to it) when building web applications that require components with extensive functionalities for information display, such as Grids, Charts , Forms that support context menus, sorting , filter , validation, highlighting etc. (such as a dashboard).  For example, the grid itself is feature packed. You can sort, filter and highlight rows as well as create custom cell contain buttons and images.  You can freeze columns, use data source to change grid data on the fly without much effort and use context menu to allow users to perform actions on data in the grid. Form controls are great too. For example, you can restrict user to numeric input, display a extensive set of data as grid in the dropdown of a combo box and control positioning on form quite well. 

Quicker Development

SmartClient client supports a very simple object based design to build UI.  There are controls and there are controls that contain them. For example, in order to build a form, you just create a form object, and objects of each control that you want on that form and just add them to the form.   This is not only easier to understand when you are learning it for the first time (compared to ExtJS where you also need to know about MVC and have to deal with complex naming conventions).  The extensive feature set of each control allows you to write less code and get more done.

Cons.

Documentation

I can easily describe how I feel about its documentation... It’s pretty weak.  Though the documentation is not only available with SDK as well as online, it is sparse if you take into consideration the feature rich controls.  There is no description of how each control has been built; you just have to figure it out yourself.  The documentation just lists the attributes and methods of each control along with brief descriptions for each of them.  For example, if you want to fill a combo box with text from a cell of its dropdown list, the documentation gives you no clear indication on how to go about doing that. You will just have to connect dots by experimenting with the control and significantly digging through documentation.  It is important to mention here that SmartClient has different version. The LGPL version just contains JavaScript, while versions above it allow these controls to be rendered through JAVA (GWT).  So, in my case, I was only utilizing a portion of documentation, and I clearly felt that the JavaScript portion of the documentation should have been as big as the documentation itself.  Also, the examples were a bit misleading for me, as most of them either used static data, or fetched data from the server through a URL. This gave me a false sense that data binding was not a big issue, however, in reality, when using dynamic data built on client's browser; I had to figure it out.  However, the good thing is that examples render themselves for modification and you can build a prototype of what you want to build before making any kind of commitments.

Loading

Because of its extensive nature, SmartClient takes noticeable time to render.  The controls, when they load are not as snappy as some of the lightweight UI controls are, but given their utility it was acceptable for me.  In other cases of course, this compromise depends upon the requirements and preferences. 

UI and its customization

I don’t know, it may be because of ease of UI control, but SmartClient is not div based. It extensively uses tables for building UI structure.  Also, there is a particular and extensive procedure to customizing its CSS. Doing CSS customization the normal way, may result in some unexpected and previously unseen results, and although it is very much doable, it would just take more time.

A possible solution to 10001 - Timeout processing request error -Paypal Direct Payment

Paypal is one of the largest e-payment service provider in the world. In a recent project, I was tasked to implement Paypal payment solution for the first time. The site specifically required Paypal's Direct Payment solution through APIs. Everything was going fine until I hit the "10001 - Timeout processing request" error. My attempted solutions ranged from playing around with cURL parameters as suggested Here to attempting transaction on the live Paypal URL using a valid card number. However, none of it worked. Then I used code that I borrowed from one of Smashing Magazine's article and upon closer inspection I found that the expiry date format of my credit card was wrong. Paypal's DoDirectPayment API expects expiry date to be without any separators (072017 instead of 07/2017 or 07-2017). Once i got that right, my transaction went through without a hitch.

Bottom Line: when using Paypal, one has to be very careful about that format in which the data is being sent.

Here is a link to a working example of my code.You ll have to put in API credentials in it though :P.

Paypal Direct Payment Code