It sounds like a lot of tech jargon to start, but let me explain.

There are two big problems with Fiori today:

1. There is a lot of work required to get Fiori started and configured, including a new ABAP system, Gateway.

2. There is a lack of true mobile / offline capabilities.

While I tend to think of Fiori first as a simplification technology, and second as a mobility technology, those lines will continue to blur over time.

To address both of those issues, in this blog I will show how anyone can use the free Fiori Cloud Trial edition, and the free Fiori Client app, and build a functioning GPS-enabled Fiori app without any installations. And when you move from the Fiori Cloud Trial Edition, to your own HCP instance, you could connect this all to your own ECC system as well.

For this app, I used My Timesheet.

Tile:

App sample:

Let's start by going here: https://www.sapfioritrial.com/

This page is a great resource where you can try out 25+ (always growing) of the latest Fiori apps and get a feel for how they work. If you click on the "Customize and Extend" tile, it will automatically spin you up a free Hana Cloud Platform instance for you to try!

Once you are in the HCP Launchpad, you can click on your own My Timesheet app, and then click on Develop Apps.

From there, you will get taken to the SAP Web IDE with the option to select an extension to the My Timesheet App. Great news, since getting the syntax down perfectly for doing an extension can be a little tricky.

Tip: When prompted, if you select copy existing app, it will be a useful reference to find the extension points.

In the entry of Timesheet, I would like to submit a GPS tracking code, so that I know where my employees are submitting their time from. (Sorry, I hope I don't ever have to do that!).

Review the code for the timesheet, and you find this extension point: extS31FormElementForInputs. It's right after Duration, and right before Notes, so you know you have it.

Now back in Web IDE, select the extension project and extend the view, and then the controller.

In the view you will add the fragment that includes GPS fields, and a button to gather them.

In the controller add a new model for GPS, and an action on the button to gather the inputs using the Cordova library for GPS. This is built by default into the Fiori Client by the way, and any other component can be used in this same way.

https://github.com/apache/cordova-plugin-camera

By the way, full code on GitHub here: https://github.com/MindsetConsulting/hcmmytimesheetExtension

Next in Web IDE, deploy this application to HCP:

Once it's published you can preview this on HCP:

After publishing, there was also an option to publish as a tile back to the Fiori Launchpad. You can click that, or use the Fiori Cloud tools to configure a new dynamic tile. In either case you will get a nice new tile like this:

Finally, go and download the Fiori Client for iOS (or Google): https://itunes.apple.com/us/app/sap-fiori-client/id824997258?mt=8

Launch that on your phone, and for the Launchpad URL, insert your Fiori Cloud URL from the same page that the tile is on. Something like: https://fiorilaunchpad-b67b08fae.dispatcher.us1.hana.ondemand.com/sap/hana/uis/clients/ushell-app/shells/fiori/FioriLaunchpad.html

(you may want to copy/paste!)

After you login, try out the app:

Enjoy!

p.s. Thanks to Maksim Rashchynski's Profile | SCN for his help with the code!

Did you know that design can improve the adoption of your FIORI application? By applying a few tangible techniques, you can create a delightful experience for your users and incorporate good design into your software – we call it design-led development.

You don’t have to be a designer to embrace design as part of your everyday work.

How? Check out our online learning course:  Software Design for Non-designers: How to make user experience a part of product quality.

https://mooc.house/courses/dfnd1-1/

This six-week course offers insights from thought leaders including Scott Klemmer, Professor of Design at UCSD & Stanford, Sam Yen, Chief Design Officer at SAP, and other leading experts in the field of design-led software development. By watching their lectures, along with examples from business applications, you will understand how you can apply design successfully within the context of software development.

We’ll offer you a set of challenges to practice what you learned each week. You will earn points towards a course completion certification.

Ready to start? Sign up at mooc.house and start learning on Novenber 3rd 2015. I look forward to seeing you in class!

Recently in order to resolve customer incidents, I need to study more details about DatePicker control. I share what I have learned in this blog.

What does DatePicker look like

There is a small window icon, by clicking it, you can choose any date from popped up calendar.

How to define DatePicker in xml view

<caui:DatePicker id="td"          value="{path: 'vm>/ToDate', type:'sap.ui.model.type.Date', formatOptions: { style: 'long'}}"          change="onToDateChanged"></caui:DatePicker>

- namespace for caui: xmlns:caui="sap.ca.ui"

- onToDateChanged is event handler defined in application ( consumer ). The event name is: "change".

Implementation of DatePicker.js

You can find source code via the path: sap/ca/ui/DatePicker.js.

By reading the source code, here are some keynotes:

1. The DatePicker is a composite control, which holds a calendar control internally. This could be known by line 38 ( reference this._oCalendar points to the internal calendar control ).

2. The DatePicker has sap.m.InputBase as its prototype ( line 34 ).

3. The DatePicker has two properties defined in metadata. To be exactly, there are three. The third is "Value" which comes from the prototype "sap.m.InputBase".

properties: {            "firstDayOffset": {                type: "int",                group: "Data",                defaultValue: 0            },            "dateValue": {                type: "string",                group: "Misc",                defaultValue: null            }
} 

4. Whenever there is selection change in DatePicker, it will call fireChange and finally event "change" is issued. This is reason why you have to bind your event listener to "change" event in xml view. You can also find that two values ( newValue, newYyyymmdd) are passed to event listener as parameters. We will debug it later.

sap.ca.ui.DatePicker.prototype.fireChange = function(u) {    if (!this._dateType) {        this._setUpDateType();    }    var c = this.getValue();    var t = this._validateDate(c);    if (u || u === undefined) {        this.dateObj = t;    }    this.setDateValue(t);    var d = null ;    if (t) {        d = this._toDateStringYYYYMMDD(t);    }    this.fireEvent("change", {        newValue: c,        newYyyymmdd: d,        invalidValue: t ? false : true    });    return this;
}

Implementation of Calendar.js

Do Element inspection via Chrome development tool, for example inspect the ui area for Oct-16, you can find the area actually consists of a span node with value 16 and another hiddent input with content "Fri Oct 16 2015".

Scroll down and you can find more divs which represent the corresponding date in UI.

When and where are these divs generated?

1. In the init function of DatePicker, it fetches the prefix for each day which is used to render the content of hidden input element as introduced before.

The same logic for month abbreviation name:

2. When you click the small icon of DatePicker, the calendar is to be rendered. Thus the render function of CalendarRender.js is called. Here below is the logic to populate span node and hidden input node.

event design in Calendar.js

Source code of Calendar.js could be found here. There is event tapOnDate defined in its metadata, with one parameter "date".

Event delegation in the runtime

1. When a given date is selected by end user, a jQuery event is issued:

The below screenshot indicates that I have selected "Oct-15".

The private function _gestureSelect of Calendar.js is called:

Inside this function, the selected date is returned:

And then raise the UI5 event "TapOnDate" with selected date:

2. The event handler defined during the creation of internal Calendar control is called now. The passed in raw date "Thu Oct 15 2015" is formatted to "Oct 15 2015", and then assigned to property "DateValue".

Do you still remember another property "Value"? It will be filld by line 48: this.setProperty("value", t):

Its value comes from the format result of date object:

after line 20 is executed, the formatted date is "October 15, 2015":

So which exactly line of code triggers the change of the DatePicker control display, from previous date to the selected date?

For example, I have selected Oct-15 in UI, and after line 2732 below is executed, the field of DatePicker in UI will refresh correspondingly to October 15, 2015.

Internally, it is because setValue of DatePicker is called:

The call is further delegated to prototype sap.m.InputBase:

Here the Dom value is changed, so UI is refreshed accordingly.

Then DatePicker.js again raises its change event to application ( consumer ) with the two parameters:

3. Then the event handler defined in application xml view is called:

When does the formatOptions set in XML view take effect?

In xml view, we have defined style long for DatePicker's formatOptions.

In the runtime, this binding information is represented by an instance of PropertyBinding. The path, type and formatOptions configured in xml view become corresponding attributes of the instance as displayed below.

The date object "Thu Oct 15 2015 00:00:00 GMT+0800 (China Standard)" is converted to String "October 15, 2015" by line 20, which is the final content you see in UI.

This blog contains my research about the date format determination for DatePicker control.

Suppose I have select a new date ( 2015-10-15 ) from DatePicker control, my aim is to figure out the logic how the line 192 has translated dateTapped, "Thu Oct 15 2015" to tempString, "15.10 2015".

aFormatArray

When I debug into this method, I find an array this.aFormatArray.

It contains the date format placeholder as below: "day.month.year". This is the reason why I get 15.10.2015 as conversion result.

So the question now is, when, where and how is this.aFormatArray populated?

Do a text search and I find out it is determined by variable this.oFormatOptions.pattern.

In my laptop it has value "dd.MM.yyyy". Where does this pattern come from?

this.oFormatOptions.pattern

Through debugging we can know the pattern is determined by these three factors:

The pattern is stored in this.mCustomData in LocaleData.js:

this.mCustomData

And this.mCustomData is filled in LocalData.js ' constructor function:

getCustomLocaleData function just simply returns mSettings in Configuration.js:

mSettings

Now I will look into when the data in this.mSettings will be populated. I find an array M_ABAP_DATE_FORMAT_PATTERN which contains lots of date format options. For my current testing, the format option with key sFormatId = 1 is chosen. Why "1"?

This "1" is configured in my user settings for corresponding ABAP backend system and retrieved via an OData request:

Now we are ready to go back for checking how is aFormatArray filled by the Date Format DD.MM.YYYY.

The logic is, to simply replace each character in this.oFormatOptions.pattern with corresponding hard code value in DateFormat.prototype.oStates:

This article is focus on Fiori for SAP Business Suite.

Before we go into detail, there is one major thing you should consider which is: Only transaction and Principal Apps can run on Non HANA Database. There
are many others Fiori Apps (Fact sheets, Contextual navigations and analytics) are available only for SAP Business Suite with HANA database.

©2015, SAP SE or and SAP Affiliate company, All rights reserved

There are some unclear surrounding installation of Fiori based on your current landscape as well as doing selection in SOLMAN.

One of the items is decision about Embedded or Hub installation of NW Gateway and Fiori Front-end (UI) Server for Fiori landscape.

©2015, SAP SE or and SAP Affiliate company, All rights reserved

If you are updating your ECC to EHP7/EHP6 and you don’t want to centralize the Fiori UI server for Business Suite (ERP, CRM and SCM) just go ahead with embedded solution. A lot easier implementation, saving time but with loss flexibility to update Fiori UI Support packages alone. Anyway you can’t just update your Fiori UI without considering patching your backend too. So in the end Hub implementation only effective for ECC below EHP6 and centralize Fiori UI.

©2015, SAP SE or and SAP Affiliate company, All rights reserved

The next unclear is to choose the correct Fiori applications based on your current infrastructure.

Basically, there are separation between Fiori applications software components for SAP Business Suite 7 Innovations 2013 and others. But the names
of the Fiori Products are the same for example SAP Fiori for SAP ERP 1.0 are the product name but have different software components based on your SAP
versions.

SAP components which categorized as SAP Business Suite 7 Innovations  2013 are:

And the differences as follow:

Hope this can give you some ideas to which Fiori software components you should choose for your environment.

In SAP help, the determination of language code / locale is explained.

For example, when I access CRM application "My Appointment" with English language specified in url:

Https://<host>:<port>/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html?sap-client=001&sap-language=EN#Appointment-myAppointments&/newappointment/20151014/ZXXX/true

The DatePicker looks like below:

When I try with Chinese:

Https://<host>:<port>/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html?sap-client=001&sap-language=ZH#Appointment-myAppointments&/newappointment/20151014/ZXXX/true

What I woud like to know is how is "2015年10月15日" displayed.

Based on previous research on DatePicker, this task should be a little bit easier:

- DateFormat in DatePicker control

- More details of DatePicker

1. The place holders for Date display ( 年 - year, 月 - month, 日 - day ) for Chinese are stored in this.aFormatArray in DateFormat.js file.

2. this.aFormatArray is determined by this.oFormatOptions.pattern. For language = ZH, the patter is "y年M月d日".

3. In Chrome network tab, we can observe a http request for file zh_CN.son.

The callstack which triggers this file request:

If we inspect the content of this file, we can find the "y年M月d日" in attribute dateFormat-medium and dateFormat-long:

The content of this file is parsed and merged into this.mData, which will be used to populate aFormatArray mentioned above.

The complete url for zh_CN.json:

https://<host>:<port>/sap/bc/ui5_ui5/ui2/ushell/resources/sap/ui/core/cldr/zh_CN.json

SAP Fiori for SAP ERP HCM 1.0  SPS03 is available now. Help documentation can be found here.

Package consists of 12 Fiori applications inclusive of the new apps My Time Events (Simplified ESS Clock-In/Out Solution),My Services and Team Services which were released with SP02.

What's new?

My Leave Request supports additional fields and Multiple approvers.

Additional Notes details to be implemented on SP03:

My Leave Request V2

OData:

2217678 - HCM Fiori My Leave Request V2 : Data Dictionary: Additional Fields & Multiple Approvers.

2193429 *- HCM Fiori My Leave Request V2(OData): Additional Fields and Multiple Approvers (Part 1)

2210913 - HCM Fiori My Leave Request V2(OData): Additional Fields and Multiple Approvers (Part 2)

2221492 My Leave Requests V2 (ODATA) Quota Information Display

2229648 My Leave Requests V2 BADI for Work Schedule

UI:

2229178 My Leave Requests V2 (UI) Quota Information Display

My Timesheet V2

OData

2209905 - My Timesheet V2(ODATA): Corrections on top of SP02 & SP03

2223505 - My Timesheet V2(ODATA): Consolidated fixes

2223506 - My Timesheet V2(ODATA): UDO report for note 2223505

UI:

2222962 - My Timesheet V2(UI): Consolidated fixes

My Paystubs V2

2210870 - My Paystubs V2 (ODATA) : Payresults not loading when CE is ON

2216613 - My Paystubs V2 (UI): Extension hook to hide back button

My Team Calendar

2210323 - My Team Calendar (oData) Consolidated Fixes

2208330 - My Team Calendar SP03 - Consolidated UI Fixes

Employee lookup

OData/Backend

2217129 - Employee Lookup(OData): Fixes for search.

2216302 - Employee Lookup: Error message added for invalid search input

UI:

2211283 - Employee Lookup(LaunchPad): Fixes on top of SP03

2210525 - Employee Lookup(Launchpad):Consolidated fixes on top of SP02 [released after SP03]

Other apps don't have any additional notes as of now.

Note:

* while installing 2193429note you may get syntax errors for activating data object "IS_REQUEST", "LS_CUSTOMIZING", "LS_LEAVE_REQUEST" like shown below:

Action to be taken: Activate anyway, since this is because of DDIC changes. once you apply notes 2193429 and 2210913 you will not have any errors.

SAP IT Experiences with Integrated End User Feedback

Business User driven Process and Solution Development

Purpose of Business Software

Being an IT professional, have you ever sat back and wondered "What is the purpose of business software?".

At a high level, the purpose of business software is to support business processes. This seems almost too simple an answer but if you peel back the layers of business processes you unveil vast amounts of data. Having the ability to integrate and analyze all the data allows companies a bird's eye view into their organization, thus providing the tools for a comprehensive overview and forecasts on future questions and predictions.

Another answer comes from Helen Arnold, SAP Chief Information and Chief Process Officer, who is responsible for SAP IT Operations. She said in an interview broadcast titled "Two Sides of the Same Coin" on SAP TV that the "I" in CIO for her stands for innovation. Helen gives an example with the "Digital Agenda" that comes along with a complete new set of digital processes, but also classical processes that need to be adapted or changed to be able to deliver new business models. For our SAP IT colleagues, this means to see what is required to enable these business processes and how they can be translated into solutions that SAP is internally enabling and operating.

The Business User driven Part

For companies focused on developing business software solutions it is imperative to keep business users in mind. Why? Because they are the ones considered business experts; they are the ones who will be conducting the 'proof of concepts'; they are the ones who will be interacting with the software on a daily basis. Therefore, it naturally becomes a best practice at any company, SAP and our customers included, to include business experts and key or power users very early in the conception and development of IT business solutions.

In the On Premise world, shortly after releasing business solutions, there is normally still time and budget to react on end user feedback. After a certain amount of time the business solution is viewed as established and the budget is moved to other projects.

Those business solutions have been mainly targeted power users. The casual users or - to take a term from one of our customers - the "one minute" users sometimes became exasperated with these kinds of solutions enabling huge possibilities to work with applications but preventing a quick and simple performance of one small task. Additionally, the "one minute" users weren't given a voice to address exasperation.

Now that we have the cloud deployment model in place, cloud environments with short release cycles offer fast and immediate reaction on end user feedback. With this deployment option all end user roles are given simple opportunity to provide feedback based on their needs and how they use the software.

SAP Runs SAP: Integrated End User Feedback lived within SAP IT Organization

SAP Fiori in SAP Operations

At SAP we are working hard to incorporate the feedback of all our business users. In my recent SCN blog The Rising Power of End User Feedback I discussed the "Integrated End User Feedback" project and how SAP is enabling the SAP Fiori launchpad with an End User Feedback option.

At an SAP All Hands Meeting, Helen Arnold officially announced our internal implementation of the SAP Fiori launchpad (the link of course only works for SAP internal colleagues as this is our operational SAP Fiori launchpad) and you'll notice it is End User Feedback enabled :-).

The End User Feedback is sent to the SAP HANA Cloud Feedback Service where the IT colleagues can download the feedback for their apps, then review and act upon it. An Analytical Dashboard to evaluate the End User Feedback is currently developed.

A personal testament: recently, I had to approve an invoice. Via a link I could reach the "Approve Invoice" app within our SAP Fiori launchpad. The app was much simpler and provided a better overview than the application I was used to using before. Being really happy with my approval experience, I used the "Give Feedback" button to express my appreciation to the SAP IT colleagues.

Meanwhile, driving "Integrated End User Feedback" in SAP development for a while and talking to customers and SAP IT folks, I learned that their job is mostly a hard one. Everybody expects software solutions to work smoothly and nicely. And if this is the case people normally take it for granted. If there's a disruption everybody complains. And praise seldom finds its way to those colleagues. But this has changed now, too :-).

Experiences with SAP internal Integrated End User Feedback - Quotes from SAP IT

Julia Lakatos, Project Lead for the internal implementation of SAP's Fiori launchpad tells about her experiences with End User Feedback: "The End User Feedback is an essential part of an internal implementation. The HANA Cloud Platform (HCP) Feedback Service is part of SAP's Fiori Cloud Edition. Therefore, the implementation of the feedback option was simple and fast. We are currently transforming into a user-centric IT, hence, feedback from our colleagues regarding usability is needed in order to provide an easy way to consume business software for SAP employees. As a consequence, we are not only improving the user experience for SAP employees but also for all SAP customers around the world."

Steffen Weber, app owner for "SAP Sign Up", the new event registration list platform, says: "Receiving End User Feedback is crucial in order to improve the end user's experience and to align the tools to meet the user's needs. The capability to integrate "Give Feedback" into the SAP Fiori launchpad offers a very fast and smooth onboarding and furthermore a seamless user experience without any disruption. The HANA Cloud Feedback Service allows us very easily to collect, evaluate and react on feedback we receive from users in their daily work. Integrated End User Feedback helped us to improve our apps like "SAP Sign Up" in a way we wouldn't have been able to without it."

When Helen Arnold announced the SAP Fiori Launchpad the "Unified Ticketing App" was mentioned most prominently. Manuel Janitzek, IT Project Lead for the "Unified Ticketing App", indicates that feedback especially from ingenuous end users (the "one-minute user") is extremely helpful. He points out that IT - even when involving key users - has its own perspective. Certain things are just self-evident for IT folks that are not for the ingenuous users who have their own and different perspectives.

Some Numbers

Julia and Manuel gave me some numbers to share with you. In August 2015, the SAP operational Fiori launchpad had 173.871 visits and 39.984 visitors. With SAP having currently 75.000 employees worldwide this means that more than half of SAP's employees have already used the internal SAP Fiori launchpad. In August 2015, 58 feedbacks were received. This means 1 out of 700 visitors has given feedback in this month. The prominent "Unified Ticketing App" counted 13000 visits and 42 feedbacks!

Experience shows that opening up Integrated End User Feedback will not result in being flooded by feedbacks: if you are lucky 1 out of 100 users gives feedback and when you are unlucky only 1 out of 1000.

If I had to plan a campaign to gather project based End User Feedback I would do a rollout of the End User Feedback function to my targeted end users.

Some Examples - What kind of Feedback comes in?

Colleagues obviously understand quite well when to open an incident ticket and when to give feedback. So, the incidents we receive via "Give Feedback" are negligible. We get feedback on processes, questions, praise and critisism, suggestions and many feedbacks on User Interface, User Experience and navigation issues. - So, it's great to see that colleagues (and myself, too :-)) have a voice that is now heard :-).

What about opening up SAP End User Feedback in your Company?

SAP runs SAP and SAP's IT organization is one of our first "customers" to use Integrated End User Feedback. But we would also like to encourage you, our SAP customers, to open up Integrated End User Feedback for your SAP Fiori launchpad. As the "Customer Feedback Monitor" is a development project planned we would like to work with you directly to understand your requirements. If you open up the Integrated End User Feedback function now we provide you regularly with the feedback data for your own company. If interested, please get in touch with me via enduserfeedback@sap.com.

If you're hesitant, you can start small, e. g. with a test system.

Let me close this blog with the following summary ... Acting upon end user feedback on a daily basis is like becoming a gardener for continuous improvement. My wish is that we all become gardeners :-). - Thanks to Helen, Julia, Steffen and Manuel for your "Food for Thought".

Links

SCN Blog by Anja Modler-Spreitzer The Rising Power of End User Feedback

Video: Integrated End User Feedback for SAP Products - The Concept: https://www.youtube.com/watch?v=7EXcafjc2mY

Video: Integrated End User Feedback for SAP Products - Demo and Process: https://www.youtube.com/watch?v=WJlN8YHiWt0

Video: Integrated End User Feedback for SAP Products - Activation and Deactivation: https://www.youtube.com/watch?v=kZabBFBl30s

SCN Blog by Adi Avaler UI vs. UX: What a Difference a Letter Makes

SCN Blog by Jürgen Jakowski  Why users might think their SAP user interface is crumby

We are excited to announce the availability of SAP Fiori, cloud edition for productive use as part of a controlled availability program.

SAP Fiori, cloud edition renews your SAP Business Suite experience by deploying the new Fiori UI layer on the SAP HANA cloud Platform (HCP), connected to your on-premise systems. It allows customers to extend and develop Fiori apps, brand the solution, and provide end users a single, personalized entry point via the Fiori launchpad - all provided to you as-a-service, for productive use.

SAP Fiori, cloud edition offers a limited number of apps across Line of Business while covering the most frequently and commonly used use-cases.

Additional Fiori apps running on HCP are planned to be available in the future, according to customers' demand. If you have a strong use case, and would like request additional Fiori apps to run on the cloud, please submit your request in the SAP Fiori, Cloud Edition IdeaPlace page.

To experience SAP Fiori in the cloud, you can already today create your own SAP Fiori demo cloud account (for non-productive use, limited for 90 days).

This is a major step in simplifying the SAP User Experience in the cloud, following the Fiori UX. Currently, the product is in a controlled availability phase, and we plan the General Availability of the product for Q1 2016 (this is the current planning, with all the regular legal disclaimers... ). Two major enhancements that we are already working on and are expected to be delivered early next year are the availability of HCI OData Provisioning for SAP Fiori cloud edition and the availability of additional Fiori apps running in the cloud (... disclaimer...).

Ok, so how can I join the controlled availability program of Fiori cloud edition?

To join the control availability program, please submit your nomination in the following link. We will review your nomination and get back to you at the soonest. Comment below if you have any question.

.

I was once confused about why I could see "Contact Support" button in error popup window in some system but in some other system it is gone. See the following two groups of screenshot for example:

                Group one: no "Contact Support" button

                     Group two: "Contact Support" button available

This blogs contains my debugging detail to figure out what controls the availability of this button.

When Fiori launchpad is opened there is one http request below which asks for a series of configuration information from backend. Among them there is Contact Support enablement setting.

https://<host>:<port>/sap/bc/ui2/start_up?sap-language=EN&sap-client=001&shellType=FLP&depth=0

The visibility of this button is controlled in the backend. You can create your own BAdI implementation on enhancement spot /UI2/BADI_EMB_SUPP to use your own logic to determine the button display. More detail about this enhancement spot could be found in note 2111116 - Enable own support-message-system for Fiori Embedded Support. You can refer to below screenshot about how the BAdI implementation is called in the runtime.

Then you could observe the response in Chrome. The corresponding field is "isEmbReportingActive".

Search the source code by specifying it as keyword, then I find the place of code where this flag is evaluated:

In line 2801, the json response is parsed by framework:

Here I find what I am looking for. The "Contact Support" button is enabled only both of the two prerequisites are fulfilled:

1. the enabled field of sap-ushell-config.services.SupportTicket.config should NOT be false. It is ok to have it as undefined, as example below.

2. The value of isEmbReportingActive returned by mentioned BAdI implementation must be true.

Hi All,

These are list of transactions which i found very useful for Fiori Development, Sharing with all, Please add more if i have missed some.

It's TechEd season and as usual that means exciting announcements and innovations from SAP 

It brings me great joy to share with you the new features for SAP Fiori, Cloud Edition. First and foremost, the extended demo offering has been extended from 30 days to 90 days! We received feedback from our customers (YOU) that 30 days was not enough time to fully experience and prototype Fiori in the Cloud. We heard you and based on your feedback that 90 days was acceptable, we made it happen. You will notice a helpful status bar in your extended demo account that tells you how many of the 90 days you have left. Check out this blog for tips on how to preserve your work.

Let's dig into the new technology since I know we're all techies here and that's really the fun stuff we're after! We've been waiting and waiting (myself included) for the 'Connect to your back end system - coming soon' to arrive, well here ye here ye it is here! (insert applause and cheers of excitement). If you're attending TechEd and have session UX260 on your agenda then you're going to get to experience this in the hands on section. For those of you who can't attend, there is always the virtual hands on that you can access here, available from October 26, 2015 - September 2016. If neither of those options work for you or you're eager to learn more now then keep reading! In collaboration with the SAP Fiori, Cloud Edition Product Management team, I have put together a series of videos for you to view at your leisure. There are 6 videos total - with each focusing on a specific piece of the SAP Fiori, Cloud Edition end to end story.

We tell this story by focusing on the various business roles/key players to provide you the whole picture. The first video shows you how to sign up and log into your SAP Fiori, cloud edition account. It also shows the difference between the demo/extended demo and some of the new features/functionality we've added since May 2015.  

The second video focuses on the end user experience and what value, features and flexibility your end business users can expect to gain from using SAP Fiori, Cloud Edition.

The third video takes you through the admin role and shows you how to create content packages, categories, groups and more.

The fourth video is all about the developer and shows you how to extend the My Leave Requests app.

The fifth video continues the developer role and shows you how to connect your SAP Fiori, Cloud Edition extended demo account to the SAP HANA Cloud Connector and then how to develop a new app from a template in SAP Web IDE.

In the sixth and final video you will go through the designer role and be shown how to create beautiful themes using SAP UI Theme Designer.

Now that we have the end to end story in place I hope you have fun leveraging these videos and the other useful links in SCN to start prototyping the SAP Fiori Story for your company. Choose the app(s) of interest to your business, gather business requirements, adapt/customize the Fiori apps to work for you, theme with your company specific branding requirements and connect to your back end system - the end result is seeing SAP Fiori working for your business and running your data!

Please follow the below steps to change the calendar color legends in SAP Fiori application “My Leave Request”

I have used SAP Provided UI Theme designer for the same.

1. Run your application in the browser (I have used chrome for this) to find out the CSS classes used to provide the colors to the legend set.
2. Suppose we want to change the color of public holiday and non-workday color legends to some other desired colors. We need to find out the classes for the same using the developer tools in the browser.

         Press F12 in chrome to open the developer tool

3.  Click on the magnifying glass as shown in the image above and then navigate in the web page to the element which you want to inspect. (IN this case any date which is having color legend for public holiday )

   4.  In Parallel, you will get the corresponding source code in the html code of the page in developer tool as shown below.

The highlighted css element which provides the background color is shown in the right hand side.

Copy this full class name parameter. It will be used in theme designer.

.sapMeCalendarApproval > .sapMeCalendarMonth > div.sapMeCalendarMonthDays > .sapMeCalendarMonthDay.sapMeCalendarType06

Similarly find the corresponding css element for the reference legend color below the calendar. For example, using public holiday as reference, following class parameter is found.

CSS parameter for same is

.sapMeCalendarLegendApproval .sapUIMeLegendColorForType06

5. Now we need to change the background color property of these parameters using the theme designer. Open the theme designer and select the leave request application after selecting blue crystal theme as the base theme or the custom theme if you are already using the custom theme.

6.  Select the last option to make the change in the theme (CSS option as highlighted above). In this option write the code for changing the background color for the above found CSS classes as shown below

7. Click on apply and you will see the colors changed for the respective color legend.

8.  After this save and build the theme from menu as shown below

9.  Then go to the tcode /UI5/THEME_TOOL in the server. Invalidate the cache first.

10. Click on info for your theme and find out the sap-theme url for your Fiori application to use.

11. Use it as the url parameter till /~client-005/.

12. So end result will look like this. (I have change the color of non-workday also in a same manner)

Thanks and Regards,

Sarbjeet Singh

This blogs introduces the tips how to find the location of source code where the popup dialog is raised.

There are two kinds of popup dialogs in Fiori ui.

Type one: Model Dialog based on IFrame

For example, if I click the glass icon, and then there is one dialog popped up. I need to know which line of code has raised this popup dialog and why.

Solution

Set the breakpoint on the function createIFrameDialog below. You can find Shell.view.js via the path below.

And then click the icon again, breakpoint is triggered.

From the callstack I can understand the usage of this dialog is for XHR logon, since it is necessary to also retrieve remote catalog information from another system, Q7D:

Type two: Message dialog

You can see one example below.

And now your requirement is to find out which line of code has raised it.

Solution

1. Search keyword sap.ca.ui.dialog.factory in Chrome development tool. Click the file factory-dbg.js:

Set the breakpoint on function _openDialog.

2. Repeat the operation to trigger the breakpoint. When breakpoint is triggered, check the inner callstack and then we can know the error dialog is poped up because of the failure metadata load in function checkModelMetaData:

As a Fiori developer it is essential to not only learn how to use a given Fiori control provided by UI5 control library, but also understand how the control orchestrates with UI5 runtime under the hood, which makes us more calm when we deal with control issues.  In this blog I just use the button control ( sap.ui.commons.Button ) as example to demonstrate my self-study approach. If you have better one, please kindly share with us.

My favorite study approach is, as always, debugging. The first task is to identify what needs to be debugged. If you choose a complex Fiori application with a tons of control and the button is just one among them, you can easily get lost during the debugging. My preferred style is to create a most simple Fiori application containing exactly the only button control.

Step1 - create a sample application with only one button control

You can find the source code how to create a button and register press event handling from this link .

I just embedded the code into an html page so the final page for debugging is listed below:

Step2 - Find out what needs to look into: Button-dbg.js & ButtonRenderer-dbg.js

Run this simple application in your webserver and you see Button as expected. In development tool, Sources tab, you see lots of js and css files are loaded by framework automatically. To be exact, they are loaded by sap-ui-core-dbg.js if you switched on debugger mode.

Back to our aim, we need to look into the two files related to button control: Button-dbg.js and ButtonRenderer-dbg.js.

Switch to Network tab, the download of these two fields are triggered by line 11 in our own html and then the call is delegated to UI5 framework code.

Set a breakpoint in line 11 and re-launch the application. Breakpoint is triggered.

Step3 - figure out the logic of Modules in UI5

Click F11 to step into:

From the code below we can understand the UI5 framework uses a lazy load working style: the corresponding js file for a given control is never initially loaded until the control is really used in the code ( or explicitly required by "jQuery.sap.require("XXXX")" ).

Step into line 26384 again:

Step into line 16992 again:

After the corresponding js file for a required control is loaded, it will be executed and the output is a js object, we call it a "module". All modules are centrally maintained in the array mModules as listed below. Each module has a state field with possible status INITIAL, LOADED, READY, FAILED, PRELOADED. In my example, since the button control is required for the first time, so the module has status INITIAL.

- Line 16514: mark module state as LOADING

- Line 16517: determine whether we need to load the normal version of js, or the debug version. The flag for debug mode is stored via the field sap-ui-loaddbg in global object window.

- Line 16520: get url of module converted from module name

- Line 16525 use AJAX to load the module

This is an synchronous AJAX call ( async = false ). In its success handler, the module state is changed to LOADED, according with the module data filled. Now the execModule is called in line 16543.

The source code of Button.js is passed in to the native function, eval(), of window object.

After requireModule is executed, button module is ready for use ( state = 4 - READY ).

Step4 - how the button instance is created

Basically speaking the button instance is first created via factory method newObject as a template and then enriched with the user settings passed via arguments object.

Check the source code of Button.js, we can find one line:

var Button = Control.extend("sap.ui.commons.Button", .... );

It unveils the fact that the Button is an extension of Control, or let's borrow the OO concept, it "inherits" from Control class.

Also Control is an extension of Element:

And Element is an extension of ManagedObject:

And ManagedObject is an extension of EventProvider:

And EventProvider is an extension of BaseObject:

The root of this long prototype chain is Metadata.

As a result the constructor of each node in the prototype chain will be called, one nested by one, when the leaf node in the chain, Button, is initialized.

The inheritance relationship from chain root to leaf is:

BaseObject -> EventProvider -> ManagedObject -> Element -> Control.

Just compare the classic OO language like JAVA and C++, the mechanism here is logically the same. For the Button itself, it gains most of common features which other controls have as well, with the help of this prototype chain. Then the Button control only needs to implement its specific features which are different with other controls ( for example, to deal with mouse and keyboard event ).

In next part we will analyze how a button is rendered in Fiori UI.

In previous part, the following topics are discussed:

1. The module concept in UI5
2. When, where and how the button module is loaded by UI5
3. How a button instance is initialized in the runtime

In this part, I will explain how a button is rendered in Fiori UI.

How is native html code for Button control generated

Use Chrome Development tool to inspect the displayed button in Fiori UI, you can find the native html source code for it.

In previous part, we identify another js file to look into, ButtonRenderer.js. Set the breakpoint on the render function, and it will be triggered and render the html native code you have found in Chrome development tool.

Below is a simple graph to demonstrate which line of js code in ButtonRenderer.js has generated which html code.

Button control and Button Renderer

Here is another question: How does UI5 framework know the ButtonRenderer.js is responsible to render the html native code of Button.js?

The metadata of Button does the trick here.

getRenderer function returns the responsible renderer name which points to ButtonRenderer.js:

And when is this this._sRendererName filled?

this.getName() returns the value stored in this._sClassName, "sap.ui.common.Button". So the final renderer name is CALCULATED by just appending the postfix "Renderer".

In the next blog, I will study the event handling of Button control: semantic event in Button control.

In previous part, it is explained how the native html code of Button control is generated by its renderer, ButtonRenderer.js.

"click" event VS "press" event

As we can find in Chrome network tab, the UI5 Button control is represented by native "button" tag. In this part, I will share how I study the event handling logic of this control.

In W3School, we are taught that the event for mouse click on button tag is "onclick". Quite clear, isn't it?

Go back to our simple application, you will surprisingly find that no event listener is registered on this button element.

Instead when you click the checkbox "Ancestors", this time, a event handler for click event, is found to register on its parent node, the div tag with id "content".

Also in our sample application, we don't register the handler function on "click" event. Instead we simply pass one object to the Button constructor, which contains one field "press" pointing to a function.

So when user clicks button in the browser, how can UI5 framework know the function we register to the "press" must be called to react on the native "click" event? What is the relationship between "press" and "click"?

The "press" event is defined as one part of metadata in Button.js.

Search the keyword "press" in this file, and one hit is Button.prototype.onclick. To verify whether it is this function which finishs the "translation" from "click" to "press", we set a breakpoint on it.

In the runtime, when the button is clicked, Button.onClick is called with one JQuery event object of type "click".  It is this onclick function being responsible to delegate the native click event to UI5 event "press".

"Press" event registration

How does this.firePress finally succeed to call the function "console.log('Alert from ' + oButton1.getText());" we defined in our sample application?

Debug into the firePress implementation, it simply queries the event handler for press event from a central array, "this.mEventRegistry".

In our simple application, we never do any explicit event registration, so when and where our event handling is filled into that central event repository array "this.mEventRegistry"?

Still remember the prototype chain described in part 1 ?

BaseObject -> EventProvider -> ManagedObject -> Element -> Control.

The mystery is in EventProvider's constructor:

In the first chapter of this blog, we find the event handler of the button tag's parent, the div tag. Click the hyperlink below:

Set the breakpoint there and click the button again. Through callstack you can understand how the mouse click event has been passed from parent div tag to the children button tag:

Summary

The "press" event in this blog is described  by SAPUI5 as "semantic events". Semantic events do not exist as native HTML browser events. The UI control implementation is responsible for mapping native browser events to semantic events. For more details please refer to SAP help: UI Control API: Event Handling.

In the next blog, I will study the metadata of the Button control.

In the second part of the self-study series, we figure out that the responsible Render name is stored in Button control's metadata:

In this part, we will concentrate on the Button metadata.

How can I get control data in the runtime

Since we already have the button control instance returned by new keyword, simply call its function getMetadata() and that's it.

You can find there are lots of useful information stored in the metadata. I will go through the most important fields one by one.

aAllPublicMethods

When you type "oButton1." in Console, you find lots of methods available in the list. Where do them come from? From the control metadata, stored in this array aAllPublicMethods.

From this array, we find there are totally 110 public methods. However if you check the source code Button.js, you can not find most of those methods defined there. The prototype chain works here again. Most of the methods are defined not in Button.js itself, but in the Button control's ancestor node in the prototype chain.

if you type the code below in console, you will get result: false.

oButton1.hasOwnProperty("getText");

The public methods of a given control is an union of its own public methods defined in its JS file and the public methods belonging to all its ancestors in the prototype chain:

aPublicMethods

A subset of aAllPublicMethods, defined in the metadata.publicMethods area. See one example below for EventProvider:

In the runtime, they are parsed as below:

mAllAggregations

List all available Aggregation. One example is tooltip. It gives hint that the button tooltip is stored as an aggregation, and its value could be queried out via the sGetter: getTooltip:

That's the reason we type the following code in console and we can get the tooltip as expected.

mProperties

List all the properties together with their Getter and Setter. Keep in mind this is the metadata, so you can not expert that the text we specified in the JS code "Button" could be found here. The "mProperties" here just stores the metadata of properties, not the instance data.

oParent

Points to its ancestor's metadata.

There are two ways to get the total number of all public methods of Button control: 110.

approach1: its direct parent's all public methods + its public method.

For button control, it is 75 + 35 = 110.

approach2: accumulate public methods number of each node in the prototype chain.

Keep in mind this prototype chain as always:

BaseObject -> EventProvider -> ManagedObject -> Element -> Control

In the next blog, I will study the instance data of Button control. I will use the setText and getText as example for research.

In the previous blog, I have studied the metadata of Button control. In this blog, I will study the instance data of Button control.

I will use the public method we find in the Button control metadata, setText, as example to study how the instance data is stored and retrieved in the runtime.

I just add a new code to change the text of Button:

How does it work?

How does setXXX work

Set a breakpoint on line 19. In the previous blog, we have learned that all public methods which are not implemented by the control itself, but inherited from its ancestor in the prototype chain, are implemented in a generic way, as demonstrated in the example below - simply delegated to setProperty function.

Property change validation

In order to set a new property, the following two validations must be done:

1. get old property value from central property repository, this.mProperties. DON NOT mix this repository with the one in the metadata we discuss in the previous blog, as the two "this" points to different object, one to control instance itself and the other one to metadata instance. In line 29693, if the old value and new value to be set are equal, just return this to support chain operation.

2. there is a validation done in line 29691, to ensure the new value is a valid property for Text.

From metadata definition we know the data type for property "text" is "string".

A validator is returned based on the property type and its function normalize is called for validation.

Then in line 29705, the new value "Jerry" will overwrite the old value stored in central property repository, this is the whole process how a property is changed so far.

The line 29711 contains the step of model property change which will be discussed in next blog.

In line 29715, a change event "_change" is also raised.

If you would like to catch this "private" marked starting with "_" in your application, you can add pieces of code as below:

oButton1.attachEvent("_change",  function(oEvent) {   var oChangeDetail = oEvent.getParameters();   debugger;  });
oButton1.setText("Jerry");

Thus whenever there is property change, your event listener will be called with change detail.

How does getXXX work

Still remember the ButtonRender.js we learned in the second part of these series of blogs?

Search the keyword "getText" and set breakpoint. It is triggered in the runtime since the Renderer needs to know the text of Button so that it can render it in Fiori UI.

Again the getXXX is implemented generically just the same as setXXX.