Liquid UI - Documentation - 5.03 column()

5.03 column()


Purpose

With the column(), you can add a column in both native SAP tables and the Liquid UI tables.

Furthermore, you can add checkboxes, and push buttons within the column. In this article, you will learn various options to use the column command.


Syntax

You can add columns to the tables with the required functionalities using the following formats.

Format 1:

Adds a column to the specified native SAP table

column('heading',{"table":"[tablename]","name":value,"size":value,"option":value..});

Format 2:

Adds a column to the table on the screen; here, the size option is mandatory to create a column.

column('heading',{"name":value,"size":value,"option":value..});
// size option is mandatory to create a column
column('heading',{"size":value});
 

Note: You can create a column in the SAP tables using various options. Learn more about this format.

 

Format 3:

Adds a column to the mentioned table at the specified row and column.

table([startrow,startcol],[endrow,endcol],{"name":"table name","title":"table title","rows":number});
column('heading',{"table":"[tablename]","name":value,"size":value,"option":value..});
 

Note: You can create a column in the Liquid UI table using various options. Learn more about this format.


Properties

  • heading - column heading


Available Options

You can use the following 16 options in the column command:

"alignright":".."

"alignright": true - This option will align the field value to the right when set to 'true'.

"checkbox":".."

"checkbox": true - The column value will be displayed as a checkbox if this option is set to true. Possible values are X and ' '.

"intensified":".."

"intensified": true - The field value is displayed in red color if this option is set to 'true'. 

"keycolumn":".."

"keycolumn": SAPColumnName - When you add or delete rows in an SAP table, the row number 'absrow' can change, and the corresponding index may disappear. To maintain consistent row references, you can use the 'keycolumn' option, which relates the new column with the SAP column. This allows automatic indexing of rows with the custom column based on the value of the assigned keycolumn.

"label":".."

"label": push button name - This option shows an icon with text on the push button using the notation "@iconid@text"

"name":".."

"name": string - This option defines the column's internal name, allowing scripts to refer to it. The label remains invisible to the user.

"numerical":".."

"numerical": true - This option allows only numeric input when set to 'true'.

"position":".."

"position": value - This option determines the column number within the table. If not specified, the new column will be created as the last column in the table.

"pushbutton":".."

"pushbutton": true -  The column value is displayed as a push button when set to true.

"process":".."

"process": process name - This option applies only to the push button and determines the function to be executed when set to true.

"readonly":".."

"readonly": true - This option designates the new column as non-editable.

"size":".."

"size": value - This option sets the size of the column in terms of the number of characters. It is essential to use the size option when creating a column in the SAP table.

"searchhelp":".."

"searchhelp": true - Defines the searchhelp (F4) for the new column.

"table":".."

"table": table name - This option defines the table name where the column will be created. It is particularly useful when multiple tables are present on the screen.

"techname":".."

"techname": SAPcolname - Defines the technical name of the column.

"uppercase":".."

"uppercase": true - Converts lowercase characters to uppercase when set to true.


Options Detail

All the mentioned options are demonstrated on the VA02 Overview screen in SAP. To implement them, create the SAPMV45A.E4001.sjs file in the Liquid UI script folder, and all additions will be made to this file. 

The table displaying all items in the VA02 Overview screen is shown below for the selected options.

alignright

  1. This option allows you to align a field value to the right-hand side of the column.

  2. column('Material type',{"table":"[All items]","name":"z_mycol","size":23,"position":3,"alignright":true});
    
  3. As per the code, the alignright option assigns Material type column values to the right-hand side.

checkbox

  1. This checkbox option lets you place a checkbox in each cell of the column. The checkbox selection values are X and ' '.

  2. column('Verified',{"table":"[All Items]","name":"va01_clitm","size":15,"position":3,"checkbox":true});
  3. As per the code, the Verified column created has a checkbox option. You can either check or uncheck the checkbox in the column.

intensified

  1. This option allows you to modify the color of values in the column. By default, the color is set to red

  2. column('Material type',{"table":"[All Items]","name":"va01_clitm","position":3,"size":23,"intensified":true});
  3. As per the code, the intensified option turns Material type column values into red color.
     

    Note: This option cannot be used with the 'numerical' and 'readonly' option.

keycolumn

  1. If you add or delete rows in an SAP table, the 'absrow' row number can change. The matching index will also disappear in this case, so this option lets you relate the new column with the SAP column to create a consistent reference for the rows. If this option is used, automatic indexing of the rows with the custom column will be based on the value of the assigned keycolumn.
  2. column('Net weight',{"table":"[All Items]","name":"z_mweight","size":17,"position":3,"keycolumn":"Item"});
  3. When you use the keycolumn option, the newly added column becomes an integral part of the SAP table, any actions performed on the table will impact the column. If not utilized, the column remains independent of the table. Therefore, actions on the table won't affect the column, maintaining its separate functionality.

label

  1. This option allows you to assign icons and text to all push buttons within the column. Optionally, you can use "@Iconid@Text" notation to specify an icon alongside the text for customization.

  2. column('Plant',{"table":"z_engr_bomtable", "name":"doc_push", "position":2, "size":10, "label":"@AA@", "pushbutton":true,"fcode":"?","process":RFCfunction});
    
  3. The label option assigns the name on the push buttons under a column.
     

    Note: This option is used with the push button option.

name

  1. By using the name option, you can assign a technical name to the column, which remains hidden from the user. This name can be used for Liquid UI script reference.

  2. column('Plant',{"table":"[All Items]","size":10,"position":3,"name":"z_plant"});
  3. As per the code, the column name is Plant and the technical name is z_plant.

numerical

  1. This option lets you restrict a column to accept only numerical values when set to “true”.

  2. column('Plant',{"table":"[All Items]","name":"va01_clitm","position":3,"size":10,"numerical":true});
  3. The Plant column allows only numerical characters. It doesn't take alphabet characters as input.
     

    Note: This option cannot be used with the 'uppercase' option.

position

  1. With the position option, you can specify the column's location within the table. If not specified, the new column will appear as the last column in the table.

  2. column('Plant',{"table":"[All Items]","name":"z_plant","size":10,"position":5});
  3. As per the code, the plant column is set to the fifth position.

pushbutton

  1. This option displays the column value as a push button when set to true.

  2. column("Plant", {"table":"z_engr_bomtable", "name":"doc_push", "position":2, "size":10, "label":"@AA@", "pushbutton":true,"fcode":"?","process":RFCfunction});
    
  3. As per the code, the push button option displays Plant column values in the form of pushbuttons.
 

Note: You can create a column value as a push button only in the Liquid UI table.

process

  1. The process option is applicable when the column contains push buttons. It enables you to specify the function name that will be executed when a push button is activated.

  2. column("Plant", {"table":"z_engr_bomtable", "name":"doc_push", "position":2, "size":10, "label":"@AA@", "pushbutton":true,"fcode":"?","process":RFCfunction});
    
  3. The process option executes the RFC function, once you select the pushbutton.
     

    Note: This option is used along with the push button option.

readonly

  1. The read-only option allows you to create a non-editable column, preventing any new values from being added.

  2. column('Material Type',{"table":"[All Items]","name":"z_mycol","size":24,"position":3,"readonly":true});
  3. As per the code, the Material type column cannot be edited as this option is set to true.
     

    Note: This option cannot be used with the 'intensified' option.

search help

  1. This option lets you define a search help (F4 match code) for the newly created Liquid UI column using the search help option details of the existing SAP standard field or table column.
  2. To add searchhelp to a user-created column in the All items table, please add the following code to the script file:
  3. column('Material Type',{"table":"[All Items]","size":23,"name":"z_testcol","position":3,"searchhelp":"S_MAT1"});
  4. As per the code, the searchhelp option is created for the Material type column.
     

    Note: This option cannot be used with the 'numerical' option.

  5. You can pass parameters with the import flag in the shselname1 and shselvalue1 option to restrict search help and use the parameters with the export flag in shname1 and shdest1 options to restrict the searchhelp values. You can also pass the dynamic values of other fields in the shdest1 option to restrict the search help values for a column.
  6. column('Document',{"table":"[All items]","name":"z_mycol","size":23,"position":3, "searchhelp":"CV01", "shselname1":"DOKAR", "shselvalue1":"DES", "shname1":"DOKAR","shdest1":"cell[z_engr_bomtable,Type,row]","uppercase":true});});
    
  7. As per the code, the searchhelp related options help you to display only the relevant search help values for the Document column values.

size

  1. Using the size option, you can assign a size to the column, determining the number of characters (x) each cell can accommodate.

  2. column('Plant',{"table":"[All Items]","size":20,"name":"va01_clitm","position":3,"size":7});
  3. The Plant column can take up to 7 characters, as the size value in the above script is 7.

table

  1. The table option allows you to specify the name of the table in which the column will be created. This flexibility extends to both SAP tables and Liquid UI tables.

  2. column('Plant',{"table":"[All Items]","position":3,"size":15,"name":"va02_type"});
  3. The table option is more useful in adding columns to a particular table.

techname

  1. This option lets you assign a technical name for the unique identification of the column in the table. The techname of the column is invisible. 

  2. column('Plant',{"table":"[All items]","size":15,"name":"z_col","techname":"VBAP-WERKS"});
  3. The techname option for a column provides search help.

uppercase

  1. This option converts the lowercase characters of the column to uppercase.

  2. column('Material type',{"table":"[All items]","size":23,"name":"va01_clitm","uppercase":true});
    
  3. Here the uppercase option converts the lowercase characters entered in the Material type column to uppercase.
 

Note: This option cannot be used with the numerical option.


Example

The usage of the column command is demonstrated on the existing All items table of the VA02 Overview screen, as shown in Figure 1:

Figure 1: Scenarios of column() command


Script

//Changes the position of column and make it as readonly option 
column('MaterialType',{"table":"[All Items]","name":"va01_material","size":10,"position":1,"readonly":true});
//Adds techname and intensified to the column
column('Taxname',{"table":"[All items]","size":10,"name":"va02_tax1","position":2,"techname":"VBAP-WERKS","intensified":true});
//Adds keycolumn and checkbox option
column('Tax1',{"table":"[All items]","size":5,"name":"va02_tax","checkbox":true,"keycolumn":"Item","position":3});
//Adds searchhelp and alignright option
column('Material Tested',{"table":"All items","size":10,"name":"z_testcol","position":4,"alignright":true,"searchhelp":"S_MAT1","shname":"MATNR","shname1":"VBAB_MATNR","shdest1":"V[z_testcol_desc]"});
//Sets name and size to the column
column('SU1',{"table":"[All Items]","name":"va02_SU1","size":5,"numerical":true,"position":5});
//Sets uppercase and name option to the column
column('Material Description',{"table":"[All items]","size":10,"name":"va01_clitm","position":6,"uppercase":true});


Usage Details


Can't find the answers you're looking for?