Purpose
Optimize the toolbar in Fiori theme

Background information
The standard SAP GUI visual theme in S/4HANA is "Belize" which implements the SAP Fiori design. Fiori brings us a couple of visual and functional changes: enlarged screen metric, right aligned field labels, fewer icons and colors, different location of toolbar buttons. 

GuiXT elements such as input fields, buttons and tables are automatically displayed in the Belize/Fiori style since GuiXT leaves the rendering of the UI elements to SAP GUI.

Nevertheless a certain adaptation of the GuiXT scripts can make sense in order to optimize the UI for Fiori. Especially the toolbar buttons can be optimized in order to take advantage of the various Fiori function bars. This can be done in a way that does not affect the layout for classic themes.

SAP GUI option to activate/deactivate the Belize/Fiori theme
This option is available if you use SAP GUI 7.50 and upwards on an S/4HANA system: 


Fiori function bars
Fiori spreads the existing functions (system and application) to various function bars. The target function bar of a standard SAP button is set in SAP menu painter:

In a GuiXT script you may specify the button group where you want to display your button using the "group=" option of the Pushbutton command. Example:

Pushbutton (toolbar) "Save" "/0" "F11" process="save.txt" group="P"

 

 We now describe the possibilities in more detail.

Group "A": Application-Specific Action

The default group for GuiXT toolbar buttons is 'A' (application). The button is displayed in the standard application function bar, at the end of the existing functions. Example:

Pushbutton (toolbar) "Show changes" process="show_changes.txt"   // group="A"

Due to the full text display (no icons) of the buttons in Fiori, your new button will often be hidden in the "More" group:

 

With the notation group="A+" your button will be displayed left of the standard application buttons:

Pushbutton (toolbar) "Show changes" process="show_changes.txt"   group="A+"


The Fiori design suggests you use icons in special cases only. If you think that adding an icon is appropriate for a particular function, you can use the standard notation, here together with a tooltip:

Pushbutton (toolbar) "@IG\QDisplay the material changes@Show changes" _
      process="show_changes.txt"   group="A+"

If you do not want to display the icon in Fiori mode, but for other visual themes, use the option -noIcon of the Pushbutton command. It suppresses the icon display in the case of Fiori. 

Icon-only buttons are possible as well:

Pushbutton (toolbar) "@IG\QDisplay the material changes@" _
      process="show_changes.txt"   group="A+"

This saves space but will not be met with enthusiasm by the Fiori apologists.

 

Group "D": Display <-> Change

This special group may contain a button which switches between "Display" and "Change" mode.

Example:

Pushbutton (toolbar) "Display" process="display_mode.txt"   group="D"

The rules concerning icons / tooltip are the same as for group "A".
It probably does not make sense to add more than one button in this group.

 

Group "G": Generic actions

Actions that are relatively independent of the transaction/screen.

Example: We add a "Feedback" button using the "letter" icon. In order to display it left of the other generic functions we use group "G+":

Pushbutton (toolbar) ""@J8\QFeedback@" process="feedback.txt"   group="G+"

 

Group "P": Processing action

This group is displayed on the right edge of the footer. Typical functions are "Save" or "Continue".

Since a long mouse movement is necessary to reach these buttons, the group should be reserved for buttons that have a "closing" character, at least for the current screen.

The rules for icons and  for the "P+" notation apply as described above. Only the first button is displayed with a blue backgound.

Example:

Pushbutton (toolbar) "Next view" process="next.txt" group="P"

Group "V": View Switch

This group is displayed in a different format, namely as a drop down list of buttons. Its purpose is to let the user choose between several views of a screen or transaction.

GuiXT automatically marks the first button as the default view.

Example: We add buttons that let the user toggle between "SAP standard" and "Simplified".

if V[BP_mode=Easy]
 Pushbutton (toolbar) "Simplified" process="toggle_mode.txt" group="V"
 Pushbutton (toolbar) "Standard" process="toggle_mode.txt" group="V"

 // ...

else
   Pushbutton (toolbar) "Standard" process="toggle_mode.txt" group="V"
  Pushbutton (toolbar) "Simplified" process="toggle_mode.txt" group="V"
endif


Icons are not supported in this group.

 

Group "L": Less important actions

The whole group "L" is shown in "More", even if there is enough space on the screen to display additional buttons.

Icons are not supported in this group.


Group "N": Not shown in Fiori toolbar

Probably not useful in GuiXT; but added in GuiXT for completeness.

 

Remarks

  • GuiXT does not support displaying an SAP standard button in a function bar different from the one implemented in the standard. If necessary, you may delete the standard button and create your own button with the same function code.

  • You can differentiate between classic and Fiori design in your script with the following if statement:

    if V[_sapgui_fiori=X]
       ...
     endif

Components
GuiXT