UI Listing Grid

Objective

The Grid is a UI library that provides an organized display of data records. The library is available in Dashboard UI and can be invoked by any module.

Outline

Features

The Grid offers the following Features:

Feature	Description
Sorting	Change the sorting of your data based on column names
Pagination	Breaks the data list into pages, provides First - Next - Previous - Last and page numbering navigation
Filtering	Narrow down the data records based on keyword(s) entered in the filter box
RRP	Change the Records Per Page Limit
SRO	Attach functionality to perform Single Record Operation(s)
MRO	Attach functionality to perform Multi Record Operation(s)

Usage

The Grid requires a configuration object that includes the above features and the scope of the module to function. The below table explains the parameters passed on to the grid constructor.

Parameter	Description
Scope	The scope of the module's controller, refer to Create UI Module for more information.
Configuration	A configuration object that contains the data, the features and functionality the grid is requested to provide.

Code Sample:

//create a grid configuration object
var config = {
    "grid": {
        //specify the list of columns the grid should render
        'columns': [
            {'label': 'Username', 'field': 'username'},
            {'label': 'First Name', 'field': 'firstName'},
            {'label': 'Last Name', 'field': 'lastName'},
            {'label': 'Email', 'field': 'email'},
            {'label': 'Status', 'field': 'status'},
            {'label': 'Last Login', 'field': 'lastLogin', 'filter': 'date'}
        ],

        //specify the RRP values
        'recordsPerPageArray': [5, 10, 50, 100],

        //specify the default RRP limit otherwise Grid will use first entry from above array (optional)
        'defaultLimit': 10,
    },

    //specify the default sorting column otherwise the grid will use the first column (optional)
    'defaultSortField': 'username',

    //provide the array or records objects that the grid should render
    "data": myDataRecords,

    //specify the list of SRO operations
    'left': [
        {
            'label': 'Edit',            //operation label shows up on hover
            'icon': 'pencil2',          //operation icon, shows up in grid (optional)
            'handler': 'editMember'     //name of the function that will be invoked when this operation is requested
        },
        {
            'label': 'Update ACL',
            'icon': 'unlocked',
            'handler': 'updateAcl'
        }
    ],

    //specify the list of MRO operations
    'top': [
        {
            'label': 'Suspend Members', //operation label shows up in the Top Actions Menu
            'msg': "Are you sure you want to suspend the selected member(s)?", //text to include in confirm popup
            'handler': 'suspend'        //name of the function that will be invoked when this Operation is requested
        },
        {
            'label': 'Active Members',
            'msg': "Are you sure you want to activate the selected member(s)?",
            'handler': 'activate'
        }
    ]
};

//call the grid and pass on the configuration object
buildGrid($scope, config);

The above code snippets demonstrates how the grid configuration should be. When buildGrid was invoked, the $scope of the module was passed. The grid uses the $scope parameter when attempting to invoke an SRO or MRO operation since the later are not part of his scope.

Custom Operations

The Grid does not contain the code of the SRO or MRO operations because it does not know what your module business logic is about, it only provides you with the mean to invoke them.

When the grid invokes an SRO operation, it passes the record data to it. It is up to you to decide what to with that data.
When the grid invokes an MRO operation, and since the later is applied on multiple records, the grid passes a list that contains the selected records only. It is also up to you to decide what to do with these records.

Navigate to Create UI Module and see how you can include the grid in your UI Module.