New manage screen for Awesome Enterprise

To create a manage screen by using DataTable:

Dependencies:

  • manage service

 

Create the manage query array as like we do in enterprise manage screens.

for more reference about above config see the following tutorials:

 

Datatable sends some parameter to this array we can use these parameters to limit results or sort the data

as above in offset key I pass the ‘start’ parameter from the request this parameter is sent by the datatable ajax request.

ordering keys:

  • env.order_key: this variable will return the column key on which sorting to be done
  • env.order_dir: this variable will return the direction of the sorting eg: asc,desc

Columns:

To pass the css classes to the columns add the class parameter to the column array

To remove sorting for the particular column just add the no-sort class to that column

If one of column needs to have custom html then this can be done by using calc variable as bellow

In this example calc value should be the javascript return statement this return value will be added in every column by the DataTable

The value of the column can be access by using data variable, and all the current row parameters can be accessed using row parameter.

We can use a javascript function to process the column value. eg: if we are getting the column value as 1995-07-16 05:05:05 and we want to show this is this format 05:05 16 Jul 1995

then we can use javascript function as follows:

In above example I am calling the manage_api library of the current app and calling the manage_date function which will change the date format of the given date.

datascript:

To filter the datatable result we need to pass the filter parameters to achive this datascript parameter is used.

In this parameter write the javascript function which will mention the all the filter parameters, this parameter will available in request at server side.

To learn more about this function view this forum

eg:

In the above code the function set the filter parameters by accessing the spa.manage_api.filters array.

extraparams

To add more parameter while creating the DataTable instance this parameter is used

In the above code default order column provided.

Manage Service – datatable

Pass the configuration array to the manage service datatable module

as like

this service will create the view for the datatable

Datatable Instance

The javascript datatable instance variable  name is stored in  env variable named as datatabletoken

this instance can be accessed as spa.[env.get datatabletoken /]

in the below example I have added function on init trigger of datatable instance.

Automatic CSV Download:

To download the csv data of the filtered result call this js function

OR just add this class to the button on which after clicking CSV should be downloaded

class:

Note: the csv data is got from the server response, so any html changes in the column of datatable wont affect the csv data.

Updated on Jun 19, 2021