Extending SAP Fiori My Inbox 2.0 in SAP Web IDE

[former_member231200]

Prerequisites:

You must have a working implementation of My Inbox on your Fiori Frontend Server (FES). This document assumes My Inbox is deployed on your ABAP system.

The entire flow is performed in SAP Web IDE, therefore most of it also applies if the application is deployed on HCP.

For detailed information on My Inbox in general visit the Fiori Apps Library.

Creating an Extension Project

The first thing you need to do is to create an extension project. This project references My Inbox and therefore must be deployed to the same system your original application resides on.

1. Open SAP Web IDE and select File > New > Extension Project.

2. In the wizard, click Select Application and choose SAPUI5 ABAP Repository from the dropdown list.


3. Select the ABAP system containing My Inbox from the System Wait for the applications to load and then search for My Inbox.


4. Select the application from the list and click OK.

The fields in the wizard should be populated with the original application name and a suggestion for the new extension project name. You may rename it if needed.

5. Click Next. The confirmation step is displayed. It contains a confirmation message and a checkbox. Leaving the checkbox selected will cause the extensibility pane to open once the project is generated. For the purpose of this guide, leave it on.


6. Click Finish. Your extension project is generated and you may start customizing your application.

 

Using the Extensibility Pane

Most of the extensions available can be easily performed in the extensibility pane tool.

To open it, choose an extension project and from the menu bar, choose Tools > Extensibility Pane.

Using the Extensibility pane allows you to see which UI extensions are available and how they will impact your application. The outline on the right shows the structure of the parent application and visual ques to indicate extensions, while the preview on the left allows you to extend the UI in an intuitive way and provides a real-time preview of the extensions made. The extensibility pane also allows you to remove most extensions. Finally, it is possible to use this tool in conjunction with mock data if you have no OData service to work with or if it isn't available.

In this example, we will extend the list of items and change the its format.

1. Click the arrow next to the Preview Mode text and select Extensibility Mode.
   Now the application UI is locked. If you hover over a control it is highlighted in blue, and if you click on one, it is selected both in the application and in the Outline.

2. In the Outline, from the dropdown list, choose Show extension points.
   This will filter the Outline to show extension points while maintaining the structure, so you can see where each extension point is located.
   Note: There are more filtering options to make searching for specific elements easier.


3. Expand the elements under S2 until you reach the node named CustomerExtensionForObjectListItem with a wrench icon next to it.

4. Right-click on the node and choose Extend.

5. In the popup that appears choose Open Extension Code. The Extensibility pane closes and the code editor opens with the fragment that will replace the extension point. The fragment contains the XML written inside the extension point in the original application or, if no content is available, a commented code snippet as an example of a valid XML that you can add to the application.

To view your changes, simply run the application by clicking  or right click the project folder and select Run > Run as > Web Application.

You can repeat the process and perform other UI extensions such as hiding controls and extending a controller.

Using the Layout Editor

To speed things up we will modify the fragment created in the last step using the Layout Editor. This is a visual tool for building UI based on SAPUI5, allowing fast UI composition and also assistance with data binding and event handling. It is divided into three major areas:

• The Outline and the Controls tabs: The left-most part of the editor. The control pallet enables you to drag and drop controls into the UI and the Outline view shows the UI structure.


• The Canvas: At the center of the editor, this is where the UI is rendered. It allows you to see the changes you are making as they happen, to focus on different elements, to move them around, and more.


• The Properties pane: The right side of the editor, listing all the properties of the currently selected control and also the event bindings when dealing with views.

For more information on the layout editor, see here.


Right now we will focus on the Canvas and the Properties pane:

1. Right-click on the new fragment created in the extension project folder and go to Open With > Layout Editor. Make sure the Properties pane title is Xml View. If not, click on the gray background of the list item template.


2. From the Data Set dropdown list, choose TaskCollection. This will enable the editors' data binding feature. When prompted, click OK to confirm your action.


3. In the canvas, select the "{CustomAttributeData, taskDefinitionsModel>/}" attribute. The Properties pane is populated with the relevant data.


4. Click the Binding icon next to the input field of the Text

This will bring up the data binding dialog. In it, you can see the data structure on the left and the binding expression on the right. You can search for data fields, labels or strings for binding.

 

5. Enter the following binding expression:
   

   { parts: [{path: 'SAP__Origin'}, {path: 'Status'}], formatter: 'cross.fnd.fiori.inbox.Conversions.formatterStatus'}

   
   This expression will replace the previous data to show the status of the item (for example, "Ready", "In Progress").

6. Click OK and you will notice the canvas has been updated with the bound properties.


7. Choose the "{CompletionDeadLine}" attribute from the left column of the control and open the Binding dialog box of the Text


8. Delete the current expression, and search for "processor". Double click on the "ProcessorName" data field and it will be added to the binding expression. Click OK.


9. Save the changes to the file and run the application to see that the list items on the left of the applications have changed.

Next we will modify the application logic. To do this we will use the Extension Wizard to extend the controller of a view and implement an extension hook. These hooks are placed in key flows of applications and are documented in the SAP Help Portal.

Using the Extension Wizard

The extension wizard supports all the extensions available from the extensibility pane, but is mainly used for non-UI extensions such as service replacements.

1. Right-click on the extension project folder and choose New > Extension.


2. In the first wizard step, verify you are extending the correct project, if not change the path to the relevant extension project folder. Click Next.


3. Choose the Implement UI Controller Hook tile and click Next.


4. From the Controller dropdown list, choose S2.


5. From the UI Controller Hooks dropdown list, choose extHookChangeFilterItems.


6. Click Next and then Finish.

SAP Web IDE will display the extended controller in the code editor with the extension hook ready for you to enter your code. This particular extension hook allows you to add custom categories and items to the filter selection dialog.

Now repeat the same process with the extHookGetCustomFilter hook also found in S2. This extension hook allows you to implement custom hooks based on the filters the user has chosen in the filter dialog and to modify existing filters. To demonstrate, replace the empty hooks with the following snippet:

extHookGetCustomFilter: function(oFilterOptions) {

   for (var key in oFilterOptions.selectedFilterOptions) {

      if (oFilterOptions.selectedFilterOptions.hasOwnProperty(key) && key) {

         var aKeyParts = key.split(":");

         if (aKeyParts[0] === this._SORT_HASATTACHMENTS) {

            var oAttachmentsFilter = new sap.ui.model.Filter(aKeyParts[0], sap.ui.model.FilterOperator.EQ, aKeyParts[1] === "true");

            oFilterOptions.additionalFilters.push(oAttachmentsFilter);

         }

      }

   }

},



extHookChangeFilterItems: function(aFilters) {

   var oi18n = this.getView().getModel("i18n").getResourceBundle();

   var oCustomCategory = this._createFilterCategory("Additional");

   var sHasAttachments = this._SORT_HASATTACHMENTS + ":true";

   var oCustomFilter = this._createFilterItem(sHasAttachments, oi18n.getText("sort.hasAttachments"));

   oCustomCategory.addItem(oCustomFilter);

   aFilters.push(oCustomCategory);

}

This will create a new filter category and list item in the filter dialog box and a model filter showing only items with attachments.

To see it in action, save the change and run the application preview, then click on the funnel icon at the bottom of the list. A new category called Additional appears in the dialog box. In it you will find the Attachments filter.

Deploying the Extension Project

Once the extension project is customized according to your needs, deploy it to the same system where the original application is stored.

If you aren't sure whether it was already deployed in the past or you wish to get an update on its status, open the extension project’s context menu and select Deploy > Application Status.

For detailed information on how to deploy applications from within SAP Web IDE to an ABAP system see here.

This guide assumes this is the first time the project is deployed:

1. Select the extension project and the extension project’s context menu select Deploy > Deploy to SAPUI5 ABAP Repository.


2. In the wizard, choose the system which contains the original My Inbox
   If an application with the same namespace already exists on the system you will get a warning. We recommend you change the namespace of the application before proceeding.


3. Make sure the Deploy a new application radio button is selected and click Next.


4. Provide a name for the deployed application along with a description.


5. Click Browse to search for a package to assign it to and then click Next.
   NOTE: If your ABAP system does not support transports for any reason, or you chose a local package, the wizard will forward you to the confirmation page.


6. Select the transport for your package. The wizard lets you either create a new one, input an existing request number, or choose from a list of transports related to you.


7. Click Next and then confirm by clicking Finish.

You can follow the deployment process in the SAP Web IDE console.

Deploying an application also performs a build process on it and saves the result into a "dist" folder inside the project. The content of this folder is the actual deployed artifact and is overwritten with each deployment. You can delete this folder once deployment has finished.

Registering to SAP Fiori Launchpad

To enable access to your extended My Inbox application, add a tile for it in the relevant SAP Fiori Launchpad. For more information on how to do this on ABAP see:

• Adding or removing tiles or target mappings


• Configuring target mappings


• Adding tiles to and removing tiles from a group