Liquid UI - Documentation - 5.12 textbox()

5.12 textbox()


Purpose

Using the textbox(), you can create a text box for inputting and displaying lengthy text or data. You can customize the textbox's position, name, text properties, and display settings with various options.

 
Note: You can specify the position of the textbox in different ways. Click here for details about how to position the screen elements.
 

Syntax

You can create a textbox at the desired position with the required functionality.

textbox([startrow,startcol],[endrow,endcol],{"name":"name","option":"option"});
 

Properties

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

Available Options

You can use the following options with the textbox command:

"name":".."

"name":string - This option specifies the technical name of the textbox for Liquid UI scripts, which is invisible to the user.

"nowordwrap":".."

"nowordwrap":true - Text doesn't wrap automatically; users must press Enter to begin a new line.

"readonly":".."

"readonly":true - When this option is true, text cannot be edited or modified.

"textfont":".."

"textfont":"font_name" - This option determines the text font, with the default being Arial.

"textheight":".."

"textheight":x - This option sets the text height in pixels, with the default height at 16 pixels.

"textweight":".."

"textweight":x - This option sets the text's boldness, with a default weight of 5 and a default bold setting of 7.

Options Detail

name

  1. Sets the technical name for the textbox. This name does not display on the screen.
     
    textbox([1,87],[5,150],{"name":"z_va01_term_of_delivery_text"});
     
    Sets the technical name for the textbox
     
  2. As per the code, the column name is Plant and the technical name is z_plant.

nowordwrap

  1. Disables automatic text wrapping, requiring the user to manually press Enter to start a new line in the textbox.
     
    textbox([1,87],[5,120],{"name":"z_va01_term_of_delivery_text","nowordwrap":true,"textheoght":30});
     
    Textbox with manual line break input option
     
  2. As per the code, users need to hit Enter to begin a new line. 

readonly

  1. Makes the textbox non-editable. Users cannot modify the default text within the textbox.
     
    textbox([1,87],[5,120],{"name":"z_va01_term_of_delivery_text","textheight":30,"readonly":true});
     
    Makes the textbox non-editable
     
  2. As per the code, text in the textbox is not editable. 

textfont

  1. This option determines the font for the text within the textbox, with the default being Arial.
     
     textbox([31,8],[36,43],{"name":"z_mm0x_gen_text","textfont":"Times New Roman"});
     
     Determines the font for the text
     
  2. As per the code, the text is displayed in Times New Roman font.

textheight

  1. Sets the height of the text in pixels, with the default height at 16.
     
     textbox([7,4],[11,54],{"name":"z_se37_structure_obj_text","textheight":"12"});
     
    Sets the height of the text in pixels
     
  2. As per the code, the height of the text characters in the textbox is 30 pixels.

textweight

  1. Determines the boldness of the text, with values ranging from 1 (thin) to 9 (heavy). The default weight is 5, and the default bold setting is 7.
     
    textbox([1,87],[5,120],{"name":"z_va01_term_of_delivery_text","textheight":30,"textweight":15});
     
    Sets boldness of the tex
     
  2. As per the code, the boldness of text in the textbox is set to 15. 

Example

Creating a textbox

This example demonstrates how to use a textbox() to create a textbox on the SAP screen. Considering User Maintenance: Initial Screen (SU01), we’ll walk you through the following steps:

//Create the file SAPLSUU5.E0050.sjs inside your scripts folder for customizing the User Maintenance: Initial Screen (SU01).
//Now, add the Liquid UI script to the above file and save it.

  1. Create a textbox with a specified row and column to enter the text.
     
    // Creates a textbox at the specified row and column
    textbox([5,0],[11,51],{"textfont":"Arial","textheight":"12","textweight":"5"});
    
     
  2. Navigate to SU01 screen, and then you can view the textbox created, as shown in the image below.
     
    Creates a textbox at the specified row and column
     

Tips and Tricks

  • Creating a Notification

    In this example. The textbox() is used to create a notification. For instance, notifications created on the PM Notification screen can be displayed on the final screen with the notification details that are auto-populated from the Initial screen.

    //Create the file SAPLIQSO.E0100.sjs inside your scripts folder for customizing the Create PM Notification - Liquid UI.
    //Now, add the Liquid UI script to the above file and save it.

    1. Add a textbox to enter the notification details.
       
      // Creates a notification based on notification type 
      textbox([8,15],[14,66],{"name":"z_iw21_textbox1","enter text":true,"textfont":"Arial","left":true,"textheight":"15","textweight":"5"});
       
    2. Navigate to IW21 screen, then you can see the created notification displayed on the Maintenance request screen, as shown in the image below.
       
      Creates a notification based on notification type
       

      Click here for details on how to create a notification.

    Copy text between files

    The copytext and textbox are combined to copy text between files, screen areas, and text variables.  For instance, in the Create PM notification screen, the text entered in the textbox is appended to the previous notification. The image below illustrates text copying between screen areas.

     
    // Copies text from one screen to another screen
    copytext({"fromtext":"z_iw21_textbox1","toscreen":"X[TEXT]","append":true});
     
    Copies text from one screen to another screen
     

    Click here for details about copytext().

Usage Details


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