5.10 table()

Purpose

With table(), you can create a new, or modify an existing table and its content on an SAP screen. You can add columns, populate data, or retrieve data from a table using column(). Additionally, you can perform other operations on the table's columns with ease. 

Note: You can specify the position of the table in different ways. Learn more about positioning the screen elements.

Syntax

With the following formats, you can easily create a table with any desired number of rows and columns, including all the required functionality.

Format 1:

Creates a table by specifying its name, title, and the desired number of rows and columns.

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

Note: When creating a new table, it will become visible only after columns have been added.

To add a column, use the following command:

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

Refer column() command section for more details.

Format 2:

Creates a table with reference to the screen elements.

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

Liquid UI provides two categories of commands to manage tables:

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

Properties

• startrow, startcol, endrow, endcol - row and column coordinates
• screen element - field name.

Parameters

The table command takes the following parameters for a Liquid UI table:

• name - Defines the name of a Liquid UI table control
• title - Defines the on-screen label of a Liquid UI table control
• rows - Defines the number of rows in a Liquid UI table control

Available Options

You can use the following options with the table command:

Options Detail

The following options are demonstrated using the existing table in the SAP screen.

Other system variables can be associated with SAP tables in addition to those listed above. The capabilities include:

Data population and retrieval

Note: You can use the table name and column name instead of the table title and labels to reference a column.

Retrieving data using System Variables

The table() supports numerous system variables. These variables enable you to extract data from any cell within the table. You can employ either of the following syntax options:

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

The available system variables are as follows:

_tabrow

To obtain the count of rows in a table.

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

_tabcol

To obtain the count of columns in a table.

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

_cursortabname

To retrieve the title of a table.

The table title is visible on the screen, while Liquid UI scripts employ the technical name.

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

_cursortabtechname

To retrieve the technical name of a table.

The technical name used by Liquid UI scripts appears while the table title appears on the screen.

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

_cursorcolname

To retrieve the heading of the table column.

Column heading appears on the screen while column name (technical name) is used by Liquid UI scripts.

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

_cursorcoltechname

To retrieve the technical name of a column in a table.

Column technical name is used by Liquid UI scripts while the column heading appears on the screen.

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

_tabrowabs

To obtain the absolute row number of the cursor's position in a Liquid UI table, even if there is a scrolling 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 cursor in a Liquid UI table, if there is a scroll operation.

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

Example 1: A simplified view of items of a Sales Order.

The following example shows a simplified view of Sales Order items.

Script

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

Script Details

Example 2: Selection of rows and columns at run time

Purpose

Using the table(), you can easily pre-select rows and columns in a Liquid UI table by utilizing the selectedrows and selectedcols parameters.

Syntax

You can select a specific row in a table using the following syntax.

table_name.selectedrows[row_index] = “X”;

You can select a specific column in a table using the following syntax.

table_name.selectedcols[col_index] = “X”;

• table_name - Represents the name of the Liquid UI table.
• row_index - Represents the row number you want to select.
• col_index - Represents the column number you want to select.

User Interface

To pre-select rows and columns in the Liquid UI table, follow the steps.

1. Navigate to the SAP Easy Access screen and delete the image container on the screen.
    

   // Deletes image container on the SAP Easy Access Screen 
   del("X[IMAGE_CONTAINER]");

2. Create a table labeled All items with 10 rows and 2 columns labeled Material and Quantity.
    

   // Creates table labeled All items
   table([1,1], [12,48],{"name":"proj", "title":"All items", "rows":10,"rowselection":true,"columnselection":true});  
   column('Material', {"table":"T[All items]", "size":30, "name":"matnr", "position":1, "table":"T[All items]"});        
   column('Quantity', {"table":"T[All items]", "size":10, "name":"qty", "position":2, "table":"T[All items]"});

3. As per the code, the pre-selected row and column are shown below.
    

   // For selecting a row of a table 
   proj.selectedrows[0] = "X";
   
   // For selecting a column of a table. 
   proj.selectedcols[1] = "X"; 

   
    

Note: selectedrows and selectedcols are arrays and their index starts from ‘0’

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 a 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 Liquid UI tables on the screen and read or write values 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 the 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.

Usage Details

• Add a column into SAP table

• Assign values to Liquid UI table

• Set cursor on table cell

• Assign values into SAP table from Liquid UI table

• Assigning values to table cells