Listing

The listing widget is used to show a list of values from the server. It is a widget that is completely scripted and gets the list from a plug-in SQL query. It also has many viewing and customizing options and manages paging of results.

Listing Options

Features of a Listing widget can be controlled by setting the opts properties before calling the make function. The default Listing options are:

list_opts = {
   cell_style : {padding:'3px 2px'},

   // style for alternate row
   alt_cell_style : {backgroundColor:'#F2F2FF'},

   // style for header
   head_style : {height:'20px',overflow:'hidden',verticalAlign:'middle',textAlign:'center',fontWeight:'bold',padding:'1px',fontSize:'13px'}
   head_main_style : {padding:'0px'},

   // buttons
   hide_export : 0,
   hide_print : 0,
   hide_refresh : 0,
   hide_rec_label: 0,
   show_calc: 1,

   // clear tab on "refresh"
   show_empty_tab : 1,
   show_bottom_paging: 1,
   no_border: 0
};

Listing Class

class Listing(head_text, no_index, no_loading)

head_text is the header of the widget, no_index means that the “Serial No” is not to be shown and no_loading means the “Loading...” spinner is to be hidden while the query is executed.

page_len

Length of one page output. Default 20

paging_len

Number of page pointers to be shown. Default 5

head_text

Text to be shown at the heading. Default “Results”

keyword

Keyword for each record. Default “records”

colnames

List of column labels

coltypes

List of column types

colwidths

List of column widths.

The listing only shows as many columns as specified in the `colwidths`

coloptions

List of column options. (Useful in case type is Link)

filters

Dictionary of filter objects

is_std_query

If this is true, it will add match permissions automatically. The query must be in Standard Query format.

make(parent)

Create the UI in the given parent Element. All filters must be added before this method is called

add_filter(label, ftype, options, tname, fname, cond)

Add a filter input widget to the listing. See example

remove_filter(label)

Remove a filter

remove_all_filters()

Remove all filters

add_sort(column_index, fname)

Add a sorting feature to a particular column

set_default_sort(fname, sort_order)

Set the default sort property

run()

Execute the query

std_cell(d, ri, ci)

Render the standard output in the cell, d is the resultset, ri and ci are row index and column index

Creating a Listing

To create a listing,

• Restrict the number of columns generated by specifying the colwidths
• Optionally declare colnames, coltypes and coloptions
• Declare the get_query method that will declare 2 queries * query * query_max
• To customize the output, declare the show_cell(cell, ri, ci, d) method to render the cell content.

See examples below

Examples

Example of a customized listing:

// create a new listing
var lst = new Listing();

// define the columns etc
lst.colwidths = ['5%','30%','15%','15%','20%','5%','10%'];
lst.colnames = ['Sr.','Email','Status','','','',''];
lst.coltypes = ['Data','Data','','','','',''];
lst.coloptions = ['','','','','','',''];

// define options
var opts = {};

opts.head_main_style = {};
opts.cell_style = { padding:'3px 2px', borderRight : '0px', borderBottom : '1px solid #AAA'}
opts.head_style = { padding:'3px 2px', borderBottom : '1px solid #AAA'}
opts.alt_cell_style = {};
opts.hide_print = 1;
opts.no_border = 1;

lst.opts = opts;

// define the query
lst.get_query = function(){

   // write your own query here
   this.query = repl("select name, enabled from ... where ... ");
   this.query_max = repl("select count(*) from ... where ...");
}

//show cell - customize output
lst.show_cell = function(cell,ri,ci,d){
   if (ci==1){
      if (d[ri][ci]==1){
         var hl=$a(cell,'span','Data');
         hl.innerHTML = 'Enabled';
         $y(hl,{color:'GREEN'});

      }
      else if (d[ri][ci]==0){
         var hl=$a(cell,'span','Data');
         hl.innerHTML = 'Disabled';
      }
   } else{

     // show standard output
     lst.std_cell(d,ri,ci);
   }
}

// add filters
lst.add_filter('Type', 'Select', ['','Old','New'].join(NEWLINE), 'Profile', 'user_type', '=');

// generate
lst.make(parent);