Creating A Business Application In Data Grid
Any idea how hard and risky it can be to make an Open-Source project? Well, even we don’t expect most of the viewers to know, cause otherwise there would be no point of us.
This article is to share how Symfony2 framework has easily been our best decision to work on OroCRM. It has a user friendly interface, along with data grids, filters, grouping and sorting of data, entity manipulations through workflows. If you haven’t used it yet, get ready to change your working process.
And believe me, developing custom business applications has never been this easy. We are going to tell you how to develop a business application using ORO platform built using the Symfony2 framework.
But before that, you should probably find out a bit about Oro itself. Here is a small introduction to ORO platform and it’s Symfony2 framework.
ORO Platform
ORO Platform is an open-source Business Application Platform. It offers the developers the exact business application they have been looking for by combining the tools they need. Built in PHP5 and Symphony2 Framework, ORO is flexible and makes applications customizable.
Where To Use ORO Platform?
Both sales and marketing tools are built in Oro. Any of the following kind of applications and softwares are built using ORO Platform:
- Intranet applications
- Ticketing system
- Call-Center Management
- Order Management
Installation
Platform is a package that requires an application to run it. A platform-application is an example of such application which simplifies initial project setup and configuration. Please follow the installation instructions here.
Data Grid
A data grid is an architecture or set of services that gives individuals or groups of users the power to access, modify and transfer huge amounts of data for purposes of research. Micro Finance India(MFI), is a business tool for of developed using ORO platform.
How To Create A Datagrid In Resources
Check out the simple steps of creating data grid in the database. This can be done by following the pseudo code below.
Create datagrid.yml in Resources->config->datagrid.yml
datagrid:
webmuch-memberdetail-grid:
source:
type: orm
query:
select:
- g.id
- g.name as MembersName
- l.loanStatus as LoanStatus
- m.contactNo as ContactNo
- mg.groupName as GroupName
from:
- { table: GroupBundle:MemberDetails, alias: g }
join:
left:
- { join: g.loan, alias: l }
- { join: g.members, alias: m }
- { join: m.group,alias:mg}
columns:
GroupName:
label: Group Name
MembersName:
label: Name
ContactNo:
label: Contact No
LoanStatus:
label: Loan Status
First the DataGrid cells, or columns are created to display for each data record i.e. grid name which is the datagrid name, example Webmuch groups. Query is the action that we want to perform on the table or the bundle name by aliasing the Entities, and retrieving all the members. select: g – is to return the result set in vertical format, JOIN is used to retrieve data from the linked tables. Columns are the datagrid layout.
Without the frontend type datetime attribute the date will not be displayed. In each column, we are using different queries i.e. group identification, group name, frontend is used to display the date, time/render data date type. Frontend is used to render data.
What Filters And Sorters Do In Datagrid
Filters
To filter items in a Datagrid, you create a method that provides the filtering logic and then you use the PagedCollectionView. Filter property to apply the filter. To filter items in a Datagrid, create a method that provides the filtering logic. The method is used as a callback and accepts a parameter of type Object. Remove the filter by setting the PagedCollectionView. Filter property to null, the filter is used when the CheckBox is Checked, and removes it when the Checkbox is Unchecked.
Sorters
To specify how items are sorted in a DataGrid, you use the SortDescription type to sort the items in the source view.
To Sort Items In A Datagrid
Create a SortDescription and pass the name of the property to sort by to the constructor. Add additional instances of SortDescription to the PagedCollectionView.SortDescriptions collection to sort by additional properties. Here is an example which use some methods of filters and sorters:
sorters:
columns:
MembersName: { data_name: g.name }
GroupName: { data_name: GroupName }
LoanStatus: { data_name: LoanStatus }
filters:
columns:
MembersName:
type: string
data_name: g.name
ContactNo:
type: string
data_name: ContactNo
GroupName:
type: string
data_name: GroupName
LoanStatus :
type : string
data_name: LoanStatus
options:
entityHint: memberdetail
export:
csv: { label: oro.grid.export.csv }
Action
In action field as you can see the data below, data grid using the viewing data, editing data, deleting data, updating, etc. param id:- you have to pass parameter in every root.acl_resource: In this, a particular user can access this field. Navigate helps to add the buttons in datagrid. In action property view, update, edit and delete is performed on the icon and link of the groups or on the parameter’s id. A row action is an action performed on the current row. It’s represented by a route to a controller with the identifier of the row. Row actions are all put in the same new action column at the last position of the grid.
properties:
id: ~
update_link:
type: url
route: memberdetails_edit
params: [ id ]
view_link:
type: url
route: memberdetails_show
params: [ id ]
delete_link:
type: url
route: memberdetails_delete
params: [ id ]
eligibilitydetail_link:
type: url
route: eligibilitydetails_new
params: [ id ]
loan_link:
type: url
route: memberloan_list
params: [ id ]
approval_link:
type: url
route: loansanctioned
params: [id]
disbursal_link:
type: url
route: loandisbursement
params: [id]
actions:
update:
type: navigate
label: Update
icon: edit
link: update_link
acl_resource: memberdetails_edit
view:
type: navigate
label: View
icon: user
link: view_link
rowAction: true
acl_resource: memberdetails_show
delete:
type: navigate
label: Delete
icon: trash
link: delete_link
acl_resource: memberdetails_delete
loan:
type: navigate
label: Loans
icon: list
link: loan_link
acl_resource: memberdetails_loanlist
approval:
type: navigate
label: Loan Approval
icon: ok
link: approval_link
disbursal:
type: navigate
label: Loan Disbursal
icon: thumbs-up
link: disbursal_link
Next is how we Export File in CSV from the datagrid.
options:
entityHint: member
export:
csv: { label: oro.grid.export.csv }
This method creates a download button through CSV report for the datagrid and provide an option for the user to download the datagrid file in an excel sheet.
Datagrid in Twig file
Twig uses a central object called the environment (of class Twig_Environment). Instances of this class are used to store the configuration and extensions, and are used to load templates from the file system or other locations.
In the code given below:
First we import and extend the ORO functionality, then you give the grid name and page title. With the help of grid name, it will map datagrid from datagrid.yml. Call and render is used to set the grid name and in “set gridname= ‘your data gridname” this is use to render.
Block navButton= to add button in the table.
{% extends 'OroUIBundle:actions:index.html.twig' %}
{% import 'OroUIBundle::macros.html.twig' as UI %}
{% import 'OroDataGridBundle::macros.html.twig' as dataGrid %}
{% set gridName = 'your datagrid name' %}
{% set pageTitle = 'Groups'|trans %}
{% block navButtons %}
{{ UI.addButton({
'path' : path('groups_new'),
'entity_label': 'Group'|trans
}) }}
{% endblock %}
Well then, that’s about it. Let us know if you liked this tutorial. For queries, feel free to comment below.
Cheers!
FOR MORE AWESOME TUTORIALS:
1. How To Embed EAV Model In Symfony2 Collection Form
2. How To Override FOSUserBundle
3. How To Create A Multi Column Design Layout Using Wookmark jQuery.
