Liquid UI - Documentation - 4.05 Positioning the screen elements

4.05 Positioning the screen elements


Liquid UI WS allows you to define the position of a screen element anywhere on the SAP screen. You can either specify a fixed positioning using row and column values or relative positioning with respect to other screen elements. Also, you can replace an existing screen element with a new screen element.

Screen Elements can be used to change the UI of the SAP screens. Screen elements such as box, checkbox, comment, dropdownlist, image, inputfield, pushbutton, radiobutton, table, text, textbox are also be called as control elements or fields.

You can specify the position of a screen element in different ways as shown below:


Available Options:

You can use the any of the following options for positioning the screen elements:

"Option1":".."

screenelement([row,col],"labelname",{“options”:”values”});

"Option2":".."

screenelement(“[row,col]”,"labelname",{“options”:”values”});

"Option3":".."

screenelement({"field":"F[screenelement name]","offset":[row,col]},"label name");
(or) screenelement({"field":"F[screenelement name]","offset":"[row,col]"},"label name");

"Option4":".."

screenelement("F[screenelement name]+[row,col]","label name",{“options”:”values”}});
(or) screenelement("F[screenelement name]-[row,col]","label name",{“options”:”values”}});

"Option5":".."

screenelement([TOOLBAR],"label name",{"options":"values"});

"Option6":".."

screenelement("F[screenelement name]","label name",{"options":"values"}); 


Syntax

Option 1: Positioning the screen element using row and column values

screenelement([row,col],"labelname",{“options”:”values”});
//Groupbox positioned with four coordinate values where top left corner at (2,9) and its bottom right corner at (13,56) box([2,9],[13,56],"Sales & Distribution");
//Checkbox positioned at row 10 and column 49 on the screen
checkbox([19,49],"Bulk Material",{"default":"X"});
//Comment positioned at row 20 and column 21 on the screen comment([20,12],"The notification information appears on the Create PM screen");
//Dropdownlist positioned at row 5 and column 30 on the screen dropdownlist([5,30], "z_salesorg_list", {"refer":"z_va01_salesorg","width":25,"process":z_set_sorg});
//Image positioned at row 1 and column 1 on the screen image([1,1],"guixt.bmp",{"nobuffer":true});
//Inputfield positioned with textfield at row 1, column 0 and editfield at row 1, column 10 inputfield([1,0],"Quantity",[1,10],{"name":"z_mb1b_qty","size":5,"alignright":true});
//Radiobutton positioned at row 11 and column 19 on the screen radiobutton([11,19],"Finished Products"});
//Pushbutton positioned at row 18 and column 36 on the screen pushbutton([18,36], "@0Y@Create Quotation", "/nva21", {"disabled":true,"process":va0xCreateOrderOrQuote});
//Table positioned at row 1 and column 5 where table width= 45-5:40 and table height =10-1:9 table([1,5],[10,45],{"name":"va02_all_items","title":"Sales Order Items","rows":row_max,"columnselection":true});
//Text positioned at row 7 and column 25 on the screen text([7,25],"Enter Notification Information",{"size":30});
//Textbox positioned at row 1 and column 48 with textbox width=87-48:39 and height=4-1:3 textbox([1,48],[4,87],{"name":"z_va01_term_of_delivery_text"});

 

Option 2: Positioning the screen element using a string of row and column values

screenelement(“[row,col]”,"labelname",{“options”:”values”});
//Groupbox positioned with four coordinate values where top left corner at (2,9) and its bottom right corner at (13,56) box("[2,9]","[13,56]","Sales & Distribution");
//Checkbox positioned at row 10 and column 49 on the screen checkbox("[19,49]","BulkMaterial",{"default":"X"});
//Comment positioned at row 20 and column 21 on the screen comment("[20,12]","The notification information appears on the Create PM screen");
//Dropdownlist positioned at row 5 and column 30 on the screen dropdownlist("[5,30]", "z_salesorg_list", {"refer":"z_va01_salesorg","width":25,"process":z_set_sorg});
//Image positioned at row 1 and column 1 on the screen image("[1,1]","guixt.bmp",{"nobuffer":true});
//Inputfield positioned at row 1 and column 0 on the screen inputfield("[1,0]","Quantity","[1,10]",{"name":"z_mb1b_qty","size":5,"alignright":true});
//Radiobutton positioned at row 11 and column 19 on the screen radiobutton("[11,19]","Finished Products"});
//Pushbutton positioned at row 18 and column 36 on the screen pushbutton("[18,36]", "@0Y@Create Quotation", "/nva21", {"disabled":true,"process":va0xCreateOrderOrQuote});
//Table positioned at row 1 and column 5 where table width= 45-5 and table height =10-1 table("[1,5]","[10,45]",{"name":"va02_all_items","title":"Sales Order Items","rows":row_max,"columnselection":true});
//Text positioned at row 7 and column 25 on the screen text("[7,25]","Enter Notification Information",{"size":30});
//Textbox positioned at row 1 and column 48 with textbox width=87-48 and height=1-4 textbox("[1,48]","[4,87]",{"name":"z_va01_term_of_delivery_text"});

Note: You can use double quotes to row and column coordinates to define the position of a screen element.

 

Option 3: Positioning the screen element with respect to other screen element on the screen using offset coordinate values

screenelement({"field":"F[screenelement name]","offset":[row,col]},"label name");
(or) screenelement({"field":"F[screenelement name]","offset":"[row,col]"},"label name");
//Pushbutton positioned with respect to Sale Office field using offset coordinates at row 3 and column 3 pushbutton({"field":"F[Sales Office]","offset":[3,3]},"@0Y@Create Quotation");

//Checkbox positioned with respect to Order Type field using offset coordinates at row 7 and column 28
checkbox({"field":"F[Order Type]","offset":[7,28]},"Final Confirmation");
//Pushbutton positioned with respect to Material field using offset coordinates at row 1 and column 1 radiobutton({"field":"F[Material Type]","offset":[1,1]},"Finished Product",{"[material type]":"FERT","default":"X"});
//Comment positioned with respect to Notification Type field using offset coordinates at row 5 and column 2 comment({"field":"F[Notification Type]","offset":[5,2]},"The notification information appears on the Create PM screen");
//Dropdownlist positioned with respect to Order Type field using offset coordinates ar row 7 and column 28 dropdownlist({"field":"F[Order Type]","offset":[7,28]},"mylist",{"refer":"F[Order Type]","width":30,"process":test_dropdown});
//Image positioned with respect to Organizational Data Office field using offset coordinates at row 1 and column 45 image({"field":"G[Organizational Data]","offset":[1,45]},"guixt.bmp",{"nobuffer":true});
//Text positioned with respect to Notification Type field using offset coordinates at row 5 and column 2 text({"field":"F[Notification Type]","offset":[5,2]},"Enter Notification Information",{"size":30});
//Radiobutton positioned with respect to Order Type field using offset coordinates at row 7 and column 28 radiobutton({"field":"F[Order Type]","offset":[7,28]},"Plant 2000",{"name":"z_mm01_plant","value":2000});
//Inputfield positioned with respect to Processing groupbox field using offset coordinates at row 1 and column 1 inputfield({'field':'G[Processing]','offset':[1,1]},"Date paperwork rec'd",{"name":"z_strdt","size":10,"date":true});

 

Option 4: Positioning the screen element with respect to other screen elements on the screen

screenelement("F[screenelement name]+[row,col]","label name",{“options”:”values”}});(or)
screenelement("F[screenelement name]-[row,col]","label name",{“options”:”values”}}); 

//Order Type groupbox positioned with respect to Organizational Data groupbox with coordinates box("G[Organizational Data]+[-4,0]", [3,61], "Order Type");
//Print repair label checkbox positioned with respect to Organizational Data groupbox with coordinates checkbox("G[Organizational Data]+[1,35]", "Print repair label",{"name":"print_label","default":" "});

//Comment positioned with respect to Sold- To Party field at row 0 and column 30 comment("F[Sold- To Party]+[0,30]", "Please enter Sold-to party and Ship-to Party details",{"left":true});

//Dropdownlist positioned with respect to Sales Office at row 0 and column 30 dropdownlist("F[Sales Office]+[0,30]","mylist",{"refer":"F[Order Type]","width":30,"process":test_dropdown});

//Image positioned with respect to Organizational Data field at row 2 and column 30 image("G[Organizational Data]+[2,30]","guixt.bmp",{"nobuffer":true});

//Inputfield positioned with respect to Sales Office field where text field at row 0 and column 30 and inputfield at row 0 and column 45
inputfield("F[Sales Office]+[0,30]","Default Plant:","F[Sales Office]+[0,45]",{"name":"g_default_plant","size":4,"rf_autotab":2});

//Create Quotation pushbutton positioned with respect to Sales Office at row 3 and column 0
pushbutton("F[Sales Office]+[3,0]", "@0Y@Create Quotation");
//Radiobutton positioned with respect to Organizational Data groupbox at row 5 and column 35 radiobutton("G[Organizational Data]+[5,35]","Plant 1000",{"name":"z_mm01_plant","value":1000});
//Table positioned with respect to Organizational Data groupbox where row1 at 0,column1 at 55, row2 at 10 and column2 at 95 table("G[Organizational Data]+[0,55]",[10,95],{"name":"va01_AllItems","title":"Sales Order Items","rows":row_max,"columnselection":true});
//Text positioned with respect to Material field at row 0 and column 46 text("F[Material]+[0,46]","Raw Material");
//Textbox positioned with respect to Sold- To Party field where placed row1 at 0, row2 at 4, column1 at 4 and column2 at 46 textbox("F[Sold- To Party]+[0,46]",[4,87],{"name":"z_va01_term_of_delivery_text"});

 

Option 5: Positioning the screen element on the toolbar

screenelement([TOOLBAR],"label name",{"options":"values"});

//Pushbutton positioned at the toolbar of an SAP screen

pushbutton([TOOLBAR],"label name","/n[tcode]",{"separator":true});
//Image positioned at the toolbar of an SAP screen image([TOOLBAR],"liquid.bmp");

Note: You can place only pushbutton on the toolbar. 

 

Option 6: Replacing existing screen element with a new screen element

screenelement("F[screenelement name]","label name",{"options":"values"});

//Replaces Material text field with Raw Material
text("F[Material]","Raw Material");
//Replaces Create Quotation pushbutton with Create Repair Quotation pushbutton("P[Create Quotation]", "@0Y@Create Repair Quotation");
//Replaces Bus. Area field with Bus Location inputfield("F[Bus. Area]","Bus Location");
//Replaces Create Follow-On Ord checkbox with Equipment Type checkbox("C[Create Follow-On Ord]", "Equipment Type");
//Replaces Create Follow-On Ord checkbox comment with Create new order as a follow-on order comment("C[Create Follow-On Ord]","Create new order as a follow-on order");
//Replaces an Individual Slip radiobutton with Coll.Slip w.Inspect. Text radiobutton("R[Individual Slip]","Coll. slip w.Inspect. Text");
//Replaces Create Quotation pushbutton with Create Repair Quotation pushbutton pushbutton("P[Create Quotation]", "@0Y@Create Repair Quotation");

Note: You need to delete the existing screen element before adding a new element.


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