Using Fiori as frontend for SAP EWM RF ITS screens...

verreydthans · ‎09-13-2021

Hi All,

In this part, I’ll describe how we used the Fundamental Library as basic for a Fiori frontend for our SAP RF ITS screens.

In my previous blog post, I'll described how I used SAPUI5 as frontend for our RF ITS screens. Part 1

———————————————————————————————————————

In my previous blog post, I explained how I changed the ITS templates & generators from SAP to use SAPUI5 as frontend technology for our ITS screens.

I got a lot of good response from the community but also, some people were concerned about the performance and the response time, which I explained at the end of my previous blog post.

Nico Deleener from our SAP Partner (Flexso), gave me the idea to work with the Fiori Fundamental Library.

So, what is the Fiori Fundamental Library:

An open source and community driven project to provide a consistent user interface across web applic...

we used the "Fundamental Library Styles" because we only want to change our frontend.
When we used SAPUI5 as frontend, we needed to load every time, for each template the entire sap.m.* library, which takes some time.
When focussing only on the frontend, and created Fiori apps with only CSS files, we don't have to load all those libraries.

So, we had to give it a try, to see if the Fundamental Library Styles was the solution!

All the steps are almost the same as described in part 1. So, I'll not go in every detail again in this part.

Step 1: Create a new style

For our Fundamental style, I created again a new class, based on the standard generation class.

Create a new record in table “W3GENSTYLES”.
- Style: ZMOBFIORI
- ABAP Class: ZCL_ITS_GEN_FIORI_MOBILE
- Info: For Mobile Responsive Design Style (Fiori)

Step 2: Create a new ITS service

Create Service: ZITSGENFIORI
- For this case, I did a copy of my SAPUI5 version, but you can easily start from the default one. (ITSGENMOBILE4)

Step 3: Adapt the templates with Fiori Fundamental tags.

HTML Templates
- HEADER/BEGIN

    <head>



        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">



        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1">





    `if ( ~itsmobileDeviceInclude != "" )

        include(~service=~current_service, ~language="", ~theme=~theme, ~name=~itsmobileDeviceInclude & ".html");

     end;`

- HEADER/CSS

` if ( ~itsmobileCssInclude != "" ) <!-- customer include from gui settings -->`

        <link rel="stylesheet" href="`mimeURL(~service=~current_service, ~theme=~theme, ~language="", ~name=~itsmobileCssInclude & ".css")`" type="text/css" `sh()`>

` else <!-- default include from itsmobile --> `

        <link rel="stylesheet" href="`mimeURL(~service="itsmobile", ~theme=99, ~language="", ~name="styles/all/mobile.css")`" type="text/css" `sh()`>

` end;`



<link href="https://blogs.sap.com//unpkg.com/fundamental-styles@latest/dist/fundamental-styles.css" rel="stylesheet">

- HEADER/SCRIPT
  - Remains the same as the default one. If you added already the Script for the SAPUI5 libraries, please remove those here.

- MAIN_SCREEN/BEGIN

<!-- main screen begin -->

<div width="100%">`

    if ( ~itsmobileCuaInclude != "" ) <!-- customers cua area -->

       include(~service=~current_service, ~language="", ~theme=~theme, ~name=~itsmobileCuaInclude & ".html");

    elseif ( ~itsmobileNoCuaInclude != "1" && ~itsmobileNoCuaInclude != "X" ) <!-- default cua area -->



    end;`



</div>



<main class="fd-page fd-page--home fd-page--list">

  <header>

    <div class="fd-bar fd-bar--home-page-xl fd-bar--header">

      <div class="fd-bar__middle">

        <div class="fd-bar__element">

            <b>Biobest SAP</b>

        </div>

      </div>

    </div>

  </header>

  <div class="fd-page__content--xl" role="region">

    <div>

        <br>

- MAIN_SCREEN/END

    </div>

  </div>

  <footer>

    <div class="fd-bar fd-bar--home-page-xl fd-bar--footer">

      <div class="fd-bar__right">

        <div class="fd-bar__element">

          <button class="fd-button fd-button--positive" onclick="setOkCode ('/00')">Enter</button>

        </div>

      </div>

    </div>

  </footer>

</main>

<!-- main screen end -->

- ELEMENTS/BUTTON

`if ( ( 'GEN_NAME'[GEN_LOOP_LINE].exists == "X" ) && ( 'GEN_NAME'[GEN_LOOP_LINE].visible == "X" ) )

    `<button class="fd-button" style="width: 100%" onclick="setOkCode ('`'GEN_NAME'[GEN_LOOP_LINE].okcode`')">`strmask('GEN_NAME'[GEN_LOOP_LINE].label) `</button>`

    `<br><br>`

end;`

- ELEMENTS/INPUT_OUTPUT/NORMAL

`if ( 'GEN_NAME'[GEN_LOOP_LINE].exists == "X" )

    if ( 'GEN_NAME'[GEN_LOOP_LINE].mode == "multiline" )

        `<textarea `

         `class="MobileEditMultiline`class_ext('GEN_NAME', GEN_LOOP_LINE); class("GEN_NAME", GEN_LOOP_LINE)`" `

         if ( 'GEN_NAME'[GEN_LOOP_LINE].disabled == "X" ) `disabled="disabled" `end;

         if ( 'GEN_NAME'[GEN_LOOP_LINE].readonly == "X" ) `readonly="readonly" `end;

         if ( 'GEN_NAME'[GEN_LOOP_LINE].okcode != "" )

             `onchange="setOkCode('`'GEN_NAME'[GEN_LOOP_LINE].okcode`');return false;" `

         end;

         `style="`width("GEN_COLS", "GEN_WIDTH"); style("GEN_NAME", GEN_LOOP_LINE)`" `

         `rows="`'GEN_NAME'[GEN_LOOP_LINE].rows`" cols="GEN_COLS" `

         `onfocus="setFocusField('`'GEN_NAME'[GEN_LOOP_LINE].name`');" `

         `onblur="leaveFocusField('`'GEN_NAME'[GEN_LOOP_LINE].name`');" `

         `name="`'GEN_NAME'[GEN_LOOP_LINE].name`">`'GEN_NAME'[GEN_LOOP_LINE]`</textarea>`

    else

        if ( 'GEN_NAME'[GEN_LOOP_LINE].disabled == "X" )

            if ( 'GEN_NAME'[GEN_LOOP_LINE].visible != "X" )

                 `<input class="fd-input" type="hidden" `

            elseif ( 'GEN_NAME'[GEN_LOOP_LINE].type == "Password" )

                `<input class="fd-input" type="password" readonly="readonly" tabindex="-1" `

                `style="`width("GEN_COLS", "GEN_WIDTH"); style("GEN_NAME", GEN_LOOP_LINE)`" `

                if ( 'GEN_NAME'[GEN_LOOP_LINE].highlighted == "X" )

                    `class="MobilePasswordHighlightedDisabled `class("GEN_NAME", GEN_LOOP_LINE)`" `

                else;

                    `class="MobilePasswordDisabled `class("GEN_NAME", GEN_LOOP_LINE)`" `

                end;

            elseif ( 'GEN_NAME'[GEN_LOOP_LINE].inputrequired == "X" )

                `<input class="fd-input" type="text" readonly="readonly" tabindex="-1" `

                `style="`width("GEN_COLS", "GEN_WIDTH"); align("GEN_NAME", GEN_LOOP_LINE); style("GEN_NAME", GEN_LOOP_LINE)`" `

                if ( 'GEN_NAME'[GEN_LOOP_LINE].highlighted == "X" )

                    `class="MobileEditRequiredHighlightedDisabled `class("GEN_NAME", GEN_LOOP_LINE)`" `

                else;

                    `class="MobileEditRequiredDisabled `class("GEN_NAME", GEN_LOOP_LINE)`" `

                end;

            else

                `<input class="fd-input" type="text" readonly="readonly" tabindex="-1" `

                `style="`width("GEN_COLS", "GEN_WIDTH"); align("GEN_NAME", GEN_LOOP_LINE); style("GEN_NAME", GEN_LOOP_LINE)`" `

                if ( 'GEN_NAME'[GEN_LOOP_LINE].highlighted == "X" )

                    `class="MobileEditHighlightedDisabled `class("GEN_NAME", GEN_LOOP_LINE)`" `

                else;

                    `class="MobileEditDisabled `class("GEN_NAME", GEN_LOOP_LINE)`" `

                end;

            end;

            `onfocus="focusField('`'GEN_NAME'[GEN_LOOP_LINE].name`');" `

            `name="`'GEN_NAME'[GEN_LOOP_LINE].name`" `

            if ( ( 'GEN_NAME'[GEN_LOOP_LINE].inputrequired == "X" ) && ( 'GEN_NAME'[GEN_LOOP_LINE] == "?" ) )

                 `value="" `

            else

                 `value="`strmaskext('GEN_NAME'[GEN_LOOP_LINE], 1)`" `

            end;

            `size="`'GEN_NAME'[GEN_LOOP_LINE].width`" maxlength="`'GEN_NAME'[GEN_LOOP_LINE].maxinputsize`"

            `sh()`>`

        else                                     <!-- not disabled -->

            icon( "GEN_NAME", GEN_LOOP_LINE );

            if ( 'GEN_NAME'[GEN_LOOP_LINE].visible != "X" )

                `<input class="fd-input" type="hidden" `

            elseif ( 'GEN_NAME'[GEN_LOOP_LINE].type == "Password" )

                `<input class="fd-input" type="password" width="100%" `

            elseif ( 'GEN_NAME'[GEN_LOOP_LINE].inputrequired == "X" )

                `<input class="fd-input" type="text" width="100%" `

                if ( 'GEN_NAME'[GEN_LOOP_LINE].highlighted == "X" )

                    `class="MobileEditRequiredHighlighted `class("GEN_NAME", GEN_LOOP_LINE)`" `

                else

                    `class="MobileEditRequired `class("GEN_NAME", GEN_LOOP_LINE)`" `

                end;

            else

                `<input class="fd-input" type="text" width="100%" `

                if ( 'GEN_NAME'[GEN_LOOP_LINE].highlighted == "X" )

                    `class="MobileEditHighlighted `class("GEN_NAME", GEN_LOOP_LINE)`" `

                else

                    `class="MobileEdit `class("GEN_NAME", GEN_LOOP_LINE)`" `

                end;

            end;

            if ( 'GEN_NAME'[GEN_LOOP_LINE].okcode != "" )

                `onchange="setOkCode('`'GEN_NAME'[GEN_LOOP_LINE].okcode`');return false;" `

            end;

            `onfocus="setFocusField('`'GEN_NAME'[GEN_LOOP_LINE].name`');" `

            `onblur="leaveFocusField('`'GEN_NAME'[GEN_LOOP_LINE].name`');" `

            `name="`'GEN_NAME'[GEN_LOOP_LINE].name`" `

            if ( ~currdynpro.speechenabled != "" ) `id="`'GEN_NAME'[GEN_LOOP_LINE].name`" `end;

            if ( ( 'GEN_NAME'[GEN_LOOP_LINE].inputrequired == "X" ) && ( 'GEN_NAME'[GEN_LOOP_LINE] == "?" ) )

                `value="" `

            else

                `value="`strmaskext('GEN_NAME'[GEN_LOOP_LINE], 1)`" `

            end;

            `maxlength="`'GEN_NAME'[GEN_LOOP_LINE].maxinputsize`"`

            sh()`><br>`

        end;

    end;

else



end;`

- ELEMENTS/INPUT_OUTPUT/OUTPUT_ONLY

`if ( ( 'GEN_NAME'[GEN_LOOP_LINE].exists == "X" ) && ( 'GEN_NAME'[GEN_LOOP_LINE].visible == "X" ) )

    `<input class="fd-input" type="text" readonly="readonly" value="`strmask('GEN_NAME'[GEN_LOOP_LINE])`" >

    <br>`

end;`

Save and publish your ITS service!

Step 4: Generate your screens!

Make sure that you have your own Z-ITS service (in this case ZEWM_ITS_FIORI) and make sure that this also exists in SICF.

Result:

I did a small test with SAP Cloud ALM, where we have a clear overview which resources are called. This way, you clearly can see how much extra time there's needed when using SAPUI5.

Comparing the SAP Standard ITS service with the new version with the Fundamental library for performance gave me the same result, which made me very happy! 🙂

So at the end, I made different kind of versions for our ITS services.

Let me give a small recap of this:

I started working with the standard SAP ITS service because our EWM RF screens use this. As we're working with multiple different kind of mobile devices, I was looking for a solution were all the screens are the same on all devices. So, we needed responsive screens!

Note: As we're working with mobile devices without any extra hardware buttons, we also activated the extra buttons in the HTML templates!

SAP Standard ITS:

SAP ITS with JQuery Mobile:

I came across a presentation from ASUG 2013 which explained using JQuery Mobile for ITS. So this was a good starting point for me!

SAP ITS with SAPUI5:

In my previous blog post, I'll described how I used SAPUI5. See my previous blog post.

SAP ITS with Fundamental Library:

Conclusion

I my opinion, the Fundamental Libraries are currently the best option when you want to change the ITS frontend to Fiori.

We have our Fiori look & feel, we have our responsive design, and we have the same performance as standard SAP ITS screens! What else do you want more!

We're still testing this case, but from our first testing results, this is a keeper! 🙂

I hope you really enjoyed this reading, and you will find this blog post helpful in your projects.

Please feel free to reach out if you have problems when trying this!

Hans Verreydt
SAP Application Specialist – Biobest Group NV

Using Fiori as frontend for SAP EWM RF ITS screens – Part 2

SAP PI for Beginners

ABAP 7.40 Quick Reference

Fiori: technical installation and configuration of one app from A - Z