Liquid UI - WS Reference Library

table()


Purpose

With table(), you can create and modify table and table content. 

Using table() command, you can create a new table, modify an existing table in SAP, such as, adding rows & columns. You will need to use column() command to add column to a table, populate data or retrieve data from a table.

In table() command, if all the columns present in a table does not appear, you can fix few columns, and can view other columns using horizontal scrolling.  Further, you can also make rows and columns of a table to appear as pre-selected.


Syntax

table([startrow,startcol],[endrow,endcol],{"name":"table name","title":"table title","rows":number});

Note: While creating a new table, the table will appear only after adding columns.

To add a column, use the following command:

column("heading",{"size":x,"name":"column_name","option":value…});

Refer column() command section for more details.

To manage tables, Liquid UI provides two categories of commands:

  • Options to manage Rows and Columns
  • Data Population and Retrieval


Properties

  • startrow, startcol, endrow, endcol - row and column co-ordinates


Available Options

You can use the following options with the table:

"columnselection":".."

"columnselection":true - Specifies one or more columns in a table as being selected.

"fixedcolumns":".."

"fixedcolumns":X - The number of columns that will be fixed during horizontal scrolling operation. 'X' is the column count.

"rowselection":".."

"rowselection":true - Specifies one or more rows in the table as being selected.

"singlecolumnselection":".."

"singlecolumnselection":true - Specifies a single column in the table as being selected.

"singlerowselection":".."

"singlerowselection":true - Specifies a single row in the table as being selected.

"Data population and retrieval":".."

Populates and retrieves table data.


Options Detail

columnselection

  1. This option specifies one or more columns in a table as being selected.

  2. table([1,2],[10,95],{"name":"va02_all_items","title":"Sales Order Items","rows":row_max,"columnselection":true});
  3. The columnselection option will allow the selection of all the columns in a table.

fixedcolumns

  1. This option holds the number of columns that will be fixed during horizontal scrolling operation.

  2. table([1,2],[10,95],{"name":"va02_all_items","title":"Sales Order Items","rows":row_max,"fixedcolumns":4});
    
  3. As per the code the very first 4 columns are fixed to the table and horizontal scrolling starts from fifth column.

rowselection

  1. This option specifies one or more rows in the table as being selected.

  2. table([1,2],[10,95],{"name":"va02_all_items","title":"Sales Order Items","rows":row_max,"rowselection":true});
  3. The user is able to make rowselection only if it is set to true.

singlecolumnselection

  1. The singlecolumnselection option specifies a single column in the table as being selected.

  2. table([1,2],[10,95],{"name":"va02_all_items","title":"Sales Order Items","rows":row_max,"singlecolumnselection":true});
  3. When user click on a column, single column will get selected.

singlerowselection

  1. The singlerowselection option specifies a single row in the table as being selected.

  2. table([1,2],[10,95],{"name":"va02_all_items","title":"Sales Order Items","rows":row_max,"singlerowselection":true});
  3. When user click on a row, single row will get selected.

In addition to the above options, there are also other system variables that can be associated with table. The capabilities are:

Data population and retrieval

Data Population

  1. Liquid UI provides the following ways to populate table data

  2. Populating single values:

    table_name.Col_name[row_index] ="xyz";
  3. Populating multiple values:

    var x; 
    for(x=0;x<10;x++) 
    proj.qty[x]=x;
    

Data Retrieval

  1. Liquid UI provides the following ways to retrieve table data

  2. First and last visible rows:
    println("firstvisiblerow" + <'T[All items]'>.firstvisiblerow);
    println("lastvisiblerow" + <'T[All items]'>.lastvisiblerow);
  3. Table Cell values:
    var i;
    for(i=0;i< table name.column name.length;i++)
    println("table name.column name.[" + i + "] " + table namej.column name[i]);
    
  4. Selected rows and columns:
    var k;
    for (k=0;k< table name.selected rows.length;k++)
    println ("-----table name.selectedrows.["+ k +"] "+ table name.selected rows[k]);
    

Note: Use table name and column name, not table title or column label, while referring to a column.

Retrieving data using System Variables

There are several system variables that you can use with the table() command. These can be used to retrieve data contained in any cell. You can use either of the following syntaxes:

V[cursortabname.cell.column_name.row_number]
V[cursortabname.cell.column_number.row_number]

The available system variables are as follows:

_tabrow

To retrieve the number of rows in a table.

println("The number of rows is >> " +_tabrow);
_tabcol

To retrieve the number of columns in a table.

println("The table columns are >> " +_tabcol);
_cursortabname

To retrieve the title of a table.
Table title appears on the screen while technical name is used by Guixt scripts.

println("Table title is: " + _cursortabname);
_cursortabtechname

To retrieve the technical name of a table.
Technical name is used by Guixt scripts appear while the table title appears on the screen.

println("Table name is:" +_cursortabtechname);
_cursorcolname

To retrieve heading of a column of the table.
Column heading appears on the screen while column name (technical name) is used by GuiXT scripts.

println("Column title is:" +_cursorcolname);
_cursorcoltechname

To retrieve the technical name of a column in a table.
Column technical name is used by GuiXT scripts while the column heading appears on the screen.

println("Column title is:" +_cursorcoltechname);
_tabrowabs

To retrieve the absolute row number of the position of cursor position in a GuiXT table if there is a scroll operation.

println("Absolute cursor row is:" +_tabrowabs);
_cursorrow

To retrieve the first row of a table.

println("Row where table begins: " +_cursorrow);
_cursorcol

To retrieve the absolute row number of the position of cursor in a Liquid UI table, if there is a scroll operation.

println("Column where table begins:" +_cursorcol);


Example

A simplified view of items of a Sales Order.


Script

table([8,2],[10,95],{"name":"va02_all_items","title":"Sales Order Items","rows":row_max,"rowselection":true,"columnselection":true}); 

Script Details


Tips and Tricks

  • Arrays using Key/Value Pairs

    Insert and retrieve values from an array using Key/Value pairs.

    table([1,1],[20,50],{"name":"matl_table","title":"Material Info","rows":20});

    Learn more about Arrays implementation with tables.

  • Clear Liquid UI Table

    Clear all or few of the columns of a Liquid UI table.

    table([1,1],[20,50],{"name":"matl_table","title":"Material Info","rows":20});

    Learn more about Liquid UI Table.

  • Dynamic create table, and read/write value into table cell

    This example is to create the logic of displaying multiple LiquidUI table in the screen, and read or write value from the table.

    table([start_row,10],[start_row+5,40],{"name":"z_table_"+i,"title":"Record"+i,"rows":50});

    Learn more about Dynamic Table Data Handling.

  • Change width of the SAP table

    In this example, you can see how easy it is to change the width of a SAP table.

    tablewidth([T[table_name]],50);

    Learn more about Table Width.