Additional Parameters in ExtJs data store

Hello again.

This is my second blog on ExtJs. Recently I was working on a project where my responsibility was to create Data filters of ExtJs grid. There will be number of drop downs in tool bar of grid and user can select values in one or more drop downs. Also paging is enabled in grid. So user can select some filters and according to that data will be displayed in grid in different pages with default page size 25.

So how to do that? Because here filters are dynamic. user may or may not select values in drop downs. After user selected some filters it should be retained in all the events like next page,first page, first page,last page and refresh.

Here I was working with ExtJs Json Store. When josn store gets loaded and assigned to grid, all its configuration will be used in all grid events like next page etc. We can pass additional parameters to json store while using load and reload method.

store.reload({params:{start:0, limit:20, sort:'col1',dir:'DESC',param1:value1,param2:value2}}).

But here in this case this function is automatically called by grid when we click on next and previous buttons. So we don't have control to add additional parameters and values in reload function. One possible solution is to override ExtJs pagaing toolbar and defining our own events. But its some what difficult for beginners. We have one easy solution for this. Json Store has one more property called baseParams. It takes an array of parameter name and values. All the parameters defined in baseParams will be sent to server in each paging event of grid. So in case of our dyanmic filters all we have to do is to change grid baseParama when user selects some values from drop down. This we can do it drop down select event as follow.

select:{

fn:function(combo,record,index) {

grid.store.baseParams = {param1:value1,param2:value2};

grid.store.reload();

}

}

All the parameters sent to server by json store and on server side you can use those parameters to get the data and send it back to the application.

That's it and you have a real time dynamic filtering in your grid.

Put Standard HTML controls inside ExtJs Grid Panel

Hello,

Since last three months I am working with ExtJs. I have some wonderful experience with ExtJs during this time. ExtJs is really a powerful JavaScript framework for rich user interface development. This is my first blog on ExtJs. I am going to publish more blogs on my experience with ExtJs.

Ok let's come to the point now. I was having requirement to put standard html controls like select box and check box inside ExtJs grid panel. Although ExtJs provides various controls like checkbox and combo box. But requirement was to use standard HTML controls.

ExtJs has another powerful control called editor grid panel. Here you can specify editor for each column like textbox and combo box etc. When user double clicks on row it goes to edit mode and all the editors are visible in respective columns.

But my requirement was to display controls without using editor grid panel. When user views the grid all the controls should be displayed to user. So how to achieve this?

ExtJs grid column defines a function called "renderer". It takes two arguments value and cell object. Value is the value of cell that is assigned by dataIndex property and cell object defines various property of cell. In this function you can write your code to generate the standard HTML controls. For example.

columns : [{

header: 'columnheader',

width: 25,

dataIndex : 'valueofcell',

renderer: function(value, cell)

{

return '<input type="checkbox" name="mycheckbox" />';

}

}]

This will add standard HTML check box to ExtJs grid panel. This is how you can add any other HTML controls inside the ExtJs grid panel columns.

Mageto and SalesForce Synchronization

OK, guys I am back to blogging after long time.

This blog is about synchronizing Magento inventory with Saleforce. I have briefly mentioned what is saleforce in my previous blog. You can read it from here.

The requirement was to sync Magento Inventory to Salefroce. For the first time it should synchronize all the products form Magento to Salesforce and then it should synchronize only recently added and updated products to Magento. First of all we need to understand how we can have products in Saleforce. This information is missing in my previous blog so I am explaining here.

In Saleforce you can expose your organization data in form of Custom Objects. Its like your table in your database. When you define a custom object, in salesforce it defines a table. All the attributes of that object can be defined as column of that table. For example let's consider custom object product with few attributes like Product name, quantity etc. You can imagine that Force.com platform has created a table called product and with columns product name and quantity.

Once you have defined a custom object in Salesforce you can add number of products in it. So its like you have a table called product and you have number of rows in it. This is how you can define custom objects in Salesforce. Salesforce custom objects supports various data types like NUMBER, TEXT, LIST, MULTI SELECT, FORMULA and various other. You can enforce security on it by providing crate,read,modify access to group of users or specific user.

So this was the introduction about saleforce custom object, now lets go further.

Salesforce has some APIs using which third party can access the data inside the Salesforce platform. We have used this APIs in Magento. Those APIs are nothing but a web services. You have to download WSDL file from your salesforce account and using it you can connect to salesforce from third party.

For PHP toolkit is available that you can download from SalesForce. It defines all the classes and interface required to access salesforce data form PHP applications. You have to include some files from this toolkit and wsdl file into your PHP application. Following is the simple code snippet to authenticate user to access salesforce data.

$wsdl = 'your wsdl.wsdl';

$user = 'your username';

$pass = 'your password';

$token = 'security token';

$client = new SforcePartnerClient();

$client->createConnection($wsdl);

$client->login($user, $pass . $token);

if($client->login($user, $pass . $token))

echo "Connection Succcess";

Here security you have to generate from your salesforce account and username and password is of your salesforce account.

After successful authentication you can retrieve list of custom objects from salesfroce or you can add,update,delete custom objects in salesforce. For that various methods are defined in toolkit but we will focus on method UPSERT. This is the combination of insert and update. When you use this method, salesforce will update object its available or it will create new custom object.

For products in Magento we have to map each product attributes to custom object fields. Look at the following code snippet.

$fieldset['Title__c']=$name;

$fieldset['NAME']=$sku;

$fieldset['Unit_Weight__c']=$weight;

$fieldset['Supplier__c']=$supplier;

$fieldset['Warehouse_Location__c']=$warehouse;

$fieldset['Manufacturer__c']=$manufacturer;

$fieldset['External_Product_ID__c']=$pid;

$fieldset['Price__c']=$price;

$fieldset['Cost__c']=$cost;

$fieldset['Image_1_URL__c']=$imageurl;

$fieldset['Quantity__c']=$qty;

$sObject = new sObject();

$sObject->type = 'TDS__Product__c';

$sObject->fields = $fieldset;

$client->upsert("External_Product_ID__c", $sObject);

Here important field is External_Product_ID__c. Its like foreign key. When you want to access salesforce custom object from third party, you have to specify some field as a external which must have datatype Text,Auto number.

Using above code it will either update custom object in Salesforce with specified values if its available or it will create new one.

So this is how you can synchronize Magento products to salesforce. I hope that this blog helps you. Let me know if you have any questions for the same.