We share SAP Fiori workshop materials to SCN community.

Invitation for the class room workshops has been sent to partners. Those who can not join the class room workshop, you can look at materials.

SAP Fiori hands-on workshop:

Duration: 3 days

Target: Consultants

Prerequisite: ABAP knowledge, ERP project implementation experience ( HCM, SD, MM, Workflow, mobile, etc)

Main topics: Extensibility - How to implement Fiori apps and how to extend apps with OData in Gateway and SAPUI5.

Note:This is not the course how to develop custom app like Fiori. For development topics, please join SAP TechEd 2013.

Note: Contents were created in May 2013. Info for the latest Support Package is not included.

Day 1: SAP Fiori overview and Approve Requests App.

SAP Fiori overview:

• SAP Fiori videos
• SAP User Experience Strategy
• SAP Fiori external site What is SAP Fiori
• Technical Documents help.sap.com/fiori ( Install Guide, Security Guide, Extensibility Guide)
• Level 1 overview
• Level 2 overview
• Portal Mobile edition with SAP Fiori
• Architecture overview
• Installation overview ( Fiori, Gateway, UI Add-on, Deployment options, Hub and Embedded )
• 25 apps SAP Fiori SPS02 - Quick reference
• Configuration overview ( RDS Package )
• Extensibility overview ( Extensibility Guide )
• SAP Fiori - BAdI quick reference
• Using SAML 2.0 Authentication to Access Fiori Apps from the Public Internet
• Component name for customer message (listed in SAP Note 1883370)

Approve Request App:

• SAP Business Workflow basics
• How to add custom workflow scenarios
• How to Guide: How to Guide: SAP Fiori - Adding a Custom Workflow Scenario to the SAP Fiori Approve Requests in 6 Steps
• Hands-on exercise
• BADI sample
• launchpage setting. Section 4

Day 2: OData and NetWeaver Gateway

• OData and Gateway overview
• Blog about OData: Let's Talk OData, Shall We? And keep it simple please!
• OData example for Approve Purchase Order
• Hands-on: Testing OData with Gateway Client
• Demo: How to add additional fields in OData ( Approve Purchase Order example )
• Demo: SAP Fiori - transfer graphic image ( Approve Purchase Order example )
• OData development
• Hands-on: Gateway Service Builder (Development overview help, Service Builder help, Tutorial Part1, Tutorial Part2 )
• SAP NetWeaver Gateway Developer Center

Day 3: SAPUI5 and UI Theme Designer

• SAPUI5 overview
• Hands-on: Setting eclipse
• Hands-on: SAPUI5 basics
• SAPUI5 sample code ( Approve Purchase Order )
• Technical introduction for Approve Apps UI
• Hands-on: Add custom fields which is implemented in day 2
• SAPUI5 Developer Center
• Theme Designer overview
• Demo: How to Guide: UI Theme Designer
• Developer Guide for UI Theme Designer

This is a collaborative document to share lessons learned contents for SAP Fiori Cache Management topics in the community SAP Fiori.

Please feel free to insert the link of your document or blog by selecting the edit button from Actions.

1. Manual Cache clearing is not required.

If you do discover a bug kindly create an incident.  SAP Support Team will investigate your issue. It might be that SAP has to provide a note containing the fix, the important thing though is that SAP can reproduce your issue so that SAP can localize the error. To this end please do not invalidate the UI2 Caches! By this collaboration SAP is certain of eliminating all cache errors and reducing customer TCO further. Thank you very much.

2362875 - UI2 Caches and their synchronization with the database

2. Understanding the cache management

Caches are located in each layer (Client, Frontend Server and Backend Server)

3. Client

• Browser - No action is required. Please setup the Cache Buster.
  • If clearing caches is required, you can manually clear the browser cache.
• Fiori Client - No action is required.
  • When an app is updated on the server, Fiori Client automatically purges the existing cache and pulls the update from the server.
    
  • If clearing caches is required, you can manually clear the cache in the Setting -> Clear Cache. http://help.sap.com/fiori-client

4. Frontend Server

• Cache Buster
  • Cache Buster for SAP Fiori - SAP FioriLaunchpad - SAP Library
• ICM
  • Transaction: SMICM  Menu, Goto -> HTTP Plug-in -> Server Cache -> Invalidate Globally
  • ICM Server Cache - Internet Communication Manager (ICM) - SAP NetWeaver - SAP Library
• UI2
  • Please refer to SAP note 2362875 - UI2 Caches and their synchronisation with the database
    
• Metadata
  • Transaction: /IWFND/CACHE_CLEANUP. This clears the OData metadata cache.

5. Backend Server

• Matadata
  • Transaction: /IWBEP/CACHE_CLEANUP. This clears the OData metadata cache.

Please feel free to update this document.

After you have updated to UI_Add-on 750 SP03, you should apply following mandatory notes.

1. General Info:

• 2217489 - Maintenance and Update Strategy for UI Add-On and User Interface Technology
• 2227501 - SAP_UI 7.50 minimal installation requirements

2. Double check the mandatory notes.

Read carefully the notes description. Some notes points other notes.

UI Add-on 750 SP03:

• 2292528 - Release Info Note for SAP NetWeaver UI Add-On 2.0 SP03
• Apply all notes for after SP03:

          Go to https://launchpad.support.sap.com/#/mynotes. -> Attribute Search

• Software Components  = SAP_UI
• Software Components Verion = 750
• Support Package = 004
• Components (Start with) = CA_UI2, CA_UI5

SAPUI5 library:

• SAP Fiori LL19 - Steps for updating SAPUI5 libraries
• 2268281 - SAPUI5 Distribution 1.36 - Central Note
• 2296156 - SAPUI5 upgrade to version 1.36.6
• 2297434 - UI2 & USHELL upgrade to version 1.36.5 for UI Add-On 2.0 (SC: UI_700, SAP_UI 750)

UI Theme Designer:

• 2287879 - Short dump in /UI5/CL_VFS_HANDLER->DO_COPY

Fiori launchpad and Fiori launchpad Designer:

• 2296550 - LPD_CUST system Alias is not recognized
• 2273615 - Landing Page is not opening correctly
• 2205302 - Correction for News Tile - Mandatory field check, No Image for News Tile
• 2279202 - UI2: HTTP connection for system alias not found
• 2287821 - Shortdump in Programm /UI5/APP_INDEX_CALCULATE
• 2285520 - Incorrect language entries in cachebuster-info.json
• 2262384 - Display issues in News Tile drilldown page

Others:

• SAP Fiori - Cache Management

3. Check SAPUI5 library version. It should be 1.36.6 or higher.

    http ://<server>:<port>/sap/public/bc/ui5_ui5/index.html

Welcome to the SAP Fiori, cloud edition Starter Kit!

Whether you've just signed up for a productive license subscription, or you're looking for a one stop shop of resources and information, you're in the right place! SAP Fiori, cloud edition provides a simple and fast approach to adopt key SAP Fiori applications and accelerate UX renovations. You can run, extend and develop SAP Fiori apps on SAP HANA Cloud Platform while consuming data from business processes in existing on-premise SAP Business Suite systems.

Once your HCP account has been successfully created you have access to the account via https://account.hana.ondemand.com/cockpit

The following services are included with a productive license subscription:

• SAP HANA Cloud Platform account including support, storage and outbound bandwidth
• SAP Fiori Appsfrom HCM, CRM, Supply Chain, Inbox, Sourcing and Procurement covering the most commonly used business scenarios
• SAP Fiori launchpad as a role-based, personalized, single point of access
• SAP Web IDE for extending and developing Fiori-like apps
• UI Theme Designer for theming and branding
• SAP HANA Cloud Platform OData Provisioning to consume business data from the back-end system via OData services
• SAP HANA Cloud Connector to securely connect your cloud account with an on-premise system | Download here
• SAP Cloud Identity for identifying life cycle management for SAP Cloud applications and on-premise applications
• SAP Fiori, mobile service to optimize your Fiori apps for mobile use 

Getting Started

The Landscape Configuration Guide provides detailed instructions to get you started on your implementation journey. Furthermore, the Document center in SAP help is also a good resource for a holistic picture of the solution offering.

Common activities during your initial account setup and onboarding include:

• Managing Account Members and their roles
• Managing Accounts and Quota
• Using Multiple Accounts for Staged Application Development
• Identity and Access Management
  

Support Channels & Mailing List:

• Post a question in the SAP Fiori community space for our experts. Be sure to use the #fioricloud tag so the experts can easily find and address your questions.
• How to guides and blogs from community members are organized in the SAP Fiori, cloud edition landing page. We encourage you to not only check out the content already available but to add your own content based on your experiences.
• Subscribe to the customer mailing list in order to receive important SAP HANA Cloud Platform notifications
• Use the SAP Ticket Report System to report incidents. Relevant components can be found here

Feature Requests & Ideas:

Should your experience with your productive account inspire a new idea or you see the need for a feature request, we'd love to hear from you! We invite you to use SAP Idea Place and submit your request and/or idea. An SAP employee will review your submission and engage in conversation with you there. Please review other submissions before posting a new one to ensure your request/idea hasn't been previously addressed. If it has been addressed, you can leverage the voting capabilities to ensure your voice is still heard.

Additional Resources:

• Rapid Deployment Solution (requires SAP Service Marketplace login)
  
• SAP Education UX101 SAP Fiori, cloud edition course *Coming soon!
• Tips and Tricks
  
  

We will continue to update this starter kit as we learn more about commonly asked questions/lessons learned. If you're interested in ensuring you receive updates to this kit be sure to select the 'Receive email notifications' or 'Track in Communications' from the gray 'Action' box in the top right of this page.

Terms for presenting data in user interfaces

Namespace: com.sap.vocabularies.UI.v1

Vocabulary File

For a complete definition of the terms see the attached document

Terms for annotating communication-relevant information

Namespace: com.sap.vocabularies.Communication.v1

Vocabulary File

For a complete definition of the terms see the attached document

1. When you logon to the SAP Fiori Launchpad, you will see standard background image for SAP Fiori Launchpad login page.

2. Go to transaction code SE80. Choose MIME Repository.

3. Navigate to SAP →PUBLIC → BC → UI2 → logon → img. Expand “img” folder you will find different background jpg images.

4. Choose login_background.jpg , right-click and choose Upload/Download → Upload and Replace

5. In the File explorer choose the new image. The name of your new image should be the same “login_background.jpg”. Save the changes in the transport request.

6. Now logon again into SAP Fiori Launchpad by accessing the launchpad url, you should see your new image as background.

You can observe background image for SAP Fiori Launchpad Logon is being changed now.

In the Part 2 of this 3 part series, we discussed what an the minimum requirements for packaging, and when the drag-and-drop interface can be used as opposed to the Advanced Configuration File.  The purpose of this, the last in our blog series, is to examine the Advanced Configuration File in more detail, providing insight into how it can be constructed and what it should contain.

The need for ACF arises when user wants to

• Define an app (which is not listed)
• Define additional capabilities for an app, which a user couldn’t accomplish in other ways. Examples of such capabilities are: dependencies for app, offline support for the app, inter-app communication.

The advanced configuration file is a .json file that describes an array of components (using properties) that should be packaged with the app. Your ability to create an advanced configuration file is dependent on selecting I want to create a local launchpad with only the apps I want to mobilize on the Fiori App Scenario page.

The settings from ACF overrides settings for the app that are described in other places, such as the manifest file or titles, icons etc.

The configuration file should conform to JSON syntax. The basic structure is:

Sample Code

{

"appConfig": {

...

},

"applications": [

...

]

}

Some examples of ACF

1. ACF for a single app in FCE scenario

id = your app id (it's located in webide > app_project folder > webapp > manifest.json

cloudComponentId = app subscription name in HCP

url = the location under which the application is registered in Fiori Launchpad. By default when deploying the app via SAP WebIDE it is /sap/fiori/[heliumhtml5appname] ... it is NOT the subscription name but the name of the app that you subscribe to.

{

      "applications":[

{

"id":"com.sap.fiori.products",

"cloudComponentId":"productlistingsub",

"url": "/sap/fiori/productlisting"

}

     ]

}

2. ACF for a single app in FES scenario

If FES has UI Add on 2.0 and the app has manifest file, then ACF can be very simple with just the app id.

{

"applications": [

    {

"id": "nw.epm.refapps.shop"

    }

  ]

}

3. ACF with multiple apps with library and inter-app navigation

The following advanced configuration file for three applications defines inter-app navigation intents for a FES that has UI Add-On 2.0, and where the apps have been deployed to the FES with manifest files.

{

     "applications":[

          {

               "id":"cus.crm.mycontacts",

               "intent":"ContactPerson-MyContacts",

               "title":"My Contacts",

               "url":"/sap/bc/ui5_ui5/sap/crm_mycont"

          },

          {

               "id":"cus.crm.myaccounts",

               "intent":"Account-MyAccounts",

               "title":"My Accounts",

               "url":"/sap/bc/ui5_ui5/sap/crm_myaccounts"

          },

          {

               "id":"sap.cus.crm.lib.reuse",

               "url":"/sap/bc/ui5_ui5/sap/crm_lib_reuse/sap/cus/crm/lib/reuse",

               "reuse":true,

               "scenario":true

          }

     ]

}

And that's it!  These are just a couple different scenarios where the Advanced Configuration File can be useful to SAP HCP, mobile service for SAP Fiori. We'll do our best to add more examples in the future. 

In this three part series, we covered quite a bit of ground.  We started by talking about the fundamentals of app packaging and why you should use this feature.  Then we moved on to a discussion of what types of apps can actually be packaged, and more importantly, when an Advanced Configuration File is required.  In the last and final part of our series, we dove deep into the structure of the Advanced Configuration File itself. 

A special thanks to Radhakrishna Bodapati for providing the technical content for this section of the series!

This is a collaborative document to share blogs and help documents for SAP Smart Business Cockpits 1.0

Blogs:

Modeling KPI’s using the KPI Modeler

SMART Business Download Tool - KPI Modeler

Analyse KPI Details - Generic Drill-Down App

Common Problems and Solution for SAP Smart Business in Suite on HANA

How to create KPI, Evaluations and Tiles

Smart Business KPI Tiles are not coming in Fiori Launchpad - Troubleshooting Steps

Resolving error in installation of SAP Smart Business for SoH (Suite on Hana)

Transport Tool

How to resolve “Cannot Load Tile KPI Modeler issue”

Redeploy HDBTI file

SAP Documents:

SAP Smart Business Cockpits 1.0 – SAP Help Portal Page

Extending the MyBenefits Fiori

App to hide Unenrolled Benefits

SAPUI5 Version:                               1.28.31

Core Version: 1.28.30

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36

Web IDEVersion:                            160630

Gateway application Version:        1.8.7, build number 52

Web IDE Template Version:           1.4.0

Note: If uploading to the Gateway, please refer to the following SCN document:

http://scn.sap.com/docs/DOC-74098

1. 1) Open webIDE, then select New extension project:

1. 2) Select SAP HANA Cloud Platform:

1. 3) Select hcmmybenefits, then the ok button:

1. 4) Click Next, then Finish:

1. 5) You are now presented with a mock up of the original MyBenefits App. Scroll to the bottom of the summary pane, click on Unenrolled, and then one of the benefit plans listed. The entire unenrolled section is the section on the summary pane we want to hide.

1. 6) The unenrolled section is created in the S2 Controller.  Click on the S2 Controller in the right hand Outline window, click on Extend, and then click on “Extend with copy of original controller”:

1. 7) You will be prompted with a popup to Open Extension Code:

1. 8) We are presented with the S2 Controller’s source code with all of its functions commented out.  We will only uncomment functions that we need to modify to limit the number of customized functions in the controller.  Those that are commented out will automatically run the functions in the standard (original) S2 Controller.

Scroll down to function “chooseView” and uncomment the entire function.  Lines 241-268:

1. 9) Comment out lines 264 and 265, with appropriate comments:

1. 10) Next scroll down to function ”handleSort” and uncomment, lines 336- 408:

1. 11) Add the following line after line 377:

1. 12) Then a closing bracket after line 409:

1. 13) Scroll down to function ”getGroupHeader” and uncomment, lines 437-466:

1. 14) Comment out lines 461-463:

1. 15) Finally, go to File menu and Save, then go to the Tools menu and select Extensibility Pane. Scroll down to the bottom of MyBenefits Summary Pane, and Unenrolled plans are no longer displayed.

Please note that that the one downside to this approach is that when there is and SAP enhancement or upgrade to MyBenefits, the functions within the S2 controller that we have just modified will need to be checked for enhancements.  If so, we will need to reapply the changes above to the original SAP S2 controller supplied with the enhancement.

Here is a listing of the resulting S2 Controller extended code:

jQuery.sap.require("hcm.mybenefits.util.DataManager");

jQuery.sap.require("hcm.mybenefits.util.Formatter");

jQuery.sap.require("hcm.mybenefits.util.ConcurrentEmployment");

jQuery.sap.require("sap.ca.scfld.md.controller.ScfldMasterController");

sap.ui.controller("hcm.mybenefits.hcmmybenefitsExtension.view.S2Custom", {

  //    onInit: function () {

  //        sap.ca.scfld.md.controller.ScfldMasterController.prototype.onInit.call(this);

  //        this.resourceBundle = this.oApplicationFacade.getResourceBundle();

  //        this.oDataModel = this.oApplicationFacade.getODataModel();

  //        this.oApplication = this.oApplicationFacade.oApplicationImplementation;

  //        hcm.mybenefits.util.DataManager.init(this.oDataModel, this.resourceBundle);

  //        this.oRouter.attachRouteMatched(this._handleRouteMatched, this);

  //        this.masterListCntrl = this.byId("list");

  //        this.objBenfitsCollection = null;

  //        this._fnRefreshCompleted = null;

  //        this.dateChangeFlag = false;

  //        hcm.mybenefits.util.DataManager.setCachedModelObjProp("benefitsPlan", {});

  //        this.byId("S2DatePicker").setDateValue(new Date());

  //        this._isLocalRouting = false;

  //        this._isInitialized = false;

  //        this.searchflag = false;

  //        this.flag = true;

  //        this.refreshFlag = false;

  //    },

  //    setLeadSelection: function () {

  //        var i = this.masterListCntrl.getItems();

  //        if (i.length <= 2 && this.flag !== false) {

  //            if (!sap.ui.Device.system.phone) {

  //                this.oRouter.navTo("noData", {

  //                    viewTitle: "MB_APP_DETAIL_TITLE",

  //                    languageKey: sap.ui.getCore().getConfiguration().getLanguage()

  //                }, !sap.ui.Device.system.phone);

  //            }

  //            this.setBtnEnabled("viewSummaryID", false);

  //        } else {

  //            var f = this._oApplicationImplementation.getFirstListItem(this);

  //            if (f) {

  //                var a = f.getAttributes()[0].getText();

  //                if (a !== this.resourceBundle.getText("MB_SHOW_DETAILS")) {

  //                    this.setListItem(f);

  //                }

  //            }

  //        }

  //    },

  //    _handleRouteMatched: function (e) {

  //        if (e.getParameter("name") === "master" && this._isLocalRouting === false) {

  //            if (!this.oApplication.pernr) {

  //                hcm.mybenefits.utils.ConcurrentEmployment.getCEEnablement(this, jQuery.proxy(function () {

  //                    this._initData();

  //                }, this));

  //            }

  //        }

  //        if (e.getParameter("name") === "master" && this._isLocalRouting === true) {

  //            this._isLocalRouting = false;

  //        }

  //    },

  //    _initData: function () {

  //        var _ = this;

  //        hcm.mybenefits.util.DataManager.init(this.oDataModel, this.resourceBundle);

  //        if (!this.dateChangeFlag) {

  //            var d = new Date();

  //            var a = ("0" + d.getDate()).slice(-2).toString();

  //            var m = ("0" + (d.getMonth() + 1)).slice(-2).toString();

  //            var y = d.getFullYear();

  //            this.todayDate = a + "-" + m + ", " + y;

  //            this.date = d;

  //            this.filterDate = a + m + y;

  //        }

  //        this.filter = ["$filter=AsOn eq '" + this.filterDate + "' and EmployeeNo eq '" + this.oApplication.pernr + "' and Type eq 'Enrolled'"];

  //        hcm.mybenefits.util.DataManager.getMasterList(this.refreshFlag, this.dateChangeFlag, this.filter, function (o) {

  //            var t = _.refreshFlag;

  //            _.objBenfitsCollection = { "Benefits": o };

  //            hcm.mybenefits.util.DataManager.setCachedModelObjProp("benefitsPlan", _.objBenfitsCollection);

  //            try {

  //                if (_.objBenfitsCollection) {

  //                    _.masterListCntrl.setModel(new sap.ui.model.json.JSONModel(_.objBenfitsCollection));

  //                    _._isLocalRouting = true;

  //                    this.oSorter = new sap.ui.model.Sorter("StatusCode", false, function (C) {

  //                        var s = C.getProperty("StatusCode").trim();

  //                        return s;

  //                    });

  //                    if (_.masterListCntrl.getItems().length > 0) {

  //                        _.masterListCntrl.removeAllItems();

  //                    }

  //                    _.masterListCntrl.bindItems({

  //                        path: "/Benefits",

  //                        template: new sap.m.ObjectListItem({

  //                            type: "{device/listItemType}",

  //                            title: "{PlanTypeText}",

  //                            attributes: [

  //                                new sap.m.ObjectAttribute({ text: "{PlanSubTypeText}" }),

  //                                new sap.m.ObjectAttribute({ text: "{PlanOptionText}" })

  //                            ],

  //                            firstStatus: new sap.m.ObjectStatus({

  //                                text: "{StatusText}",

  //                                state: "Error"

  //                            }),

  //                            press: jQuery.proxy(_._handleItemPress, _)

  //                        }),

  //                        sorter: this.oSorter

  //                    });

  //                    var I = 0;

  //                    jQuery.each(_.masterListCntrl.getItems(), function (i, l) {

  //                        if (!l.getBindingContext()) {

  //                            _.masterListCntrl.removeItem(i - I);

  //                            I = I + 1;

  //                        }

  //                    });

  //                    if (o.length >= 0 || t) {

  //                        var L = new sap.m.ObjectListItem({

  //                            type: "{device/listItemType}",

  //                            title: "",

  //                            attributes: [

  //                                new sap.m.ObjectAttribute({ text: _.resourceBundle.getText("MB_SHOW_DETAILS") }),

  //                                new sap.m.ObjectAttribute({ text: "" })

  //                            ],

  //                            firstStatus: new sap.m.ObjectStatus({

  //                                text: "{StatusText}",

  //                                state: "Error"

  //                            })

  //                        });

  //                        _.masterListCntrl.addItem(L);

  //                    }

  //                    _.originalaItems = _.masterListCntrl.getItems();

  //                    _.handleSort();

  //                    _._bIsMasterRoute = true;

  //                    _.refreshHeaderFooterForEditToggle();

  //                    if (_.originalaItems.length <= 2) {

  //                        _.setBtnEnabled("viewSummaryID", false);

  //                    }

  //                    var b = _.filterDate;

  //                    var f = b.substr(2, 2) + "/" + b.substr(0, 2) + "/" + b.substr(4, 4);

  //                    _.byId("S2DatePicker").setDateValue(new Date(f));

  //                    if (_._fnRefreshCompleted) {

  //                        _._fnRefreshCompleted();

  //                    }

  //                }

  //            } catch (e) {

  //                jQuery.sap.log.warning(e);

  //            }

  //            if (!sap.ui.Device.system.phone && !_._isInitialized) {

  //                _.registerMasterListBind(_.masterListCntrl);

  //                _._isInitialized = true;

  //            }

  //            if (!sap.ui.Device.system.phone) {

  //                if (t) {

  //                    for (var i = 0; i < _.masterListCntrl.getItems().length; i++) {

  //                        var c = _.masterListCntrl.getItems()[i];

  //                        if (c.getBindingContext()) {

  //                            var g = c.getBindingContext();

  //                            var k = g.getProperty("PlanCategory");

  //                            var h = g.getProperty("PlanTypeKey");

  //                            var j = g.getProperty("PlanSubTypeKey");

  //                            if (k === _.selectedItemKey1 && h === _.selectedItemKey2 && j === _.selectedItemKey3) {

  //                                _.setListItem(_.masterListCntrl.getItems()[i]);

  //                                break;

  //                            }

  //                        }

  //                    }

  //                    if (i === _.masterListCntrl.getItems().length) {

  //                        _.setLeadSelection();

  //                    }

  //                    _.refreshFlag = false;

  //                } else {

  //                    _.setLeadSelection();

  //                }

  //            }

  //        }, function (o) {

  //            hcm.mybenefits.util.DataManager.parseErrorMessages(o);

  //        });

  //    },

  //    setListItem: function {

  //        var s = i.getAttributes()[0].getText();

  //        if (s === this.resourceBundle.getText("MB_SHOW_DETAILS")) {

  //            i.setVisible(false);

  //            this.flag = false;

  //            this.originalaItems = this.masterListCntrl.getItems();

  //            if (this.originalaItems.length < 2) {

  //                this.setBtnEnabled("viewSummaryID", false);

  //            }

  //            this.filter = ["$filter=AsOn eq '" + this.filterDate + "' and EmployeeNo eq '" + this.oApplication.pernr + "' and Type eq 'Unenrolled'"];

  //            this.fetchUnEnrolled(this.filter);

  //        }

  //        if (undefined !== i.getBindingContext()) {

  //            var b = i.getBindingContext();

  //            var p = b.getProperty("PlanCategory");

  //            var a = b.getProperty("Type");

  //            var v = this._chooseView(p, a);

  //            i.setSelected(true);

  //            this.getList().setSelectedItem(i, true);

  //            this.oRouter.navTo(v, { contextPath: encodeURIComponent(b.sPath.substr(1)) }, !sap.ui.Device.system.phone);

  //        }

  //        this._isLocalRouting = true;

  //        if (sap.ui.Device.system.phone) {

  //            this.masterListCntrl.removeSelections();

  //        }

  //    },

  //    fetchUnEnrolled: function (f) {

  //        var _ = this;

  //        hcm.mybenefits.util.DataManager.getbothMasterList(f, function (o) {

  //            _.objBenfitsCollection = o;

  //            try {

  //                if (_.objBenfitsCollection) {

  //                    _.masterListCntrl.setModel(new sap.ui.model.json.JSONModel(_.objBenfitsCollection));

  //                    var I = 0;

  //                    jQuery.each(_.masterListCntrl.getItems(), function (i, a) {

  //                        if (!a.getBindingContext()) {

  //                            _.masterListCntrl.removeItem(i - I);

  //                            I = I + 1;

  //                        }

  //                        if (I === 0) {

  //                            this.ifenrld = false;

  //                        }

  //                    });

  //                    _.mcount = 0;

  //                    var b = _.masterListCntrl.getItems().length;

  //                    var d = _.originalaItems.length;

  //                    _.originalaItems = _.masterListCntrl.getItems();

  //                    _.handleSort();

  //                    _._bIsMasterRoute = true;

  //                    var y = _.filterDate;

  //                    _.refreshHeaderFooterForEditToggle();

  //                    if (_.originalaItems.length < 2 || d === 2) {

  //                        _.setBtnEnabled("viewSummaryID", false);

  //                    }

  //                    _.masterListCntrl.getInfoToolbar().getContent()[1].setValue(y.substr(0, 2) + "-" + y.substr(2, 2) + "-" + y.substr(4, 4));

  //                    if (_._fnRefreshCompleted) {

  //                        _._fnRefreshCompleted();

  //                    }

  //                }

  //                if (!sap.ui.Device.system.phone) {

  //                    _.setLeadSelection();

  //                }

  //            } catch (e) {

  //                jQuery.sap.log.warning(e);

  //            }

  //        }, function (o) {

  //            hcm.mybenefits.util.DataManager.parseErrorMessages(o);

  //        });

  //    },

     _chooseView: function (p, a) {

         var v = "";

         if (a == "Enrolled" || a == "Pending") {

             switch (p) {

             case "A":

                 v = "Health";

                 break;

             case "B":

                 v = "Insurance";

                 break;

             case "C":

                 v = "Savings";

                 break;

             case "D":

                 v = "FSA";

                 break;

             case "E":

                 v = "Miscellaneous";

                 break;

             case "F":

                 v = "Savings";

                 break;

             }

  // dkumm - 6/20/2016 - begin suppression of unenrolled benefits section.       

  //        } else if (a == "Unenrolled") {

  //            v = "Unenrolled";

  // dkumm - 6/20/2016 - end suppression of unenrolled benefits section.

         }

         return v;

     },

  //    applySearchPatternToListItem: function (i, f) {

  //        if (undefined !== i.getBindingContext())

  //            if (f.substring(0, 1) === "#") {

  //                var t = f.substr(1), d = i.getBindingContext().getProperty("Name").toLowerCase();

  //                return d.indexOf(t) === 0;

  //            } else {

  //                if (f === "") {

  //                    return true;

  //                }

  //                var I = i.getBindingContext();

  //                if (I.getProperty("PlanTypeText").toLowerCase().indexOf(f) !== -1 || I.getProperty("PlanSubTypeText").toLowerCase().indexOf(f) !== -1 || I.getProperty("PlanOptionText").toLowerCase().indexOf(f) !== -1) {

  //                    return true;

  //                }

  //                return false;

  //            }

  //    },

  //    applySearchPattern: function (f) {

  //        var l = this.originalaItems, m = [], v, f = f.toLowerCase(), c = 0;

  //        this.searchflag = true;

  //        if (f !== "") {

  //            for (var i = 0; i < l.length; i++) {

  //                v = this.applySearchPatternToListItem(l[i], f);

  //                if (v) {

  //                    m.push(l[i]);

  //                    c++;

  //                }

  //            }

  //        } else {

  //            m = this.originalaItems;

  //            c = this.originalaItems.length;

  //        }

  //        if (m.length > 0) {

  //            this.handleSort(m);

  //        }

  //        this.masterListCntrl.removeSelections();

  //        if (this._fnRefreshCompleted) {

  //            this._fnRefreshCompleted();

  //            sap.ca.ui.utils.busydialog.releaseBusyDialog();

  //        }

  //        return c;

  //    },

  //    handleChange: function (e) {

  //        var D = e.getParameters().newValue;

  //        var v = D.split("-"), y = v[2], a = v[1], b = v[0], _ = this;

  //        D = b + a + y;

  //        if (Number(D).toString() === "NaN") {

  //            var d = new Date();

  //            var c = ("0" + d.getDate()).slice(-2).toString();

  //            var f = ("0" + (d.getMonth() + 1)).slice(-2).toString();

  //            var g = d.getFullYear();

  //            D = c + f + g;

  //        }

  //        _.filterDate = D;

  //        _.tempDate = D;

  //        _.dateChangeFlag = true;

  //        _.flag = true;

  //        if (_._oControlStore.oMasterSearchField.getValue()) {

  //            _._oControlStore.oMasterSearchField.clear();

  //        }

  //        var m = new sap.ui.core.routing.HashChanger();

  //        var u = m.getHash();

  //        m.setHash(u);

  //        _._initData();

  //        _.dateChangeFlag = true;

  //    },

     handleSort: function (m) {

         var s = this, I = 0, l = this.byId("list"), S = "StatusCode", g = true;

         jQuery.each(l.getItems(), function (i, a) {

             if (!a.getBindingContext()) {

                 l.removeItem(i - I);

                 I = I + 1;

             }

         });

         var c = l.getItems();

         if (undefined !== m && m !== null) {

             c = m;

         } else {

             c = this.originalaItems;

         }

         c.sort(function (a, b) {

             if (a.getBindingContext()) {

                 var v = a.getBindingContext().getProperty(S);

             } else {

                 v = null;

             }

             if (b.getBindingContext()) {

                 var f = b.getBindingContext().getProperty(S);

             } else {

                 f = null;

             }

             return s.compareFunction(v, f);

         });

         l.removeAllItems();

         var d = 0;

         var G = 0;

         var o, e;

         jQuery.each(c, function (i, a) {

             if (a.getBindingContext()) {

                 var C = a.getBindingContext().getProperty("StatusCode");

             } else if (a.getAttributes()[0].getText()) {

                 if (a.getAttributes()[0].getText() === s.resourceBundle.getText("MB_SHOW_DETAILS")) {

                     C = "2U";

                 }

             }

             if (C === "") {

                 C = "UnGrouped";

             }

// dkumm - 6/20/2016 - begin suppression of unenrolled benefits section.

  if (C !== "2U") {

// dkumm - 6/20/2016 - end suppression of unenrolled benefits section.

              if (g && (i === 0 || C !== e)) {

                  if (i !== 0) {

                      o.setCount(G);

                  }

                  e = C;

                  o = new sap.m.GroupHeaderListItem({ title: s.getGroupHeader(C) });

                  l.insertItem(o, i + d);

                  d = d + 1;

                  G = 0;

              } else if (g && (i + 1 === c.length || i + 1 === c.length && i === 0)) {

                  G = G + 1;

                  o.setCount(G);

                  if (o.getTitle() !== s.resourceBundle.getText("MB_LIST_HEADER_UNENROLLED") && s.mcount === 0) {

                      sap.m.MessageToast.show(s.resourceBundle.getText("MB_NO_UNENROLLED_PLAN"), { width: "15em" });

                      s.mcount = 1;

                  }

              }

              if (!s.flag && i + 1 === c.length) {

                  if (o.getCount() === "") {

                      G = G + 1;

                  }

                  if (o.getTitle() !== s.resourceBundle.getText("MB_LIST_HEADER_UNENROLLED") && s.mcount === 0) {

                      sap.m.MessageToast.show(s.resourceBundle.getText("MB_NO_UNENROLLED_PLAN"), { width: "15em" });

                      s.mcount = 1;

                  }

                  o.setCount(G);

              }

              G = G + 1;

              l.addItem(a);

  // dkumm - 6/20/2016 - begin suppression of unenrolled benefits section.       

  }

  // dkumm - 6/20/2016 - end suppression of unenrolled benefits section.

         });

     },

  //    compareFunction: function (a, b) {

  //        try {

  //            if (b === null) {

  //                return -1;

  //            }

  //            if (a === null) {

  //                return 1;

  //            }

  //            if (typeof a === "string" && typeof b === "string") {

  //                return a.toLocaleUpperCase().localeCompare(b.toLocaleUpperCase());

  //            }

  //            if (a < b) {

  //                return -1;

  //            }

  //            if (a > b) {

  //                return 1;

  //            }

  //            return 0;

  //        } catch (e) {

  //            jQuery.sap.log.error("failed to compare:" + a + " and " + b, ["failed in compareFunction S2 controller"], ["hcm.mybenefits.view.S2.controller"]);

  //        }

  //    },

     getGroupHeader: function (g) {

         var r = "";

         switch (g) {

         case "0P":

             r = this.resourceBundle.getText("MB_LIST_HEADER_PENDING");

             break;

         case "1A":

             r = this.resourceBundle.getText("MB_LIST_HEADER_HEALTH");

             break;

         case "1B":

             r = this.resourceBundle.getText("MB_LIST_HEADER_INSURANCE");

             break;

         case "1C":

             r = this.resourceBundle.getText("MB_LIST_HEADER_SAVINGS");

             break;

         case "1D":

             r = this.resourceBundle.getText("MB_LIST_HEADER_FSA");

             break;

         case "1E":

             r = this.resourceBundle.getText("MB_LIST_HEADER_MISC");

             break;

         case "1F":

             r = this.resourceBundle.getText("MB_LIST_HEADER_STOCK");

             break;

  // dkumm - 6/20/2016 - begin suppression of unenrolled benefits section.       

  //        case "2U":

  //            r = this.resourceBundle.getText("MB_LIST_HEADER_UNENROLLED");

  //            break;

  // dkumm - 6/20/2016 - end suppression of unenrolled benefits section.

         }

         return r;

     },

  //    getViewSummary: function () {

  //        var v = this.getView(), d = v.byId("list").getInfoToolbar().getContent()[1].getValue(), a = d.split("-"), y = a[2], m = a[1], b = a[0], d = b + m + y;

  //        var p = this.oApplicationFacade.oApplicationImplementation.oConfiguration.getServiceList()[0].serviceUrl + "FileDataSet(FileKey='CONF_FORM',Date='" + d + "',EmployeeNo='" + this.oApplication.pernr + "')/$value", q = "?", c = "&", s = "";

  //        if (location.host.indexOf("localhost") !== -1) {

  //            s = "sap-server=gm6-http" + c;

  //        }

  //        p += q + s;

  //        sap.m.URLHelper.redirect(p, true);

  //    },

  //    getHeaderFooterOptions: function () {

  //        var l = this.byId("list");

  //        var c = l.getItems().length;

  //        jQuery.each(l.getItems(), function (i, I) {

  //            if (!I.getBindingContext()) {

  //                c--;

  //            }

  //        });

  //        return {

  //            sI18NMasterTitle: this.resourceBundle.getText("MB_MASTER_TITLE", [c]),

  //            buttonList: [{

  //                    sId: "viewSummaryID",

  //                    bDisabled: false,

  //                    sI18nBtnTxt: this.resourceBundle.getText("MB_CONFIRMATION"),

  //                    onBtnPressed: jQuery.proxy(function (e) {

  //                        this.getViewSummary(e);

  //                    }, this)

  //                }],

  //            onRefresh: jQuery.proxy(function (s, r) {

  //                this.refreshFlag = true;

  //                this.flag = true;

  //                this._fnRefreshCompleted = r;

  //                var m = new sap.ui.core.routing.HashChanger();

  //                var u = m.getHash().split("&")[0];

  //                m.setHash(u);

  //                hcm.mybenefits.util.DataManager.setCachedModelObjProp("benefitsPlan", {});

  //                if (this.masterListCntrl.getSelectedItem()) {

  //                    var a = this.masterListCntrl.getSelectedItem().getBindingContext();

  //                    this.selectedItemKey1 = a.getProperty("PlanCategory");

  //                    this.selectedItemKey2 = a.getProperty("PlanTypeKey");

  //                    this.selectedItemKey3 = a.getProperty("PlanSubTypeKey");

  //                }

  //                if (s) {

  //                    this._oControlStore.oMasterSearchField.clear();

  //                }

  //                this._initData();

  //                this.dateChangeFlag = true;

  //            }, this)

  //        };

  //    }

});

The ability to debug an application is a critical step in the application development process.  It allows the developer to identify, diagnose and correct issues in an application in all phases of the application life-cycle  Mobile apps running inside an SAP Fiori client is no exception, and SAP has provided detailed information for on how to debug the SAP Fiori client.  Those instructions can be found here.

In SAP HCP, mobile service for SAP Fiori, the publisher doesn't actually have access to the SAP Fiori client source, code, so how does the debugging feature get enabled?  The answer is, it's easy!

The purpose of the mobile service for SAP Fiori is to simplify advanced uses cases for SAP Fiori, use cases that require the HTML/CSS/JS content to be encapsulated within some form of the SAP Fiori client.  This is all accomplished through a simple workflow.

At the end of the workflow, the publisher is presented with a "Build Summary" screen.

This screen can also be launched on the Platforms tab of a Fiori app, either from the Action menu or via the Build All button:

To build a debug - enabled app,simply check the "Build debug-enabled binaries" checkbox:

Once the build is complete, you will see a visual indicator that Debug - Enabled binaries are ready for debugging:

You're now ready to debug your app!

One final note.  Debug-enabled apps are really meant for the developer or publisher to identify, diagnose and correct issues in the generated app.  Debug-enabled apps should generally speaking not be distributed to end users.  For this reason, in the mobile service for SAP Fiori, Debug-enabled apps cannot be set to Production:

Once the debugging exercise is complete, the app should be re-built with the Debug-enabled flag unchecked, then you are on your way!

Learn about Offline Enablement

Offline Enablement for SAP Fiori - Guide for Decision Makers

This document is aimed at decision makers; and its goal is to provide the necessary guidance when making the decision to enable offline operation of your Fiori applications.

View document

Offline Enablement for SAP Fiori - Developers Guide

This document is aimed at developers who plan to implement offline enablement for a Fiori app using Web IDE. It outlines the most important aspects of offline enablement that you need to consider before implementation, the required steps to create an offline-enabled app, as well as information about testing and debugging, and some examples from real life.

View document

In this How-To Guide, we will step-by-step detail the configurations necessary to launch the SAP ABAP Classical report in the SAP Fiori Launchpad.

STEP1:Develop a Report Program in the ABAP EDITOR and assign a Tcode.

STEP2: Open the Browser and Open the admin control panel for creating Catalogue and Group for FIORI Launchpad or Click On the link 

https://xxx.xxx.xxx:44300/sap/bc/ui5_ui5/sap/arsrvc_upb_admn/main.html#/Catalog/X-SAP-UI2-CATALOGPAGE:/UI2/FLP_ADMIN

STEP3: Click on the sign to add a Catalogue Give a title and an ID. Note: Spaces are not allowed in the Catalogue ID.

STEP4: Click on Target Mapping and when the screen is loaded click on Create Target Mapping at the bottom of the screen.

STEP5: Give the Semantic Object name and the Action. Select the semantic object if you are using the existing objects or else you need to create new one from the

TCode: /UI2/SEMOBJ. Give a semantic object name and click on save.

Once the semantic Object is saved it should appear in the list in browser

• APPLICATION TYPE: Select Transaction or others listed based on the requirement.
• TITLE: Give a meaningful title so that it appears on the tab when the application is launched.
• TRANSACTION: Give the TCode created for the Report.
• SYSTEM ALIAS: Give the system alias’s name which is selected in the application of the Launchpad in   TCODE: LPD_CUST.
• By Default, the system select all the types you can change it as per the requirement.

In case of any parameters available they can be given in the parameters section by clicking the add button and in the same way the default values can also be given to the parameters.

For creating semantic object: Go to Transaction “/UI2/SEMOBJ” and select new entries and give unique name and save it in a package.

Note: Sample Values for target mapping are given below.

Click on the save button once all the mandatory fields are filled.

STEP 6: Once the Target Mapping is done now assign it to the “TILE”.

• Select the TILE ICON and click on Create Tile -> Select App Launcher-Static (if you want a static tile)
• Give the Title Name, Subtitle and keywords, and select an Icon which suits the application.

NOTE: Use Semantic Object Navigation must be checked.

• Give the Semantic Object Name and Action as given in the target mapping and click on save.

Step 7: Now Create a Group from the Groups tab and Click on ADD Icon at the left bottom of the screen.

• Now Click on Add Button in the show as tiles section.
• In the next page select the catalogue you have create and add it to the group.
• Now the App is assigned to the Group.

Step 8: Now go back to the HANA ECC System and execute the Transaction “LPD_CUST”.

• Click on Create Launchpad and give a roll, Instance and a meaningful description and click on OK button.

• Now Click on New Application after creating the Launchpad.
• Give the Link Text and select the Application type as Transaction if you want to display the transaction and give the TCode name.
• Select the System Alias from the available list and click on save. 

Note: The system alias name given here should be the same as name given in target mapping of the FIORI Launchpad configuration.

Step 9: Now Go to Transaction “PFCG”.

• Give a role name and click on single role.
• Give a meaningful description and click on save.

  Now go to Menu Tab and click on insert node near transaction button.

• Select SAP Tile Catalogue and give the catalogue name which you have created in the Fiori Launchpad and click on OK.

• Now Select SAP Fiori Tile Group by clicking the insert node button and give the group id which you have created in the fiori Launchpad.

• Now click on save and go to USER Tab and assign the users to who use the application and click on save button.
• Once the save button is clicked the tabs should turn green.

STEP 10: Now login to the user FIORI Launchpad search for the Group created and open the application.

• Once you open the App it should display the desired output in the browser.

NOTE: ALL the Objects you create in the system should be saved in a Transportable Package.

Category: Extend/Develop

Get Involved: Impact SAP’s Solution for UI Adaptation by Sharing Your Needs

We want to understand how you’re dealing with UI adaptation. What do your processes look like? What challenges do you face? And how should it work for you ideally? Join our next workshop and be part of shaping UI adaptation at runtime. Find out how ...