Purpose
 You want to combine different UI technologies and display e.g. Fiori Apps on the SAP GUI for Windows.

Solution
With the Controls component of GuiXT you can embed any browser-based application in any SAP screen (even several simultaneously). In addition, communication is possible, e.g. clicking on elements,entering data in input fields, or extracting data for further processing in the relevant transaction.

Example
As an example we would like to build a dashboard in which several Fiori Apps (including the Fiori launchpad itself) are embedded in an SAP screen. In addition, an automatic login is to be performed.

(Click for fullscreen)

Hint: There are already a lot of Fiori Apps available. Nevertheless, the majority of SAP transactions can still only be used with a SAP GUI. As an example, we additionally embed the transaction "Change Sales Document (VA02)", which however runs in the SAP GUI for HTML and is not a real Fiori App.

How to implement
 Fiori apps are started via a URL. This URL can be given additional parameters, which might for example open a certain view and can also predefine filters. Due to the technology only one login is necessary or possible, so that several apps can be opened at the same time. The following GuiXT script inserts a push button, so that the user can open the dashboard. A JavaScript routine is then called to perform the login.

Hint: Open the Fiori app as usual in your browser and set the desired view (data selection, filter, sorting, etc.) Afterwards you can simply copy and paste the URL shown in the address line into the GuiXT script to jump directly to this view.

 

 

GuiXT Main Script

///////////////////////////////

// Fiori Dashboard with GuiXT

///////////////////////////////

 

if not V[fiori_dashboard]

  pushbutton (toolbar) "@LZ\QFiori Dashboard@Fiori Dashboard" _

    process="fiori_dashboard.txt"

endif

 

if V[fiori_dashboard]

 

  pos   X[IMAGE_CONTAINER] X[IMAGE_CONTAINER]+(25,199)          _

  width=121 height=22

 

  pushbutton (toolbar) "@BF\QFiori Login@Fiori Login" process="fiori_login.txt"

 

  // Embed Fiori Launchpad

  Set V[fioriurl_launchpad] "https://vhcals4hci.dummy.nodomain:44301/sap/bc/ui5_ui5"

  Set V[fioriurl_launchpad] "&V[fioriurl_launchpad]/ui2/ushell/shells/abap/FioriLaunchpad.html"

  Set V[fioriurl_launchpad] "&V[fioriurl_launchpad]?sap-client=100&sap-language=EN"

 

  Control       (-0.2,1.2)     (25,86.9)  -closeonhide _

    progid="&V[fioriurl_launchpad]" _

    name="fiori1"   -silent

 

  if V[login]

   

    // Embed "Sales Order Demand Fulfillment" (Fiori App)

    Set V[fioriurl_par] "&V[fioriurl_launchpad]#SalesOrder-SSB_Demand_Flmt"

    Set V[fioriurl_par] "&V[fioriurl_par]?EvaluationId=.E.1478698426538"

    Set V[fioriurl_par] "&V[fioriurl_par]&/sap-iapp-state=ASLRHNT43YHYRBTEC9A6U8DITV2I7SDU7KHNHI84"

   

    Control     (-0.2,88.3)   (24.4,171.2)  -closeonhide _

      progid="&V[fioriurl_par]"       _

      name="fiori2"   -silent

   

    // Embed  "Sales Order Fullfillment" filtered by "Potential Issue" (Fiori app)

    Set V[fioriurl_par] "&V[fioriurl_launchpad]#SalesOrderFulfillmentIssue-SSB_Analyze"

    Set V[fioriurl_par] "&V[fioriurl_par]?EvaluationId=.ECC.SOFM.SALESORDERFULFILLMENTISSUES.EV"

    Set V[fioriurl_par] "&V[fioriurl_par]&/sap-iapp-state=ASP0QAB7HN11TQDDZ94QYRXJ13IDFOPE6SQTTD88"

   

    Control     (25.4,1.2)     (47,85.5)  -closeonhide _

      progid="&V[fioriurl_par]" _

      name="fiori3"   -silent

   

    // Embed "Sales Order Fulfillment Issues" (Fiori App)

    Set V[fioriurl_par] "&V[fioriurl_launchpad]#SalesOrderFulfillmentIssue-analyzeKPIDetails"

    Set V[fioriurl_par] "&V[fioriurl_par]?EvaluationId=.ECC.SOFM.SALESORDERFULFILLMENTISSUES.EV"

    Set V[fioriurl_par] "&V[fioriurl_par]?&sap-xapp-state=AS9ZENNFWPPK8TXKKA24UU599BDKW2W5YKR6N2PW"

   

    Control     (-0.2,173.6) (24.4,321.2)  -closeonhide _

      progid="&V[fioriurl_par]" _

      name="fiori4"   -silent

   

    // Embed SAP GUI for HTML Screen (not Fiori!)

    Set V[fioriurl_par] "&V[fioriurl_launchpad]#SalesDocument-change?sap-ui-tech-hint=GUI"

   

    Control     (25.5,87.9)   (47.6,195.5)  -closeonhide _

      progid="&V[fioriurl_par]" _

      name="fiori5"   -silent

  endif

 

endif

 

Script "fiori_dashboard.txt"

Set V[fiori_dashboard] "X"


Script "fiori_login.txt"

callJS login "&V[fiori1]" "s4h_sd_dem" "Welcome1" "EN"
Set V[login] "X"

Hint: Storing logon data in plain text in a script is of course not a recommended procedure. However, using techniques such as single sign-on would go beyond the scope of this simple example.


Script "fiori.js" (JavaScript library, specified in GuiXT Profile)

function login(ie,user,password,language)
{
    ie.document.getElementById('USERNAME_FIELD-inner').value = user;
    ie.document.getElementById('PASSWORD_FIELD-inner').value = password;
    ie.document.getElementById('LANGUAGE_SELECT').value = language;
    ie.document.getElementById('LOGIN_LINK').click();     
  
};

 
Video

Components
InputAssistant + Controls