GuiXT WS Designer

User Guide

Copyright (c) 1998 - 2011 Synactive, Inc

GuiXT Designer

Contents
Introduction ................................................................................................................................................... 4 Overview ................................................................................................................................................... 4 Installation..................................................................................................................................................... 5 System Requirements................................................................................................................................ 5 Install Process ........................................................................................................................................... 6 Modification and Removal...................................................................................................................... 10 Post-Install Troubleshooting ................................................................................................................... 11 Licensing..................................................................................................................................................... 12 Importing Licenses.................................................................................................................................. 12 Adding and Removing Licenses ............................................................................................................. 12 Validating Licenses ................................................................................................................................. 12 Requesting New Licenses ....................................................................................................................... 13 Configuration .............................................................................................................................................. 15 GuiXT.sjs Parameters ......................................................................................................................... 15 Using the Recorder ..................................................................................................................................... 17 Using the WYSIWYG Editor ..................................................................................................................... 19 Adding Screen Elements ......................................................................................................................... 20 Available Screen Elements ..................................................................................................................... 20 Screen Element Properties ...................................................................................................................... 22 Textfield Properties............................................................................................................................. 23 Editfield Properties ............................................................................................................................. 25 Radiobutton Properties ....................................................................................................................... 29 Checkbox Properties ........................................................................................................................... 31 Pushbutton Properties ......................................................................................................................... 33 Groupbox Properties ........................................................................................................................... 35 Textfield Properties............................................................................................................................. 36 Image Properties ................................................................................................................................. 39 RTF Properties .................................................................................................................................... 43 HTML Properties ................................................................................................................................ 44 Using the Script Editor................................................................................................................................ 45 Editing an Existing Script ....................................................................................................................... 46 Creating a New Script ............................................................................................................................. 48 User Interface .............................................................................................................................................. 49 File Menu ................................................................................................................................................ 49 Open .................................................................................................................................................... 50 Save..................................................................................................................................................... 50 Save As ........................................................................................................................................... 50 Revert to original screen ..................................................................................................................... 50 Properties ............................................................................................................................................ 50 Last opened file list ............................................................................................................................. 51 Exit Menu ........................................................................................................................................... 51 Edit Menu................................................................................................................................................ 52 Undo ................................................................................................................................................... 52 Cut....................................................................................................................................................... 52 Copy .................................................................................................................................................... 53 Paste .................................................................................................................................................... 53 2

GuiXT Designer Paste Special ....................................................................................................................................... 53 Decisions............................................................................................................................................. 53 Options ................................................................................................................................................ 53 Comment Selection ............................................................................................................................. 56 GuiXT Menu ........................................................................................................................................... 57 Start/Stop Recording ........................................................................................................................... 57 Edit Recorded Input Script.................................................................................................................. 57 Refresh Input Script ............................................................................................................................ 57 Clear Recorded Input Script................................................................................................................ 58 Edit GuiXT Profile.............................................................................................................................. 58 Show GuiXT ....................................................................................................................................... 58 Directories Menu..................................................................................................................................... 59 Options Menu.......................................................................................................................................... 59 View Menu.............................................................................................................................................. 60 WYSIWYG ......................................................................................................................................... 60 Toolbar ................................................................................................................................................ 60 Status Bar ............................................................................................................................................ 61 Refresh ................................................................................................................................................ 61 Tools Menu ............................................................................................................................................. 62 Help Menu .............................................................................................................................................. 63 User Tutorial ............................................................................................................................................... 64 Creating a Launchpad ............................................................................................................................. 64 Creating a Custom VA01 Screen ............................................................................................................ 73

GuiXT Designer

Introduction
GuiXT Designer is a development tool that provides both a graphical What You See If What You Get (usually called WYSIWYG) editor and a script editor, enabling users to create simplified SAP screens and processes. Designer incorporates support for Drag and Drop and can generate portable GuiXT scripts in a very short time without necessitating any changes to the underlying ABAP code or business logic. Designer also provides users with a recording tool, whereby a SAP process or screen can be recorded and saved as a script file. The recorder enables users to create customized processes that include only those screens and fields absolutely necessary to a given process. Valid licenses for both Designer and GuiXT WS are required in order to save script files or perform screen aggregation.

Overview
GuiXT Designer is a design and development tool that integrates with SAP. It is locally deployed and used by developers to create screens for SAP. Any changes made in Designer are reflected in SAP once the screen is saved in Designer. There is also a Mobile UI in Designer that enables developers to create screens according to the Mobile UI guidelines. However, the screens themselves must still be created locally. GuiXT Designer works by applying customizations to SAP screens. The process is as follows: 1. Customer imports SAP screen into Designer or records a SAP process 2. Customer makes desired modifications to screen with the WYSIWYG or script editor. 3. Designer generates script for relevant screen. 4. Script is stored in GuiXT script folder and accessed by GuiXT to draw the customized screen All screen modifications are removed prior to any client request being forwarded to SAP. Once SAP responds to a client request, the screen modifications are re-applied. GuiXT Designer communicates with the SAP database and parses the data to and from the SAP database so that the client can manipulate it. There are three major components: Recorder WYSIWYG editor Script editor Designer is included in the GuiXT Developer Suite and can be used to design custom screens for the Desktop, WebUI, Mobile and Access solution suites. Designer can also be used to create the custom upload and download screens for the Offline solution suite as well. This document is for GuiXT WS users.

GuiXT Designer

Installation
This section will describe the requirements to install GuiXT Designer and the process by which it will be installed on a single system. This section covers the following topics: System Requirements Install Process Modification & Removal

System Requirements
To install GuiXT Designer, it is first necessary to ensure that the target system can support the installation. The host system can be any of the following Microsoft operating systems: Windows XP Windows Vista Windows 7 Windows 2003 Server Windows Server 2008 For all systems, the install will require the following: CPU: 1.4GHz (x64) single-core or 1.3GHz dual-core processor RAM: 512MB (8GB recommended) HDD: 32GB Browser: IE 7 or above; Firefox 3.0 or above SAPGUI: 3.0 or above

GuiXT Designer

Install Process
The process to install GuiXT Designer is as follows: 1. Download the Installer package from a location specified by a Synactive Support or Sales representative. The install package is named DesignerSetup.exe. 2. Double-click the DesignerSetup.exe package. The InstallShield Wizard will start and the following screen will appear. Click Next:

3. The End User License Agreement window will display. Check the 'I Accept...' checkbox and click Next:

GuiXT Designer

4. The Destination Folder window will appear. Click Next:

5. The Ready To Install window will appear. Click the Install button:

GuiXT Designer

6. The status window shown below will display while the InstallShield Wizard installs the necessary files on the target system:

GuiXT Designer 7. The Finish window will display when the installation successfully completes. Click the Finish button to quit the InstallShield Wizard:

8. The GuiXT Designer is now installed on the target system.

GuiXT Designer

Modification and Removal

The InstallShield Wizard can also be used to repair or remove the Designer once it is installed to repair or remove, simply launch the Installer. The following screen will appear, from which users can choose to repair, modify or remove Designer:

10

GuiXT Designer

Post-Install Troubleshooting
Some users may encounter an issue where the following error message appears when Designer is launched:

If this error occurs, please do the following: 1. Launch a command prompt as shown below:

2. In the prompt, type 'regsvr32 pntctl.dll' as shown below:

3. Press Enter. 4. Wait for the PntCtl.dll to load, then re-launch Designer. The problem should now be resolved.

11

GuiXT Designer

Licensing
Each implementation of GuiXT Designer requires a license in order to operate. If you do not have a license, please see the Requesting New Licenses section below.

Importing Licenses
The GuiXT License Manager tool is what you will use to install, update, validate and remove licenses for your GuiXT Server and your Mobile client. You can install a license by doing the following: 1. Locate the license file received from Synactive at the time of purchase. 2. Go to Start > Program Files > Synactive Inc > Designer. 3. Click on LicenseManager. 4. Click the 'Import License File' button at the bottom of the License Manager window. 5. Choose the license file referenced in Step 1 above and click 'Open'. 6. The file will be imported into License Manager.

Adding and Removing Licenses

You can add individual licenses and also remove licenses that have expired. To add a license, please do the following: 1. Open License Manager. 2. Click the Add button. 3. Input the license to be added to the License Manager. To remove a license, do the following: 1. Open License Manager. 2. Highlight the license you wish to remove. 3. Click the Remove button. 4. The license will be removed from License Manager.

Validating Licenses
To verify that your license is valid, do the following: 1. Click the 'Validate' button on the right sidebar of the License Manager.

12

GuiXT Designer 2. The tool will check your licenses and return a dialog box showing the expiration dates of your licenses.

Requesting New Licenses

If you need to request a new license, you can do that directly from within the License Manager. To request a new license, please do the following: 1. Click the 'Request New' button in License Manager.

2. You will be redirected to the www.guixt.com web site . Click the 'Customers' link in the menu bar (shown below):

3. On the ensuing page, you will see two options on the left sidebar as shown below:

13

GuiXT Designer

4. Please select the type of license you want to request from the following list: a. Designer License b. Production License 5. Follow the onscreen instructions. For both the Designer and the Production License, you will receive a new license in approximately two business days.

You can also email info@guixt.com for a new license.

14

GuiXT Designer

Configuration
This section covers the configuration and functionality of GuiXT Designer. When Designer is being used with the WS Platform, all GuiXT configuration is done in the guixt.sjs file. This file is typically found in the following directory: C:\Program Files\SAP\FrontEnd\SAPgui. A typical guixt.sjs file appears as in the following example:

GuiXT.sjs Parameters
The guixt.sjs file contains a number of parameters, which are defined as follows: directory1 - directory4 = "C:\\directory\\directory"; The script directories where GuiXT WS will search for script files. These are searched in order and can be either local directories or network shares. License Key: The license that enables Designer to function. Please note that there are two different license key types, as follows: Pre-March 2011 Web Server Releases: For these releases, the license key is defined as follows. The actual license key for the various components would be entered in place of the example's 'Synactive.xxx.xxxxxx'. Please consult the Licensing section of the WS Install Guide or the WS Reference Library for more information. Key = "Synactive.xxx.xxxxxx" Post March 2001 WS Web Server Releases: For all WS releases subsequent to March 2011, the license key will be in the array format. Multiple individual license keys can be included in this format. Please consult the Licensing section of the WS Install Guide or the WS Reference Library for more information. The format is shown below. _lic_license = [ ]; _lic_license.push({"license":"x-xxxx-xxxxx-x-xxxx-xxxxx-xxxxx", "data":{"company":"company", "systemid":["systemid1"]}}); 15

GuiXT Designer _lic_license.push({"license":"x-xxxx-xxxxx-x-xxxx-xxxxx-xxxxx", "data":{"company":"company", "systemid":["systemid2"]}}); HistoryOnRightButton = true/false; The localvalue help parameter specifying that history appears on a mouse right-button click. domains = "sapwr:z.domain"; Any localvaluehelp domains would be specified in this parameter. RFCConnect: Array holding the RFC information for either a single user or multiple users. Please see the RFCConnect section of the WS Reference Library for more detailed information. The RFCConnect array will take precedence over either the guixt.sjs RFC single user entry explained below or over a RFCUser contained in a Call command. The Call command usage is explained in the WS Reference Library. RFCConnect: String holding data for single RFC user. This is the weakest of the three RFC calls - both the array explained previously and any RFC user data contained in a Call command will take precedence over the single RFC user data. This has three components, which are as follows: o RFCUser = "xxx"; RFC username in plain text. o RFCPassword = "xxx"; RFC password in plain text if it is not encrypted. o RFCPasswordEnc = "xxx"; If the RFC password is encrypted, it will be here in encrypted format. Components = {"component1":1, "Component2":1, "Component3":1}; List of installed components. Any installed component will be in this list and marked '1' to indicate that it is present and active. Please note that this parameter is not necessary for post-March 2011 releases. TRACEFLAGS: This is used for developer debugging. It should normally be set to 'FLG_REDIRECT_CONSOLE' in order to display logs. There are several related parameters that can be used in conjunction with the TRACEFLAGS settings. These are defined in the Debugging WS section of the WS Reference Library.

16

GuiXT Designer

Using the Recorder

As previously mentioned, Designer offers user s a recording tool, whereby SAP transactions and processes may be recorded for later customization. Using the recorder also enables users to combine multiple screens into a single process. In order to use the Recorder, users must have a valid license for both Designer and for WS. To record a SAP transaction with the Recorder, please do the following. 1. Launch SAP and log in. Once logged in go to the transaction to be recorded. In our example, we will use the VA01 transaction as shown below:

2. Launch Designer. Once Designer is open, either click the Record icon Recording from the GuiXT menu.

or choose Start/Stop

3. In the SAP screen, enter data into the screens to be recorded, as shown in the following example:

17

GuiXT Designer

4. Once the requisite data is entered in the VA01 fields, go back to Designer and click the Record button again to stop the recording. The actions will have been recorded in the script. 5. To save a recording, users can either click the Save icon or choose the Save or Save As options from the File menu. Recorded scripts will be saved in the directory specified in the GuiXT configuration file. To save recordings, users must have a valid license for both Designer and for WS. 6. Recorded scripts can be edited just like any other scripts, or they can be used to quickly enter data without requiring the user to manually edit each field. Recorded scripts can also be used to combine multiple screens, creating a custom process.

18

GuiXT Designer

Using the WYSIWYG Editor

The WYSWYG editor enables users to manipulate and edit SAP without having to actually write any code. The default WYSIWYG editor with a blank SAP screen appears as follows:

In the lower left corner are the tabs by which users can toggle back and forth between the WYSIWYG and the script editors.

19

GuiXT Designer

Adding Screen Elements

There are several available screen elements that users can add to a given SAP screen. These elements are listed In the upper right corner and are represented by icons as shown below:

To add a screen element to a give SAP screen, click the element and then click on the screen where the element is to be added. It is not necessary to drag the element to the screen.

Available Screen Elements

The screen elements from left to right are defined as follows: Text field: Adds a text field element to the SAP screen. Edit field: Adds an edit field element to the SAP screen. Radiobutton: Adds a radiobutton to the screen. Checkbox: Adds a checkbox to the screen. Pushbutton: Adds a pushbutton to the screen. Groupbox: Adds a groupbox around a set of elements on the screen. Textbox: Adds a textbox to the screen. Image: Adds an image to the screen. RTF document: Embeds a RTF document into the screen. HTML page: Embeds a HTML page into the screen.

Once an element has been added to a screen, users can then right-click and select a variety of options from the context menu as shown below:

20

GuiXT Designer

The available options are as follows: Align: Enables users to align the element to either the left or right. Delete: Users can delete the element. Properties: Displays the element's Properties window. This will be covered in the Properties section below. Copy: Users can make a copy of the selected element. Paste: Users can paste a copy of the selected element onto the screen.

21

GuiXT Designer

Screen Element Properties

Each element has properties associated with it. To access these properties, users can right-click on an element and select 'Properties' from the context menu as shown below:

The Properties window contains one or more tabs depending on the element type. In the following section, we will cover each element's Properties.

22

GuiXT Designer

Textfield Properties
The properties for the Textfield element contains a single tab, shown is as follows:

On this tab are the following: Pos: Field containing the element's onscreen coordinates. Width: Field containing the element width. Height: Field containing the element's height. Fixed font: Specifies if the font is fixed size or if it is user-editable. Intensified: Specifies if the text is intensified (blue) or not. Comment: Specifies if the text field is a comment or not. Add border: Specifies if the text field has a border. Text: Field containing the onscreen label. Size: Field specifying the text size. GuiXT Name: Field containing the GuiXT name. TechName: Field containing the technical name. Relative To: Enables users to specify that a given field is relative to another screen element. Mark: Specifies if the text will be marked or not. The various color options below the 'Mark' field are the colors that can be used to mark a given text field. 23

GuiXT Designer Image: If an image is associated with a text field, the path is specified here. Viewhelp: If any viewhelp is associated with the text field, the source can be specified here. Viewhelp Height: Specifies the actual height of the viewhelp. There is also a checkbox if the percentage of the original size is to be used. Viewhelp width: Specifies the actual width of the viewhelp. There is also a checkbox if the percentage of the original size is to be used. Viewhelp position: Specifies the onscreen position of the viewhelp. either the actual (absolute) position or a relative position can be used. Tip: If there is a tooltip associated with the text field, it can be entered here.

24

GuiXT Designer

Editfield Properties
The editfield properties box contains four tabs, as follows: Edit control Search Help Parameters CE Settings The Properties window appears as follows:

The tabs are described in the below section. Edit control The Edit control tab is virtually identical to the Text field properties window previously described. However, there are a few differences. These are as follows: Read-only: Makes the field read-only - no data can be entered. Required: Makes the field required - users cannot proceed to the next screen without entering a value. Intensified: Makes the values in the edit field intensified (in blue text). 25

GuiXT Designer Numerical: Restricts values entered in the edit field to numerical values only. Invisible: Makes any values entered in the edit field invisible. Align-right: Aligns the values entered in the edit field to the right. Uppercase: Specifies that only uppercase entries in the field are allowed. Leading space: Specifies that there is a leading space before any values entered Overwrite with default: Users can input a default value for the edit field.

Search Help The Search Help tab enables user to specify search help for the edit field. The tab appears as shown below:

The following options are available: TechName: Specifies the technical name of the edit field. SearchHelp: Specifies the search help domains to be used. SearchHelp Process: Specifies the process that will be triggered, if any. Fields and values: The Fields and values section enables users to specify the values that are available for populations for a given field. Users can also restrict the list by entering values to be excluded in the 'Restrict F4 List' section. 26

GuiXT Designer

Parameters The Parameters tab enables users to link a variable with a specified value. The tab appears as shown below:

27

GuiXT Designer CE Settings This tab would be used only if the screens being created are intended for use with the Mobile. This tab enables users to specify Smart Attribute patterns for the editfield. Please see the Mobile documentation for a complete explanation of Smart Attributes and how they are used. The CE Settings tab appears as follows:

The available options are defined as follows: Pattern: Users can specify a specific character pattern for the edit field. Validate: Users can specify whether or not the field is to be checked to determine if content is valid. AutoTab Delay: Users can specify a delay in seconds before the next field is processed. Auto-Submit: Users can enter a transaction or a function code to be executed.

28

GuiXT Designer

Radiobutton Properties
The Radiobutton Properties window contains four tabs, which are as follows: Radio Button Fields and values Parameters Radio Button The Radio Button tab is shown below:

This tab contains the following attributes and options: Pos: Field containing the element's onscreen coordinates. Width: Field containing the element width. Height: Field containing the element's height. Default: If there are multiple radiobuttons, users can select this option to designate which button is the default choice. Text: Enables users to enter the onscreen label for the radiobutton. GuiXT Name: Specifies the GuiXT name of the radiobutton. TechName: Specifies the technical name of the radiobutton. Relative To: Enables user to select another screen element to associate with the element. Read-only: Makes the field read-only - no data can be entered.

29

GuiXT Designer Fields and values Enables users to enter a value for the field. The tab appears as shown below:

This tab is used for situations where multiple selections can be made, such as order types. To add a value, click the New button and enter a selection from the list. If there are no available selections, the list will be blank. Then users can enter a value in the Value field. To edit an existing field-value pair, the user would click the Edit button. The Press enter button will cause the radio button to send an Enter command. The Delete button will delete the selected field-value pair.

Parameters The Parameters tab is used to link a variable with a value, which will then apply to the designated radiobutton. The tab appears as shown below:

30

GuiXT Designer

Checkbox Properties
The Checkbox Properties window contains two tabs, which are as follows: Check Box Parameters Check Box The Check Box tab appears as shown below:

This tab contains the following options and attributes: Pos: Field containing the element's onscreen coordinates. Width: Field containing the element width. Height: Field containing the element's height. Read-only: Makes the field read-only - no data can be entered. Default: If there are multiple checkboxes, users can select this option to designate which is the default choice. Text: Enables users to enter the onscreen label for the checkbox. GuiXT Name: Specifies the GuiXT name of the checkbox. TechName: Specifies the technical name of the checkbox. Relative To: Enables user to select another screen element to associate with the element.

31

GuiXT Designer Parameters The Parameters tab is used to link a variable with a value, which will then apply to the designated checkbox. The tab appears as shown below:

32

GuiXT Designer

Pushbutton Properties
The Pushbutton Properties window contains two tabs, which are as follows: Push Button Command Push Button Tab This tab contains the fields specifying the onscreen position of the pushbutton as well as the Text field that specifies the onscreen label as shown below:

This tab contains the following parameters: Pos: Field containing the element's onscreen coordinates. Width: Field containing the element width. Height: Field containing the element's height. Place on Toolbar: Checkbox that specifies if the pushbutton is on the toolbar or not. Text: Field containing the pushbutton's onscreen label. GuiXT Name: Field containing the pushbutton's GuiXT name. TechName: Field containing the pushbutton's technical name. Relative To: Enables users to positions the element in relation to another screen element. Process: Checkbox specifying an input script containing a process that the pushbutton will trigger. Input Script: Field specifying the path to the input script that will be triggered. Only active if the Process checkbox is selected. Using: Users can specify parameters to be used in the input script.

33

GuiXT Designer Command Tab The second tab in the pushbutton Properties window is the Command Tab, shown below:

On this tab are the following functions: When 'clicked': Users can specify the actions that will occur when a given element is clicked or otherwise activated. The available options are either to enter a value into a field or to invoke a command code. Field name: Contains the technical name of the field. Transaction field: Users enter the transaction code (tcode) to be triggered by the pushbutton.

34

GuiXT Designer

Groupbox Properties
Groupboxes are used to surround and groups of similar screen elements. The Groupbox Properties window contains a single tab, which is as follows: Group Box Group Box Tab The Group Box tab appears as shown below:

The tab contains the following attributes and options: Pos: Field containing the element's onscreen coordinates. Width: Field containing the element width. Height: Field containing the element's height. Text: Field containing the element's onscreen label. GuiXT Name: Field containing the element's GuiXT name. TechName: Field containing the element's technical name. Relative To: Enables users to positions the element in relation to another screen element. Tip: Users can enter a tooltip in this field.

35

GuiXT Designer

Textfield Properties
Textfields are used to surround and groups of similar screen elements. The Groupbox Properties window contains three tabs, which are as follows: Textbox Control Parameters CE Settings

Textbox Control The Textfield control tab is shown below:

This tab contains the following attributes and options: Pos: Field containing the element's onscreen coordinates. Width: Field containing the element width. Height: Field containing the element's height. Read-only: Makes the field read-only - no data can be entered. No word wrap: Specifies that text contains in the textbox will not wrap. Font Type: Specifies the font type used for text contained in the textbox. Font Height: Specifies the font height. Font Weight: Specifies the font weight. Relative To: Enables users to positions the element in relation to another screen element.

36

GuiXT Designer Parameters The Parameters tab is used to link a variable with a value, which will then apply to the designated checkbox. The tab appears as shown below:

37

GuiXT Designer CE Settings This tab would be used only if the screens being created are intended for use with the Mobile. This tab enables users to specify Smart Attribute patterns for the textfield. Please see the GuiXT Mobile documentation for a complete explanation of Smart Attributes and how they are used. The CE Settings tab appears as follows:

The available options are defined as follows: Pattern: Users can specify a specific character pattern for the textfield. Validate: Users can specify whether or not the field will be checked to determine if content is valid. AutoTab Delay: Users can specify a delay in seconds before the next field is processed. Auto-Submit: Users can enter a transaction or a function code to be executed.

38

GuiXT Designer

Image Properties
This element is used to embed an image in a SAP screen. The Image Properties window contains three tabs, which are as follows: Image Text Fields and values Image The Image tab appears as follows:

This tab contains the following settings and attributes: Image file: Path to an image file to be displayed. The JPG, GIF and BMP formats are currently supported. Dynamic image: If the image is a dynamic image, this options should be selected and the path entered in the associated field. Image properties: There are a number of properties that are associated with images and users can choose the appropriate options here. Available options are retaining aspect ratio, no borders, original size, no buffer and on toolbar. When clicked, execute...: Users would enter a file to be executed. When clicked, dial...: Users would enter a phone number to be dialed ViewHelp: If ViewHelp is used, users can enter the ViewHelp file to use here. 39

GuiXT Designer ViewHelp Height: The height of the ViewHelp can be entered here. Either a percentage of the original image or an absolute size can be entered. ViewHelp Width: The width of the ViewHelp can be entered here. Either a percentage of the original image or an absolute size can be entered. ViewHelpPosition: The onscreen position can be specified here. It can either be absolute or relative to another element.

40

GuiXT Designer Text If an image has text associated with it, this tab is used to specify the associated properties. The Text tab appears as follows:

Available options are explained below: Displaying text: The text that will be displayed on the image is entered here. Displaying area: The specific options for where and how the text is to be displayed can be set here. Font: The font attributes are defined in this area. Available options include type, height and weight. Color: The font color can be specified in this area. Either color names or RGB values can be used.

41

GuiXT Designer Fields and values Enables users to enter a value for the field. The tab appears as shown below:

This tab is used for situations where multiple selections can be made, such as order types. To add a value, click the New button and enter a selection from the list. If there are no available selections, the list will be blank. Then users can enter a value in the Value field. To edit an existing field-value pair, the user would click the Edit button. The Press enter button will cause the radio button to send an Enter command. The Delete button will delete the selected field-value pair.

42

GuiXT Designer

RTF Properties
This element is used to embed an RTF document in a SAP screen. The RTF Properties window contains a single tab, which is as follows: RTF The RTF tab appears as follows:

The tab contains the following options and attributes: RTF file: Users can enter the path to the RTF file to be displayed Template file: Users can enter the path to the template file to be displayed. Display as floating window: Check this box to display the RTF file as a floating window. Maximize window: Check this box to maximize the window.

43

GuiXT Designer

HTML Properties
This element is used to embed an HTML document in a SAP screen. It requires the Viewer in order to function properly. The HTML Properties window contains a single tab, which is as follows: Html file The Html file tab appears as follows:

This tab contains the following attributes and options, as follows: HTML file or URL: Users can enter the path to the HTML file to be displayed. Template file: Users can enter the path to the template file to be displayed. Display as floating window: Check this box to display the HTML file as a floating window. Maximize window: Check this box to maximize the window.

44

GuiXT Designer

Using the Script Editor

As previously introduced, Designer offers users the choice of two methods of editing - using the graphical WYSIWGY editor and the script editor. All the options, parameters and settings that were discussed in the Using the WYSIWYG section can be hard-coded in a script, as opposed to being set via the GUI. Users can toggle between the two editors by clicking on the WYSIWYG and Script tabs located at the bottom of the main Designer window, as shown below:

In this section, we will explain the basics of using the script editor. Topics covered are as follows: Editing an Existing Script Creating a New Script

45

GuiXT Designer

Editing an Existing Script

To edit an existing script, choose Open from the File menu and select a script file as shown below:

The script file will open in the Script Editor window as in the following example:

46

GuiXT Designer

Once the script file is open in the Script Editor window, user can edit the existing script file simply by entering new code. Once the file is edited as desired, users can either click the Save icon or choose the Save or Save As options from the File menu. Script files will be saved in the directory specified in the GuiXT configuration file.

Script files cannot be saved in the trial version of Designer. To save scripts, users must purchase a production license.

47

GuiXT Designer

Creating a New Script

To create a new script, begin entering code on a blank editor window as in the following example:

or choose the Save or Save As option from Once the script is as desired, either click the Save icon the File menu to save the resulting script. All script files will be saved in the designated SAP script folder To save scripts, users must have a valid license for both Designer and for WS.

48

GuiXT Designer

User Interface
The Designer user interface offers a number of functions. This section will explain each of these functions, as follows: File Menu Edit Menu GuiXT Menu Directories Menu Options Menu View Menu Tools Menu Help Menu

File Menu
The File Menu is where users can open a new file, save changes to an existing file, remove any changes applied to a given screen, edit file properties, view the last four files opened for quick access and quit the Designer application, as shown below:

These functions are as follows: Open Save Save As Revert to original screen Properties Last opened file list Exit 49

GuiXT Designer

Open
The Open command opens an existing script file. Users can choose the file to open by either clicking the Open icon (shown below) or using the CTRL-O keyboard shortcut.

Save
The Save command enables users to save the file currently being edited in the same location from which it was opened. Users invoke Save either by clicking the Save icon as shown below or by typing CTRL-S.

Save As
The Save As command enables users to save the file currently being edited in a location different from where it was opened or under a different name or file type.

Revert to original screen

Using this command will remove all changes made to a given screen and it will revert to the original SAP configuration. Any if/else/endif conditions will be preserved, however. Users invoke the Revert command either choosing it from the File Menu or by typing CTRL-R

Properties
The Properties command will edit the current file properties. These are stored as comments in the GuiXT script file. They are usually found at the very beginning of a script file. The Properties dialog box is launched either by typing CRTL-I or by clicking on the Properties entry in the File menu. The Properties dialog box is shown below:

50

GuiXT Designer

Last opened file list

The Last opened file list command serves as a quick open link. It will display the names of the last four files previously opened.

Exit Menu
The Exit command will exit out of Designer. When exiting, users can choose to save the current file without using the Save command. Users can edit either by choosing the Exit option from the File menu or by typing ALT-F4

51

GuiXT Designer

Edit Menu
The Edit Menu contains the commands for editing screens and transactions as shown below:

The commands contains in the Edit Menu are as follows: Undo Cut Copy Paste Paste Special Decisions Options Comment Section

Undo
The Undo command will undo the last action a user executed. Undo can be invoked either by clicking the Undo icon on the graphic menu as shown below or by typing CRTL-Z.

Cut
Cut is used to cut the selected items from a given screen. Cut can be called either by clicking the Cut icon shown below or by typing CTRL-X.

52

GuiXT Designer

Copy
Copy is used to copy a selected item. It can be invoked either by clicking the Copy icon as shown below or by typing CTRL-C.

Paste
Paste is used to paste the selected (copied or cut) item into a place chosen by the user. Paste is invoked either by clicking the Paste icon (shown below) or by typing CTRL-V.

Paste Special
Paste Special is not currently used and may be removed in future versions.

Decisions
Decision launches the Edit Decisions window shown below. In this window, users can edit all IF statements that are available for use in the given screen.

Options
Options displays a window where users can configure various options in Designer. Users can invoke Options window either by clicking the Options icon shown below or by choosing Options from the Edit Menu.

The Options window has four tabs, which will be explained in the following sections. These four tabs are: Designer Options Compatibility Modes Guixt Input Script Designer Options This tab is where users can designate the GuiXT directory, set saving and editing options, choose options related to script generation and select whether to use the same Designer window or start a new window each time Designer is invoked. The Designer Options tab is shown below: 53

GuiXT Designer

Compatibility Modes The Compatibility Modes tab is shown below:

In this tab, users choose the mode that Designer will use. Automatic is usually recommended, but if a user is only using Designer in Mobile devices, the CE mode is usually the best.

54

GuiXT Designer Guixt The Guixt tab is shown below. In this screenshot it is titled 'Cornelius', but it will read 'Guixt' in a user's environment:

This tab is where users can specify script directories for a single sessions. Changes made here will only be permanent if the changes are also made in the GuiXT.ini file. Functions The Functions tab is shown below:

55

GuiXT Designer

This tab is where users can set a directory for the History, choose whether or not to automatically refresh scripts, set a refresh time in milliseconds for the recorded scripts and choose whether to open the recorded script once recording stops or starts.

Comment Selection
The Comments section is where a user can automatically add comments to a specific screen. Users can invoke it either by clicking the Comment Selection icon as shown below, choosing the option in the Edit Menu or by typing CTRL-M.

56

GuiXT Designer

GuiXT Menu
The GuiXT Menu contains options used for recording input processes as shown below:

Options included are as follows: Start/Stop Recording Edit Recorded Input Script Refresh Input Script Clear Recorded Input Script Edit GuiXT Profile Show GuiXT

Start/Stop Recording
The Start/Stop Recording button is used to toggle the action of recording screen actions. It is invoked either by clicking the icon (shown below) or choosing the Start/Stop Recording option from the GuiXT Menu.

Edit Recorded Input Script

Users can choose to edit a previously recorded script. If there are no input scripts in the History folder, or the History folder is not specified, this option will be inactive. The Edit command can be invoked from either the icon shown below or from the option in the GuiXT Menu.

Refresh Input Script

Users can click this icon (shown below) to refresh Designer to display the current SAP screen. If a user chooses to automatically refresh the screen, that can be set in the Options window invoked from the File Menu.

57

GuiXT Designer

Clear Recorded Input Script

Users can clear a previously recorded script with this option. Like the Edit option previously described, it will be inactive if there is no History folder designated or if there are no input scripts in the History folder. The Clear command can be invoked either from the icon shown below or from the option in the GuiXT Menu.

Edit GuiXT Profile

This command enables users to edit the GuiXT profile. It will launch the GuiXT window and the GuiXT.ini file described in the GuiXT documents. This option is disabled in Designer when used with WS.

Show GuiXT
The Show GuiXT option will display if GuiXT is running in hidden mode or not at all. Users invoke it by clicking the icon shown below or choosing the Show GuiXT option from the menu. This option is disabled in Designer when used with WS.

58

GuiXT Designer

Directories Menu
The Directories Menu is where users can specify the one to four script directories that GuiXT will search for scripts. Only those directories actually specified in the GuiXT.ini file will show as active all others will be grayed out as in the following example. The Directories menu is shown as follows:

Options Menu
The options menu is where users can set the language that Designer will use. The menu is shown below:

Users can choose a language. The letters shown in parentheses following each language name are the one or two character language codes used in script filenames.

59

GuiXT Designer

View Menu
In the View Menu shown below, users can toggle between the WYSIWYG and script editors, Turn the toolbars on and off, toggle the status bar on and off and refresh the Designer with a new SAP screen. Users can also refresh the Designer screen and show or hide the Status bar from the View menu.

WYSIWYG
The WYSIWYG option will toggle between the WYSIWYG and the script editor. WYSIWYG allows for drag and drop and graphic editing of SAP screens. The script editor is where users can write their scripts directly. The icon is as follows:

Toolbar
Users can display or hide the various toolbars. The available toolbars are as follows: Standard toolbar GuiXT toolbar Task pane Standard toolbar: The standard toolbar contains the generic functions such as Cut, Copy, Paste, Save, etc. It is shown below:

GuiXT toolbar The GuiXT toolbar contains options specific to GuiXT such as the recorder controls and the View GuiXT option. The GuiXT toolbar appears as follows:

The GuiXT Toolbar includes options for several of the functions included in the GuiXT menu described earlier. These are as follows, from left to right: Start/Stop Input Recording: Starts or stops a new recording. Edit Recorded Input Script: Edits a previously-recorded input script. Clear Recorded Input Script: Clears data from a previously recorded input script. Refresh Input Script: Refresh Designer to display the current SAP screen. Edit GuiXT Profile: DIsplays the Profile by launching the GuiXT window previously described.

60

GuiXT Designer Show GuiXT: Displays the GuiXT window. This is only active if GuiXT is running in hidden mode or is not running at all.

Status pane The Status pane contains links to recently used scripts. Users can also open blank script documents in Designer. The Task Pane is shown as follows:

Status Bar
The Status Bar is located at the very bottom of the Designer window as shown below.

This has several options Status: Currently shows ready. Can also display other statuses depending on the state of the application. CAP: Shows if the Caps lock is on or off. Currently on. NUM: Shows if the Number lock is on or off. Currently on. OVR: Shows if over-write is on or off. Currently on.

Refresh
Users can refresh the screen by either choosing this option, pressing the Refresh button (shown below) or by pressing the F5 key on the keyboard.

61

GuiXT Designer

Tools Menu
The Tools Menu as shown below contains tools to update Designer, generate ini configuration files and manage product licenses.

The options are as follows: License Manager: Launches the License Manager tool. Here users can add, remove, import and request new licenses for their Synactive products. License Manager is fully described in the Licensing section of the Installation chapter. Update Designer: Checks for updated versions of Designer from the Synactive website. If an updated version is found, it will automatically be installed. Users should save their current work before updating Designer. Generate Ini: Generates a new INI configuration file for GuiXT. Not applicable in WS

62

GuiXT Designer

Help Menu
The Help Menu is shown below.

This menu only contains two options Designer Help and About Designer. These are explained as follows. Designer Help: This option will launch the online Help system for Designer. About Designer: This will display a dialog box containing the product version number, copyright information and a link to Synactives website. The About window is shown below:

63

GuiXT Designer

User Tutorial
In this section, we will present a tutorial based on a common scenario that might occur to an SAP user. We will use Designer to create a customized SAP launchpad where users can initiate MM01 and VA01 transactions. There are two user tutorials we will perform, as follows: Creating a Launchpad Creating a Customized VA01 Screen

Creating a Launchpad
To create a custom transaction based on the MM01 transaction, please do the following: 1. Log into SAP GUI. 2. Launch Designer (Start > Programs > Synactive Inc > GuiXTDesigner > Start Designer). 3. Delete any existing elements on the screen. 4. Add a new pushbutton by clicking on the pushbutton element and then clicking the screen where the pushbutton will be located in the WYSIWYG editor as shown below. To resize the element, click the corner and drag to the desired size.

5. Open the Properties box shown below by right-clicking on the pushbutton and name the new pushbutton 'Create Material'.

64

GuiXT Designer

6. Click on the '...' button immediately to the right of the Text field in the Properties window. The Icon Selector window will appear as follows:

7. Click on the icon and then click OK. The text in the Text field will change to the following as shown in the below example:

65

GuiXT Designer

The 'OY' specifies the icon that will be used for this pushbutton; the 'Create Material' is the pushbutton label. 8. Click the Command tab and type '/nmm01' in the Transaction field as shown below. Then click OK:

66

GuiXT Designer

9. Right-click on the new pushbutton and select 'Copy' from the drop-down list. Then select 'Paste' and move the pushbutton copy to a location immediately below the first pushbutton as shown below:

10. Right-click the new pushbutton to display the Properties window. Type 'Create Sales Order' in the Text field as shown below: 67

GuiXT Designer

11. Click the '...' button and select the below and click OK.

icon. Then type 'Launch VA01' in the Tip field as shown

12. In the Command tab of the Properties window, type '/nva01' into the Transaction field as shown below and then click OK.

68

GuiXT Designer

13. Select the group box icon from the screen elements list and move it to the screen. Then resize it so that it encloses the existing pushbuttons as shown below:

69

GuiXT Designer 14. Right-click on the screen to display the page Properties window and type 'GuiXT Launch Pad' in the Title field as shown below. Then click OK.

15. Click the Save icon in Designer. The Save As dialog box will appear. Save the file in the scripts folder. The default path for the script directory is C:\guixt\scripts. The default name of the saved file will be the dynpro name of the screen. An example filename would be 'SAPLSMTR_NAVIGATION.E0100.ini'. Users must have a valid license to save script files in Designer.

16. The changes made will now be reflected in the SAP GUI screen as shown below.

70

GuiXT Designer

17. Click on the 'Create Material' button in SAP GUI and the MM01 transaction will open as shown below:

71

GuiXT Designer

18. Use the Back button to return to the launch pad and click the 'Create Sales Order' button. The main VA01 screen will display as shown below:

72

GuiXT Designer

Creating a Custom VA01 Screen

Now that the launchpad has created, we will create a custom screen for the Create Sales Order (VA01) transaction. To create a custom screen, please do the following. 1. When the VA01 transaction opens, click the Refresh button in Designer to display the VA01 screen. When the screen displays, click on the Sales Office and Sales Group labels. Then click on the associated fields as shown below:

2. Click the Delete key to delete the selected fields, then resize the group box. The VA01 screen should now appear as in the below example:

73

GuiXT Designer

3. Double click on the field beside the 'Sales Organization' label. The Properties window will appear as shown below:

74

GuiXT Designer

4. In the Properties window, enter '1000' in the 'Overwrite with default' field at the bottom of the window. Then click OK. The default value of the Sales Organization field is now '1000'. 5. Open the Properties window for the Distribution Channel field, entering '10' as the value and checking the 'Read-only' checkbox. Then click OK. 6. Click on the 'Division' label and then right-click to open the Properties window. Rename the label as 'Department' and click OK. 7. Use the cursor to highlight the 'Order Type' field and delete it. 8. Select a radiobutton element and place it where the Order Type field was. Then right-click to open the Properties and rename it as 'Standard Order' as shown below:

75

GuiXT Designer

9. Click the 'Fields and values' tab and click the New button. Enter 'Order Type' from the drop-down list and enter 'OR' for the value as shown below. Then click OK.

10. Copy the radiobutton and paste it immediately below the first radiobutton. Then open the Properties. Type 'Returns' in the Text field and then click the 'Fields and values' tab. Click Edit and enter 'RE' for the value. Then click OK and click OK again on the Properties window. 11. Select a group box from the screen elements and move it into position around the radiobuttons. Resize it to the correct size and then right-click to display the Properties as shown below:

76

GuiXT Designer

12. Type 'Select Order Type' in the Text field and click OK. The VA01 screen should now appear as shown below:

13. Highlight the area immediately beside the existing editfields and delete them, then resize the group box as shown below:

77

GuiXT Designer

14. Once the group boxes are resized as desired, click the Save button. The Save As dialog will display. Save the file with the recommended file name, as before. The filename should be 'SAPMV45A.E0101.txt'. 15. Click the Designer Refresh button should appear as follows: to view the custom screen in SAP GUI. The new screen

78

GuiXT Designer 16. Select a text field as shown below: from the available screen elements in Designer and place it on the screen

17. Right-click on the new textfield to open the Properties window as shown below:

79

GuiXT Designer

18. Type 'Instructions' in the Text field and check the 'Comment' checkbox. Then click OK. 19. Create another textbox as previously described and open the Properties window. In the Text field, type 'Step 1:' and click OK. 20. Create another textfield and type 'Step 2:' in the Text field of the Properties window. Then click OK. 21. Click the Save button and the Save As dialog will open as before. Save the file with the recommended name. In this case, the recommended name should be 'SAPMV45A.E0100.itxt'. Designer may display a message stating that the file is not generated by Designer and asking if it OK to overwrite the file. Click 'Yes'. 22. Click the script editor button to display the actual script file. It is possible to manually edit the script file in the Designer script editor. The script file generated from the preceding tutorial is shown below.

80

GuiXT Designer

81