5.12 Table Properties

With Table properties, you can view and change the properties of the Table and Table content. For creating a Table, You need both Table and column commands.

1. In this article, we will be explaining you the Table properties with a column example, running on SAP Easy Access screen. Make sure to activate Liquid UI button and apply del command to clear all the elements from the screen as shown below:
    
   
    

   //Deletes the Easy Access Screen elements
   del("X[IMAGE_CONTAINER]");
   

2. Perform right click on the WYSIWYG editor to place the Table on the SAP screen. Then, a Create New Element window will popup. You will get a tooltip, when you place the cursor on the Table. It will display the fields required for UI control creation and provides you with the default values of Table:
   • Row - 10
   • column - 3
   • Height - 5
   • Width- 23
    
   

3. For creating the Table control, follow the below steps:

   1. Right Click on the screen to view the Create New Element window.
   2. Enter the Row coordinates of the screen.
   3. Enter the Column coordinates of the screen.
   4. Specify the Height of the Table.
   5. Specify the Width for the Table.
   6. Click on Table to create the Table on the screen.
    
   
    

   //Creates a default Table with the values entered in the Create New Element window
   table([1,1], [10,50],{ "title":"My table", "rows":10});
   column('Column 1',{ "name":"col1", "size":16, "position":"1", "table":"[My table]"});
   column('Column 2',{ "name":"col2", "size":16, "position":"2", "table":"[My table]"});
   column('Column 3',{ "name":"col3", "size":16, "position":"3", "table":"[My table]"});
   

4. 
   
   Double-Click on the Table to view its property window. You can edit the parameters in the property window.
    
   
5. After adding the Clear Table pushbutton and editing the columns, the screen appears as shown below.
    
   
    

   //Creates the table with number of rows as 10, name as mat1_table and title as Material Info.
   table([[1,1],[10,50],{"name":"matl_table","title":"Material Info","rows":10});
   //Creates column with title as Material for the mat1_table
   column('[Material',{"table":"matl_table","name":"z_matl","position":1,"size":15});
   //Creates column with title as Description for the mat1_table
   column('[Description',{"table":"matl_table","name":"z_matl_desc","position":2,"size":30});   
   //Creates pushbutton with name as Clear Table
   pushbutton([[11,1],"@01@Clear Table",{"process":clearTable});
   

6. In the script editor, you can edit the script and add functionality as per your requirement. Here the clearTable() function is added in the script editor to clear the values entered in the Table.
    
   
7. In the script editor, you can edit the script and add functionality as per your requirement. Here the clearTable() function is added in the script editor to clear the values entered in the Table.
    
   
    

   // Function to clear the Liquid UI table based on parameters
   function clear_values(tablename,columnArray,rows){    
       for (var loop=0;loop<rows;loop++){
           for (var col=0;col<columnArray.length;col++){    
               tablename[columnArray[col]][loop] = "";
           }
       }    
   }
   
   // Function to clear all columns 
   function clearTable(){
       if(typeof matl_table =='object')
   {
           clear_values(matl_table, ["z_matl","z_matl_desc"],20);
       }    
   }
   

8. Enter the values for the Material and Description columns and then deactivate the Liquid UI button to execute the screen.
    
   
9. As per the above example, you can create a table and delete the values entered in the table dynamically. To know more about how to add functionalities on the table, click here.
    

The Property window is categorized into below sections:

1. Original SAP Information: The information provided in this section is not editable. Every Table has following properties:
• Control: Specifies the screen element.
• Position: Specifies the onscreen coordinates of Table. This is a read-only field - it is not user-modifiable.
• Width: Specifies the width of Table in pixels.
• Height: Specifies the height of the Table in pixels.
• Size: Specifies the coordinates of the Table in [Width, Height].
• Text: Specifies the onscreen label name of the Table.
• Tech Name: This field maintains the Liquid UI technical name of the Table.
• Field Name: This field specifies the field name of the Table. The field name for the Table is T[Text].
  Note: Original SAP Information parameters are non-editable.
2. Enhancements: To edit the Table property, you can edit with Enhancements. It includes the following options:
• Row: Specifies the onscreen row number of the Table.
• Column: Specifies the onscreen column number of the Table.
• Width: Specifies the width of Table in pixels.
• Height: Specifies the height of the Table in pixels.
• Text: Specifies the onscreen label name of the Table.
• Relative To: Specifies if the element is being positioned relative to another screen element.