Embed CSS in My Inbox Fiori App

[former_member118192]

Hello again, I am here to demonstrate a small but handy thing. Let's go straight to what I have for you today. So, if you are dealing with SAP Fiori UX these days then you might have come to know what My Inbox is. This post is not related to the explanation of My Inbox because SAP does that at its best. Neither this post is regarding the issues people face with the said app (May they be helped by God and SCN) 😉

While implementing My Inbox, a few times we come across a requirement where we need to hide the Workitem text and show our custom one. This becomes a bit challenging but thanks to this SAP Note 2118812 - How to Extend SAP Fiori My Inbox. Also, there is another document stating Additional info on S2 View / S3 View In Fiori Apps. This would do the trick for you. You can also follow My Inbox blogs page

Today's post is more focused towards the beautification of the view that contains that Workitem description and we will use this BADI (/IWPGW/BADI_TGW_TASK_DATA) to embed our CSS and make the view look great.

Simple steps! No need to elaborate. Create an Enhancement Implementation for the said BADI, then an Implementation Class. You will have two methods to deal with. We will get hands on with /IWPGW/IF_TGW_TASK_DATA~MODIFY_TASK_DESCRIPTION

This method has a signature like this:



This method takes Provider ID and Task Header (explained in Cookbook for My Inbox) and outputs your custom data in a String.

Sample Code for your Custom CSS is shown as below:

          CONCATENATE cv_description

             '<p>Requested Data Displayed below. Please Approve or Reject</p>'

               INTO cv_description.



          CONCATENATE cv_description

          '<table role="grid" class="sapMListModeNone sapMListShowSeparatorsAll sapMListTbl sapMListUl">'

          INTO cv_description.



          LOOP AT lt_fields INTO ls_fields.



            lv_fieldname  = escape( val = ls_fields-fielddescription format = cl_abap_format=>e_xss_ml ).



            lv_fieldvalue = escape( val = ls_fields-fieldvalue format = cl_abap_format=>e_xss_ml ).



            CONCATENATE cv_description '<tr role="row" class="sapMLIB sapMLIB-CTX sapMLIBFocusable' &

                        ' sapMLIBShowSeparator sapMLIBTypeInactive sapMListTblRow">' &

                        '<td>'

                        lv_fieldname '</td>' &

                        '<td role="gridcell" class="sapMListTblCell" style="text-align:left">'

                        lv_fieldvalue '</td></tr>'

                        INTO cv_description.



          ENDLOOP.



          CONCATENATE cv_description '</table>' INTO cv_description.

In the above code, there is no rocket science but common sense. I have simply created an internal table, filled that with my logic and transverse it with escape variables. You can use any CSS you want to but keep in mind that Google Chrome blocks any JavaScript function written in your code.
Output:



This concludes my post but again you can always use a better CSS, do share yours with me in comments.

Cheers,
MJ!

[Former Member]

Good Share

[former_member609820]

Thank a lot

[thomas_mueller8]

Hi Ahmed,

thanks for this post. How do I do a right justified output with this, let's say I want to have certain amounts of my output right-justified?

Thomas