81
Copyright (c) 1998 - 2011 Synactive, Inc GuiXT WS Designer User Guide
Copyright (c) 1998 - 2011 Synactive, Inc
GuiXT WS Designer
User Guide
GuiXT Designer
2
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
GuiXT Designer
3
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
4
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
5
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
6
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
7
4. The Destination Folder window will appear. Click Next:
5. The Ready To Install window will appear. Click the Install button:
GuiXT Designer
8
6. The status window shown below will display while the InstallShield Wizard installs the necessary files on the target system:
GuiXT Designer
9
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
10
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:
GuiXT Designer
11
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.
GuiXT Designer
12
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.
GuiXT Designer
13
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:
GuiXT Designer
14
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 [email protected] for a new license.
GuiXT Designer
15
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 LibraryKey = "Synactive.xxx.xxxxxx"
for more information.
• 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_lic_license = [ ]; _lic_license.push({"license":"x-xxxx-xxxxx-x-xxxx-xxxxx-xxxxx", "data":{"company":"company", "systemid":["systemid1"]}});
for more information. The format is shown below.
GuiXT Designer
16
_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
.
GuiXT Designer
17
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 or choose Start/Stop Recording from the GuiXT menu.
3. In the SAP screen, enter data into the screens to be recorded, as shown in the following example:
GuiXT Designer
18
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.
GuiXT Designer
19
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.
GuiXT Designer
20
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:
GuiXT Designer
21
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.
GuiXT Designer
22
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.
GuiXT Designer
23
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.
GuiXT Designer
24
• 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.
GuiXT Designer
25
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).
GuiXT Designer
26
• 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.
GuiXT Designer
27
Parameters The Parameters tab enables users to link a variable with a specified value. The tab appears as shown below:
GuiXT Designer
28
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.
GuiXT Designer
29
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.
GuiXT Designer
30
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:
GuiXT Designer
31
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.
GuiXT Designer
32
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:
GuiXT Designer
33
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.
GuiXT Designer
34
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.
GuiXT Designer
35
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.
GuiXT Designer
36
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.
GuiXT Designer
37
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:
GuiXT Designer
38
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.
GuiXT Designer
39
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.
GuiXT Designer
40
• 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.
GuiXT Designer
41
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.
GuiXT Designer
42
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.
GuiXT Designer
43
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.
GuiXT Designer
44
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.
GuiXT Designer
45
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
GuiXT Designer
46
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:
GuiXT Designer
47
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.
GuiXT Designer
48
Creating a New Script To create a new script, begin entering code on a blank editor window as in the following example:
Once the script is as desired, either click the Save icon or choose the Save or Save As option from 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.
GuiXT Designer
49
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
GuiXT Designer
50
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:
GuiXT Designer
51
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
GuiXT Designer
52
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.
GuiXT Designer
53
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:
GuiXT Designer
54
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.
GuiXT Designer
55
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:
GuiXT Designer
56
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.
GuiXT Designer
57
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.
GuiXT Designer
58
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.
GuiXT Designer
59
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.
GuiXT Designer
60
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.
GuiXT Designer
61
• 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.
GuiXT Designer
62
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
GuiXT Designer
63
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 Synactive’s website. The About window is shown below:
GuiXT Designer
64
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'.
GuiXT Designer
65
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:
GuiXT Designer
66
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:
GuiXT Designer
67
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:
GuiXT Designer
68
11. Click the '...' button and select the icon. Then type 'Launch VA01' in the Tip field as shown below and click OK.
12. In the Command tab of the Properties window, type '/nva01' into the Transaction field as shown below and then click OK.
GuiXT Designer
69
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:
GuiXT Designer
70
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.
GuiXT Designer
71
17. Click on the 'Create Material' button in SAP GUI and the MM01 transaction will open as shown below:
GuiXT Designer
72
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:
GuiXT Designer
73
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:
GuiXT Designer
74
3. Double click on the field beside the 'Sales Organization' label. The Properties window will appear as shown below:
GuiXT Designer
75
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:
GuiXT Designer
76
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:
GuiXT Designer
77
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:
GuiXT Designer
78
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 to view the custom screen in SAP GUI. The new screen should appear as follows:
GuiXT Designer
79
16. Select a text field from the available screen elements in Designer and place it on the screen as shown below:
17. Right-click on the new textfield to open the Properties window as shown below:
GuiXT Designer
80
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.
GuiXT Designer
81
