Visualize Data in Data Grid in Oro Platform

In this post, we are going to visualize the data in a data grid. For this, we are using the earlier posts

  1. Generating Bundle
  2. Generating Entity
  3. Loading Data Fixtures

Ok, first of all, we need to define our data grid in the

/src/<Bundle Name>/Resources/config/oro/datagrids.yml

In this file, we are going to configure our grid as follow.

datagrids:
    app-tasks-grid:
        source:
            type: orm
            query:
                select:
                    - task.id
                    - task.subject
                    - task.description
                    - task.dueDate
                    - priority.label AS taskPriority
                from:
                    - { table: BlogBundle:Task, alias: task }
                join:
                    left:
                        - { join: task.priority, alias: priority }
        columns:
            id:
                label: ID
                frontend_type: integer
            subject:
                label: Subject
            description:
                label: Description
            dueDate:
                label: Due Date
                frontend_type: datetime
            taskPriority:
                label: Priority
        sorters:
            columns:
                id:
                    data_name: task.id
                subject:
                    data_name: task.subject
                description:
                    data_name: task.description
                dueDate:
                    data_name: task.dueDate
                taskPriority:
                    data_name: priority.label
            default:
                id: ASC
        filters:
            columns:
                id:
                    type: number
                    data_name: task.id
                subject:
                    type: string
                    data_name: task.subject
                description:
                    type: string
                    data_name: task.description
                dueDate:
                    type: datetime
                    data_name: task.dueDate
                taskPriority:
                    type: string
                    data_name: priority.label

You may notify so many words on the above snippets. It’s as it is. As a developer, you can understand the semantics of the code for the data grid.

Now we need a Controller to process the request to generate the data grid. create TaskController and extends to the Controller and process the request as follow.

<?php

namespace BlogBundle\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Template;

/**
 * @Route("/task")
 */
class TaskController extends Controller
{
    /**
     * @Route("/", name="app_task_index")
     * @Template()
     */
    public function indexAction()
    {
        return array();
    }
}

on the above code we have define the controller route to /task and we define the data grid template on low level method called indexAction()

Then change the config/route.yml last line code to

blog:
    resource: "@BlogBundle/Controller/"
    type:     annotation
    prefix:   /

Then we need to create a view for route app_task_index, so for that create twig template on Resources/views/Task/index.html.twig

To visualise the grid we extending to the OriUiBundle and assign the grid app-tasks-grid as follow

{% extends 'OroUIBundle:actions:index.html.twig' %}

{% set gridName = 'app-tasks-grid' %}
{% set pageTitle = 'Task' %}

additionally we assign a page title for giving the title to the grid.

Now navigate to /app_dev.php/task you can see the grid.

Let’s add a menu on application_menu, for this we adding a file called navigation.yml on the location <Bundle Name>/Resources/config/oro/navigation.yml as follow

navigation:
  menu_config:
      items:
          task_list:
              label: Tasks
              route: app_task_index
      tree:
          application_menu:
              children:
                  task_list: ~

 

That’s it. you can able to see your task table data on the data grid as follow.

Selection_056.png

Yeah! Again we did it!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s