Reuse search help in Fiori app (F4 help)

I post this article to throw a pebble when you do Fiori development. In each Fiori trasanction app, normally there is a common request to develop for F4 function. For those simple F4, it is easy but make people boring. And sometimes you will say:” Oh, in SAP GUI or web dynpro. It’s so easy, search help works perfect”

So, can we create the similiar function in Fiori even reuse search help , is it possible ?

For me , I think the answer is “Yes”

Before I explain how to do , Let’s look at a prototype screen shot first. OK, Let’s check a little bit complex search help called “KRED” which is “search Help for Vendors (Creditors)”. It looks like below screen shot.

There are 14 tabs in this search help. Now think about to implement it with Fiori. Obviousely it is not a work which could be finished within seconds. right?

So we think it’s better to reuse the search help and wrote program in Fiori to generate the screen automatically. I did a testing program and it works. See below screen shot.

Above is a testing app and after I chick the vendor for “F4 help”, below dialog will be generated automatically and displayed.

Compare to the search help in GUI, it is almost the same. (Here I didn’t do much layout development and the description of each tab was technical key due to testing purpose. After you read this article, you would know it’s easy to adjust by youself ). The import thing is ” The dialog was created by dynamic coding”, all you need to do is just wrote serveral lines code like :

that.url = “odata sevice link”;
if (!this._valueHelpDialog) {
   this._valueHelpDialog = sap.ui.jsfragment(“PostVI.F4Help.testHelp”,
     this);
   this.getView().addDependent(this._valueHelpDialog);
  }

  // open value help dialog
  this._valueHelpDialog.open();

above code can be written in controller of a view. Later we will create a jsfragment to display the dialog. Here the important thing is we need to create a generic odata service to get the meta data which will be used to generate UI automatically. In our testing odata service, I design a structure like

   types: begin of f4metadata,
             shlpname   type shlpname,
             fieldname  type shlpfield,
             flposition type shlplispos,
             rollname   type shlpsparde,
             datatype   type datatype_d,
             leng       type ddleng,
             outputlen  type outputlen,
             ddtext     type ddtext,
           end of f4metadata.

In actual odata service, we will get a paramether (Search Help name) from Fiori app and return the entity sets contructed by above structure. In concise, the odata sevice just return the meta data of search help.

Till now we already finish the parts in odata service. Let’s back to Fiori part, recall the fragment dialog I metioned. How it works?

The answer is quite simple. It generate the UI according to the meta data returned from odata service. The code looks like below:

     oModel = new sap.ui.model.odata.ODataModel(that.url,false);
     sap.ui.getCore().setModel(oModel); 

     oModel.read(“F4ObjCollection?$filter=Shlpname eq ‘KRED’“, null, null, false,fSuccess,fError);
     
      function fSuccess(oData, response){
                 searchHelpJson = response.data.results;
         
         }
      function fError(oEVent){
           alert(“Read Model Failed”);
         }
    
     var oDialog = new sap.m.Dialog({title:”F4 testing” });
       
     var currentTabName = “”;
     var tab = null;
     var oLabel = null;
     var oControl = null;
     var searchTab = searchHelpJson;
    
     var tabContainer = new sap.m.IconTabBar({selectedKey: “currTab”});
     for (var i=0; i<searchTab.length; i++){
      if (searchTab[i].Shlpname != currentTabName){
       tab = new sap.m.IconTabFilter({key: searchTab[i].Shlpname, text: searchTab[i].Shlpname });
       tabContainer.addItem(tab);
      }
      oLabel = new sap.m.Label({text: searchTab[i].Ddtext});
      oControl = new sap.m.Input({type: “Text”});
      oLabel.setLabelFor(oControl);
      tab.insertContent(oLabel,99);
      tab.insertContent(oControl,99);
     
      currentTabName = searchTab[i].Shlpname;
     }
     var searchBTN = new sap.m.Button({text: “Search”, press: oController.doSearch});
     var closeBTN = new sap.m.Button({text: “Cancel”, press: oController.doClose });
     oDialog.setBeginButton(searchBTN);
     oDialog.setEndButton(closeBTN);
     oDialog.addContent(tabContainer);
      return oDialog;
    },

Red words is the entity sets of my odata service. Here KRED is the search help name, if you want to use other seach help, just replace it with yours.

Till now we finished the whloe part in Fiori. Acutally with such kind of approach, you only need write serveral lines code togenerate the F4 help.

OK, I think if you understand what I posted. It should be easy for you to write your code. For SAP colleagues, if you want to see the live demo , please contact me.

Finally let’s discuss the advantage and disadvantage:

Advantage:

1. Re-use search help concept in suite.

2. It’s easy to entend the ideas to domain help or kinds of help in suite.

3. Without translate issue. Since all those helps already translated in suite, you don’t have to consider the tranlation issues or tasks.

4. Allow developer to create Fiori more fast and focus on business logic.

5. Generic odata service to return the meta data which are used to generate Fiori UI. It can serve kinds of Fiori apps. In the future if we move the whole suite to cloud, such kind of service would be very useful not only for maintenance but aslo for deloyment.

Disadvantage:

1. if the search help is big, it costs around 1 second to display the dialog. Because it needs to call odata service and get reponse data. For me I think 1 second is a little bit longer than I would expected. Hope I could find better approach to solve it.(Note here 1 second is the first time when you click, after the first time click, all controls are generated and it will displayed immediately)

You may say, how to do the real search? You just generate the UI.

Yes, but I think it should be the same approach of generate UI. Right? Later I will try to write a testing program if possible.

Anyway, just like what I said at the beginning. The article is just throw pebbles. If you have more better ideas, let’s discuss if you want.

At last, I need to thank my Arch. (Eric) He gave me some good ideas which helps me to create demo.