• Part1 - Currency example - how Smart field works
• Part2 - Smart field with value help
• Part3 - this blog

The hyperlink could easily be defined by Smart field with the help of corresponding annotation declared in OData Model metadata.

The hyperlink in this example looks like below in UI:

Once clicked, it will display an additional popup contained more information which is defined in the application code:

All the source code of this sample project could be found from this link.

Project resource overview

1. the label of Hyperlink field is defined in metadata via annotation "sap:label"

2. the hyperlink field itself is defined in XML view. Its value is bound to field Name in OData Model.

<form:content>   <smartField:SmartLabel labelFor="idName" />   <smartField:SmartField value="{Name}" id="idName" editable="false" />  </form:content>

3. in OData model, the field Name has maintained annotation "com.sap.vocabularies.Common.v1.SemanticObject" so in runtime UI5 framework will render it as a SmartLink.

4. Once pressed, UI5 framework will raise a popup which contains additional three links which are available to click. The navigation target is defined by application as below.

How link related annotation is parsed and SmartLink instance is created

As discussed in previous two blogs, UI5 framework will try to scan all potential annotations in OData model metadata,

Since now semantic annotation is available, in line 55 there is a central _getCreator which will return the dedicated function name for control creation.

In our example, the function name is _createEdmSemantic because of the availability of semantic annotation:

Within this _createEdmSemantic, a new instance of SmartLink is created.

In its constructor, the Press event handler is registered and hyperlink CSS class is added.

How is the popup dialog rendered when hyperlink is pressed

In event handler _linkPressed, semantic Attributes are calculated and returned:

_linkPressed calls fOpen() for Popup creation and display logic:

As the first step, in fOpen() a new popup dialog is created via _createPopover().

The popup dialog is implemented by NavigationPopover. When the links within this popup dialog are clicked, _onInnerNavigate will be called.

In order to render the hyperlinks within the popup dialog, UI5 framework must know the navigation target url. This information is provided by application and retrieved by UI5 framework asynchronously:

The navigation target information from application is passed into UI5 framework callback and LinkData instance is created based on each of them, then added to popup dialog instance.

After that you could observe that the three navigation information are maintained in the popup diaglog instance's aggregation area:

Once all is done, TargetsObtained event is raised:

And the event handler for it will call show function of popup dialog, so you could see it in UI finally.

Part1 - Currency example - how Smart field works

Part2 - Smart field with value help

Part3 - Smart Field with Smart Link

Part4 - this blog

The appearance of smart table rendered looks like below:

The source code of this example could be found from this link .

How table related annotation is parsed and table columns are rendered

Unlike the previous three examples, the control instance of SmartTable now is not created dynamically by ODataControlFactory, but statically declared in xml view and created then by XMLTemplateProcessor after xml view is loaded and parsed:

When OData metadata is retrieved asynchronously, the event handler for this Metadata ready event belonging to the SmartTable instance created in previous above is called to create Table provider:

In this context, most of the properties come from the definition in XML view:

All the input parameters for table provider creation are listed below:

In function _intialiseMetadata, the five fields of entityType Product is parsed:

Pay attention that these fives fields are not final table columns rendered.

Instead, only those fields defined under annotation "com.sap.vocabularies.UI.v1.LineItem" would be rendered as table columns:

Then in _reBindTable function, we have already learned in Smart field with value helpthat this function will send an OData request to ask for table content:

Once executed, you could observe the response returned by Mock server from console and the table is now filled with data from Products.json.

How "currency" filter works

Since currency code is marked as filterable = true in metadata.xml,

<Property Name="CurrencyCode" Type="Edm.String" MaxLength="3"     sap:label="Currency" sap:semantics="currency-code" sap:filterable="true" />

so we could switch it on in "More Filters":

Suppose we would like to filter by currency code = EUR.

Once we select the checkbox and click OK button:

Another OData request will be sent by FilterBar from sap.ui.comp.FilterBar:

The filter condition is defined in aFilters:

Again you could observe this filter request' url and response in console tab:

Hello All,

I have cleared the “C_SAPXIMP_20 -- SAP Certified Technology Associate - SAP Fiori Implementation and Configuration (Wave V)”.examination this week(in fact on 16th March 2016).

Through this blog, I would like to take you all through the experience I had and would like to share some information pertaining to the specific certification.

Those who have limited knowledge on this certification, please go through the following link:

https://training.sap.com/shop/certification/c_sapximp_20-sap-certified-technology-associate---sap-fiori-implementation-and-configuration-wave-v-g/

• It’s an Associate Level Exam.
• Exam Code: C_SAPXIMP_20
• Certificate awarded: SAP Certified Technology Associate - SAP Fiori Implementation and Configuration (Wave V)
• Topics: Fiori Administration, Implementation and Configuration.

I have been working in Fiori for more than a year now and that was the main motive of taking this exam.The only drawback what I would say is that this exam is on wave 5. We have the waves 10-11 in corner and there are lot of changes that had happened over the different waves and you might be working on versions >5. But when you prepare for the exam, you will to prepare, considering wave 5 in mind.

Topic Areas:

Test Day:

   Mandatory Documents required to enter the test center are:

1.   Government photo identification card (Passport / Pan Card / Driving License / Voter ID – All are options in India.)

2.   ID card issued by the training center/Company Identification card (Direct certification participants)

There will be a Proctor (invigilator from SAP), who will provide the instructions. If you face any issues with the system on which you take the online test (like question and answers screen is not appearing), don’t panic. Proctor and/or some IT Infrastructure person would be there for your help.

To be frank, I was very much tensed, some thoughts were haunting me

• Will I Pass? Yes, No, May be.
• What will happen if I fail?
• What will I tell to my Manager and Colleagues, if I fail.

Now something about that exam:

• Exam contains 80 questions and total time is 180 minutes. I would say 3 hours is very much needed for this certification.

Questions can be divided into 3 parts:

1) Multiple choice questions, where there is only one answer (Radio Button type)

2) Multiple choice questions, where there are more 1 answer (Check box type) (You will find the number of correct answers beside the question like 2, 3 etc.) à Carefully check the number of correct answers for such questions and don’t forget to mark all those correct answers)

3) A new type of question like below: (only one question like this).

A screenshot was given and we were asked a question quite related to one of the topic in that screen shot.

Some useful points:

• Each correct answer carries 1 point and wrong answer carries 0 points. If you have questions which have more than 1 correct answer you will have to include all the correct answers for that question. Remember there are no partial points.
• From the first question onwards, you will have a NEXT question button with which you can start sailing to the next questions.
• From the second question onwards, you will have a PREVIOUS question button, where you can go back to the previous questions and correct if necessary.
• One more button is available called ASSIST is also available. When you click assist button, it will show a block in the right side with 80 squares indicating each question number in each squares. The question which you are answering will be a white background and the one answered will be in green background.
• Also, there is a flagging option that is available for each question. If you are not sure whether your answer is right, you can flag that question, and that will notify you that you need to attend that question again.
• In-case if any technical problems happens in between your test, don’t panic. There will be some network person who will help you to retain the session and whatever answers that you have marked till that time will be safe. You can continue from where you have stopped.
• You will have a time notification in the right top corner. Keep an eye on that always.

   Some personal tips from my side: (Depends on Individuals anyway)

• Instead of using the assist button and flag option, use a piece of paper (ask Proctor to give one) and mark 1-80 numbers in that. Start answering from the first question and Strike off the numbers in the paper, which you have answered with 100% confidence.
• Initially try not to spend more time on individual questions, instead quickly keep answering the questions that you confident enough, from the available 80.
• Once you have done with the first round, check the numbers in the paper that you have not striked off, go back to that again, read it more carefully and continue the same process a couple of times. Now you will have to take a judicious decision by answering the questions, which is less doubtful.
• If you continue with the above steps, after 2.5 hours, you will find very few questions yet to be answered, now dedicate the last 30 minutes exclusively for answering that questions.
• Also, as said before, some questions will have more than one correct answer. Ensure that you have marked all the correct answers. Don’t fully depend on the Green Background in the assist option as the background colour will become green even if you mark 1 answer for a question which is supposed to have 3 right answers.
• Read the question twice or thrice, there are lot of tricky questions, where you will be tempted to choose the wrong answers. Beware of such questions.
• Keep yourself calm and concentrate on the questions.

After 2 hours 55 minutes, a pop up will come indicating that you have just 5 minutes for completion.

I am sure there will be some questions which you are not aware of/ or not even heard of. Quickly answer those ones by marking the most appropriate one (that you feel), as there are no negative marking. Never leave any Questions unattended.

Test Completion:

It’s time now and you will have to submit your answers. You can use the SUBMIT button for this. Keep Proctor informed that you are going to submit.

NOTE: This SUBMIT button will be there from the first question itself. Ensure that you don’t click that by mistake in between the test. That will result in your termination from the test.

This is 2^nd most costly SUBMIT button in my life. First one was, during my HANA Certification in December 2013.

If you don’t submit even after 3 hours, session will automatically disconnect.

You will now see your result: Passedor Failed.

With God’s Grace, I passed my exam.

Please be informed that 59% or above will be considered as Pass and SAP certificate would reach to your address in 4-6 weeks and your exam pass percentage will not be mentioned in the SAP certificate.

You will also see the individual % of marks in each session and the overall total.

Fiori Configuration

Fiori Installation

Theme Designer

Fiori Launchpad Configuration

Fiori Security

Work Flows

UI Extensions

Fiori Architecture

ODATA Extension

HANA (Analytical Apps)

Data Flow

Fiori Security

Now how to prepare:

Following is the main material document, which you should go through before your exam.

SAPX03 – Part 1 (Fiori Implementation and Configuration Part 1-7) (367 Pages)

SAPX03 – Part 2 (Fiori Implementation and Configuration Part 8+) (308 pages

SAPX11 (Administration) (I have not seen this book)

Personal tips on the Type of Questions:

• Please go through the above documents once or twice. Around 20+ questions were direct ones for which you don’t have to think a lot while answering.
• In this exam, I have observed that lot of practical scenario type of questions were asked which you could answer only if you had real work experience on Fiori.
• Pay good attention to the COMPONENTS / VERSIONS. There were many (5+) questions on this topic.
• Carefully go through all the Diagrams (all markings) mentioned in the document.
• There were many questions on Theme Designer/custom themes.
• There were a couple of syntax questions from the UI5 Side.
• There were many tricky questions whose multiple choice answers provided were quite confusing.
• There were 2-3 scenario based (actual/real time) questions.
• There were a couple of questions on the Fact Sheets.
• Be very clear with the components inside the various system like Front end, Backend and so on. Also ensure that you have fair knowledge on what type of tasks each of these dedicated systems are supposed to perform in a given landscape.

Final Note:

Prepare seriously for your exam.
This is relatively a new exam module. So please don’t go behind brain dumps (you will not even get that, for sure).

Go through each and every page of the standard documents twice or thrice, get some real experience on Fiori and then attend the exam.

Do your part well and the rest God will take care.

Just think only one point: If many can pass the FIORI exam, WHY CAN’T I.  

All the best to those who are going to prepare for the exam!

Enjoy FIORI!  

Regards,

Prabhith

In this blog I'lI show how to prototype a value help or select dialog in SAP BUILD in 10 easy steps... with many thanks to Thomas Dubreuil for his guidance.

Like many of you I’ve been doing the open.sap.com Build Your Own Fiori 2016 course.  This year the course is using SAP BUILD to do the prototypes.  As a rule I like to do as many of these free courses and tutorial as I can fit in.  It’s all good practice.

In doing my own design prototype for the challenge I noticed the new Value Help option and "phoned a friend" (thanks Thomas Dubreuil!) to get some guidance in how to make it work.  I've created a simpler example prototype for this blog with 2 pages:

A first page where I show an Input "Currency" control with a value help, and a second page that shows the value help dialog that simulates selecting from a list of currencies.

Pre-requisites for this blog:

• You already have a login account to SAP BUILD and know how to access BUILD from SAP Splash.
• You already know how to create a BUILD prototype and Preview it.
• You already know how to use the Data Editor

Missing some of those?

If you need a login account, just go to the Splash homepage at SplashApp and press the Sign Up button in the top right hand corner to register.

If you not used BUILD before, and you are not sure what you can do with BUILD, there are helpful blogs available on SCN and on experience.sap.com. Here are a couple to get you going.

Its time to SPLASH your mind with SAP Build

Want to BUILD a better User Experience

BUILD - from the outside

Best of all BUILD comes with several Youtube videos explaining all the basics including how to use the Data Editor.  You'll be shown these when you login to BUILD or you can find them on the SAP Splash channel on Youtube.

Aims for the Prototype

The aim was to create something akin to the sap.m.Select dialog (images optional).

NOTE: I want the Select dialog not the Value Help dialog itself for a couple of reasons.  Firstly the Select dialog is responsive, while the Value Help dialog is not.  So the Select dialog is more useful as I often need to prototype for phone and tablet as well as desktop.  Secondly the Select dialog is simple enough for a prototype. The Value Help is just a bit too much especially if my users haven't used SAP screens before.

Now remember this is still just a prototype - not a full app.

So I do NOT expect to actually select anything.

I just simulate the process of showing a value help list and selecting a value.

Trying it out for Yourself

To test this out yourself this is the basic flow to follow.

Step 1: Create a project in BUILD

Nothing special here. Just a regular BUILD project will do.

Step 2: Add your Page

Start Prototyping and add a simple one page file.

It doesn’t matter too much what type of page. 

I’ve used a Responsive Page so I can check the behaviour with different form factors (desktop, tablet, phone).

Step 3: Add an Input control to your Page

Again nothing special here. 

In my example I've added 2 Input controls: one to show the Value Help and the other is just a plain Input control for comparison.

Step 4: Turn on Show Value Help on the Input Control

Turn on the option to show the Value Help icon for the Input Control.

Select the Input control.

In the right hand Properties pane, turn on the switch Show Value Help.

The Value Help icon will now show in the Input control.

Back in the properties pane, change the Interaction to Value Help Request, and the action to Show Dialog.

The Dialog Name property will appear.

Step 5: Create a Dialog page to hold the Value Help list

Using the drop down in Dialog select add Dialog. A new Dialog will be created.  If this is your first dialog it will be called Dialog 1.

Over in the Outline Pane you will see Dialog 1 added as a new Page of your prototype.

Now open the Dialog 1 page.

It’s not that exciting at this point. We need to add some content.

Step 6: Set up the Dialog Page

In the Properties pane, use the Children area to add a List control and a Button control to the Content part of the Dialog pane.

Adding a list will automatically add a bunch of fancy looking list items.  We want something a bit simpler for this.

So select the List control and delete all the Child Item controls from it.

Then add a single Standard List Item instead.

Clear the Info and Icon properties of the Standard List Item You should now have something that looks like this.

So now we have the screen set up much as we want it. But we need to put our list in there.

Step 7: Create the data to be displayed in the Value Help list

Go to the Data Editor and manually create a new object to hold your list, e.g. CurrencyList.

Add a single string property to it – e.g. CurrencyName – this will hold the text values that you show in your list.

Open the Samples editor and add in some values.

Press Ok to save your data.

P.S. You can also edit your list offline in Microsoft Excel and import it.

Now we need to assign our value help list to the List control in the Dialog.

Step 8: Assign the data to the Value Help list in the Dialog page

Open your Dialog pane and select the List control.

Go to the Properties pane and in the Children area look for the “bind” icon next to the Items.

Click on the bind icon and as we have only one object it will automatically bind it to the CurrencyList.

As an added bonus it automatically assigns the ID of your object to the Title and the new string property to the Info.

You can use these or change these as you wish.  You can even use the icon if you want to.

And you'll notice that your value help list now appears in the dialog.

Step 9: Initial Test of your Prototype Value Help

If you preview your prototype at this point you can use the Value Help icon on the Input control to show the list.

However you may notice that you there is no way provided to get back to Page 1 of your prototype.

So lastly we set up the actions to simulate closing the value help dialog.

Step 10: Simulating Selecting Value and Cancel

To be realistic we should have two ways of closing the dialog page… either:

1. The user backs out of the value help without selecting anything, or
2. The user selects a value from the value help list

Remember it’s only a prototype – not a real app – so we won’t actually be selecting anything.   Hint: You can always fill in the Input control with a set value to show what the selected value would look like on the main page.

Back in the Prototype Editor on our Dialog Page …

First set up a Cancel option to back out without selecting anything.

Find the Button control at the bottom of the Dialog pane. Change:

• the Text property to Cancel
• the Action to Close.

Next to simulate selecting a value.

Select the List control in the Dialog pane. Change:

• the Interaction to Selection Change and
• the Action to Close.

Final Test of your Prototype Value Help

Now preview your app.

Use the value help button on your input control to show the value help dialog and close the dialog by selecting a value or pressing the Cancel button.

Job done!

If you have a BUILD login account, you can see my example BUILD prototype in action.

When you use the /UI2/CL_SRA_LOGIN class as your SAP Fiori logon class, you get the following SAP Fiori logon page:

Which is good looking, but customers might ask to put their own logo and background image on this logon page. In this blog I will show you how you can do this.

Custom Logon Class

Instead of using the /UI2/CL_SRA_LOGIN class, we will use our own class. Go to SE24 and create a copy of this class. In my example I call my custom class ZFIORI_LOGIN_CUST. Activate your class and go to the method INIT_DEFAULT_PROPERTIES. You will see that you have several customizing options in this method. For the background image and the logo, the following lines of code are what interests us:

 set_property( iv_name = 'img_logo' iv_value = '/sap/public/bc/ui2/logon/img/sap_logo.png' ).
 set_property( iv_name = 'img_logo_width' iv_value = '64' ).
 set_property( iv_name = 'img_background' iv_value = '/sap/public/bc/ui2/logon/img/login_background.jpg' ).
 set_property( iv_name = 'img_background_mobile' iv_value = '/sap/public/bc/ui2/logon/img/login_background_mobile.jpg' ).
 set_property( iv_name = 'img_background_mobile_land' iv_value = '/sap/public/bc/ui2/logon/img/login_background_mobile_land.jpg' ).

Upload your own images to the public repository, and adjust the url's to point to your own images. You can also change the width of the logo here.

SICF

In SICF, go to the service of the SAP Fiori launchpad: /default_host/sap/bc/ui5_ui5/ui2/ushell.

Under the tab 'Error Pages' -> 'Logon Errors' click on the 'Configuration' button and enter your custom login class:

If you now go to your Fiori url, you will see your customized login page:

Inspired by the great blog of DJ Adams from Bluefin Solutions about his dedication to running and Fiori and FLP I decided to write this blob. It's about a prototype I created about one year ago. At this time a good friend of mine worked in the office of a school for pupils with disabilities. To be precise her office war responsible for four or five schools at different locations. Sometimes she told me about her daily work and how hard it is to find the right information in short time, e.g. if parents, teachers, social welfare offices or others call her on the phone and want to know something about a student in short time.

I then some day sat down in my office and thought about her problems. Within a few hours I created a prototype of a bunch of Fiori applications that I gathered in FLP. I presented it to her the next time we met and she was absolutely excited. Unfortunately she wasn't in the position to give me an order to implement this prototype. Her school decided to use a solution that was also implemented by a lot of other schools and that was much more difficult and not approximately as good as my prototype.

In this blog I want to show you what I prototyped and that Fiori and FLP are not only suitable for displaying business figures, sales order or HCM stuff. As mentioned above this as well as DJ Adams blog is another use case for Fiori and FLP besides the usual SAP business stuff.

Let's start.

The launchpad

I first created a launchpad with some small apps to manage the schools (locations), the teachers as well as the students. Additionally I thought it would be helpful to have an overview about the cars, as I said it was a school for pupils with disabilities, and for canteen planing.

Of course there are much more areas of interest at such a school as inventory, car driver management and, and, and.

Student Overview

Cause I didn't want to spend too much time on this prototype that would never come to realization I decided to concentrate on the main topic of a school, the students. I prototyped the student app in more detail. Here I started with a ... of course list of students.

Here I used a Worklist Floorplan. Another proposal was the everywhere used Master-Detail-View or Split Screen Layout

Detail View = Tab View

At the detail view I decided to use an Icon Tab Bar. Here are two not very spectacular but informative tabs.

Scanned Documents

Cause at schools a lot of document arrive via regular letters (yes they are still used for communication) I added the possibility to scan these documents and add them to the pupils file.

Transport possibilities

Cause disabled pupils are usually not able to drive to school by bike or come to school by themeselves they often have to be transported. This can be maintained on the transport tab.

Certificates of course

Most important for students of course are certificates. Although many might think the they are not very important at a school for disabled pupils this is not the case. On the contrary they are even more important cause the teachers can see how the child evolved over time. Beside that the certificates are often used when pupils change from one school to another which happens more often than at regular schools. Therefore my prototype was designed to import the certificates that of course are already written with word processing software.

Everything else

Last but not least there are always things that can't be associated to a special topic. At a school for disabled pupils it's e.g. more important than at other schools to respect the personal rights of the pupils and their parents. Therefore it is important to get information like "is it allowed to publish photos in newspapers or on the internet" or "is there something special to know about the habits of the child" on a fingertip.

Conclusion

Although this application will probably never be developed by me it was a great experience to create a prototype for a real use case in a few hours with the prototyping tools SAP provides. Additionally I got used to Fiori and FLP this way. If I find a few schools that are interested in such a solution I might implement it. If you school leader are currently not using SAP software don't worry I've written the n-odata-server with which it is possible to write the backend for UI5 / Fiori apps without the need to have SAP backend. To get SAP back into the game my recommendation is to run the app in SAP HCP which is a perfect place for developing and running UI5 apps.

Isn't this a WIN-WIN-WIN situation?

- I win a customer and can write some great apps.

- The school wins great and useful apps at a reasonable price.

- SAP wins a customer for HCP which they otherwise would never have thought of

Thank you DJ Adams for the inspiration writing this blog.

We are pleased to announce the general availability of SAP Fiori, cloud edition (SFCE) for productive use. You can read more about the new features in the blog published by Aviad Rivlin. SAP Fiori, cloud edition offers simple deployment for the SAP Fiori user experience (UX) through cloud services running on SAP HANA Cloud Platform (HCP).

One of the new features included in the premium edition of this offering is the SAP Fiori mobile service. We recognized early on that mobile is a required use case for SAP Fiori deployments. The vast majority of customers that I have spoken to over the last few months – and in fact the vast number of customers who have downloaded SAP Fiori – plan to use it on mobile devices.

Delivering SAP Fiori functionality in a way that satisfies your mobile users is an important aspect of your SAP Fiori planning. Accessing SAP Fiori apps directly via a browser on a mobile device has been the quickest route to mobilization of SAP Fiori - until now.  After all, SAP Fiori was built with responsive design and to support multiple form factors.  But users want a consumer-like experience with local data and access to native device features.  SAP Fiori mobile service provides the right option for optimizing mobile performance and developing richer mobile apps. It takes you beyond accessing SAP Fiori apps from a Web browser and optimizes them for a mobile environment. It simplifies the way you package, customize, secure, connect, test, distribute, and monitor SAP Fiori mobile apps. If you plan for mobile when you start your SAP Fiori projects you’ll be one step ahead of the game.

SAP Fiori mobile service enables developers to focus on solving business problems and removes the responsibility of packaging and managing the lifecycle of the content for consumption by end users. It provides the tools developers need to access the native phone features such as the camera for adding images to inspection reports, barcode scanners for product identification, location services for pickups and drop-offs, and contact lists for easy communications.

Building in security and device testing can eat up valuable development time. SAP Fiori mobile service streamlines these processes and ensures that both the apps and data are secure. SAP Fiori mobile service also promotes quality assurance by supporting tests that ensure the apps work consistently across all mobile devices.

Another built-in time saver is the pre-built shortcuts for secure access and authorization. Developers can add app login requirements and manage access to SAP Fiori apps and data in a consistent, rigorous process that takes minutes instead of days.

All these features give you the peace of mind you need to roll out and support the mobile apps that your employees want to use at work. SAP mobile service also lets IT administers brand the mobile apps with familiar company logos and designs, and it provides a window into the mobile apps’ popularity with employees. Dashboards reveal app adoption and usage information so administrators can define training needs and improvements for creating engaging on-device experiences, and automatic collection of tracelogs provide valuable information that help IT administrators troubleshoot app issues.

I have worked with many customers during the beta program and I think Kunal Gandhi, SAP technical lead at ESRI, stated it best: “SAP Fiori mobile service can help us simplify our infrastructure in the cloud while still allowing us to integrate with our on-premise back-office systems. Leveraging a single solution to build, secure and distribute SAP Fiori apps will allow us to concentrate on app development with a focus on the UX while helping to streamline the process to mobilize apps for our end users.”

A 2 minute overview video is available here.

For a more detailed demo watch the 7 minute product walkthrough video.

Additional resources are available here.

* Please note that today SAP Fiori mobile service can be used to mobilize SAP Fiori on-premise apps. The ability to mobilize SAP Fiori cloud apps is expected to be available in Q2 2016.

Following a successful controlled availability program, we are excited to announce the general availability of SAP Fiori, cloud edition (SFCE) for productive use!

SAP Fiori, cloud edition, offers simple deployment for the SAP Fiori user experience (UX) through cloud services running on SAP HANA Cloud Platform (HCP). You get a full demo-to-production environment to experience, extend, and run SAP Fiori apps and SAP Fiori launchpad in the cloud while consuming business data securely from your on-premise SAP Business Suite software in a hybrid architecture. It is delivered with selected SAP Fiori apps across lines of business covering the most common self-service scenarios.

With the release of SFCE in an unrestricted shipment, we are very happy to include SAP HANA Cloud Platform, OData providing (also known as GWaaS). I know that many of you were waiting for this component for some time… and here it is!

We recognized early on that mobile is a required use case for the SAP Fiori apps. We are working these days on providing extended mobile capabilities for SAP Fiori running on HANA Cloud Platform with SAP Fiori mobile service. SAP Fiori mobile service is planned to allow you to optimize SAP Fiori apps running on the Cloud for mobile performance and productivity – simplifying the way you package, customize, secure, connect, test, distribute, and monitor SAP Fiori mobile apps. Learn more here.

Learn more about SAP Fiori, cloud edition on SCN and in the documentation.

In this blog, I will show you how to create a CRM Service Order Fiori application within just a couple of minutes. You don't need to write even one line of JavaScript code to get this responsive application.

Main function of this Fiori application

1. There is a list which shows overview of Service orders in CRM system. You can search by Service Order and order description in search field.

2. By clicking the setting icon, you can make more table columns visible in the table:

Example: Additional two columns are exposed.

Example: Sort by Posting date in ascending order

Example: Group by Order Status:

3. Select any table row, you can navigate to Service Order detail page:

You can click corresponding tab to reach each detail page area:

Keep in mind, you DO NOT NEED to write any JavaScript code to make the above functionalities work. Please note that service order change and save are not supported in this application yet.

Prerequisite of this solution

• SAP Web IDE 1.17 (includes OData Annotation Modeler as an available plug-in)
• SAP Netweaver 7.5 SP01
• You need to have some basic knowledge on CDS view. Here is the documentation of CDS view in SAP help
• You need to have some basic knowledge on UI5 Smart template. This is documentation in SAP help: Developing Apps with Smart Templates

Implementation steps

The overall development process would be:

1. Most of the effort could be the CDS view implementation. Those views are responsible to return necessary data to UI frontend.

2. The corresponding OData service is automatically generated when you activated your CDS view.

3. Then you can use WebIDE Smart template generation wizard to generate the Fiori application on top of the automatically generated OData service.

The following entities must be created in ABAP development studio.

You can just paste the source code of each entity into ABAP development studio and activate them one by one.

Z_C_Status_Text

For example, create a new CDS view in ABAP development studio and paste the following source code,

@AbapCatalog.sqlViewName: 'zstatustext'
@AbapCatalog.compiler.compareFilter: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'system status code and description'
define view Z_C_Status_Text as select from tj02 inner join tj02t as _tj02t on
tj02.istat = _tj02t.istat and _tj02t.spras = 'E'                       
{  key tj02.istat,  _tj02t.txt04,  _tj02t.txt30
}

then click activate button:

Z_I_Prod_Status

@AbapCatalog.sqlViewName: 'zprdstatus'
@AbapCatalog.compiler.compareFilter: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'product guid and status code'
define view Z_I_Prod_Status as select from crmd_product_i
inner join crm_jest as _status on crmd_product_i.guid = _status.objnr
inner join Z_C_Status_Text as _text on _status.stat = _text.istat
{  key crmd_product_i.guid,  _status.stat,  _text.txt04,  _text.txt30
}
where _status.inact = '' and _status.stat like 'I%' and _status.stat <> 'I1030';

Z_I_Item_Detail

@AbapCatalog.sqlViewName: 'zitemdetail'
@AbapCatalog.compiler.compareFilter: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'item detail'
define view Z_I_Item_Detail as select from crmd_orderadm_i
inner join crmd_schedlin as _schedule  on crmd_orderadm_i.guid = _schedule.item_guid
inner join crmd_product_i as _prod on crmd_orderadm_i.guid = _prod.guid
inner join Z_I_Prod_Status as _prd_status  on crmd_orderadm_i.guid = _prd_status.guid
{  key crmd_orderadm_i.guid,  key crmd_orderadm_i.header,  @UI.lineItem : [{position:10, label : 'Item Number'}]  crmd_orderadm_i.number_int,  @UI.lineItem : [{position:20, label : 'Product Name'}]  crmd_orderadm_i.description,  @UI.lineItem : [{position:30, label : 'Quantity'}]  _schedule.quantity,  @UI.lineItem : [{position:40, label : 'Unit'}]  _prod.process_qty_unit as unit,  _prd_status.stat,  _prd_status.txt04,  @UI.lineItem : [{position:50}]  _prd_status.txt30
}

Z_C_Order_Item

@AbapCatalog.sqlViewName: 'zorderitem'
@AbapCatalog.compiler.compareFilter: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'order item detail'
define view Z_C_Order_Item as select from crmd_orderadm_h
inner join crmc_proc_type as _type on crmd_orderadm_h.process_type =    _type.process_type and _type.object_type = 'BUS2000116'
association [0..*] to Z_I_Item_Detail as _Item
on $projection.guid = _Item.header
{  key crmd_orderadm_h.guid,  key crmd_orderadm_h.object_id,  crmd_orderadm_h.description,  crmd_orderadm_h.posting_date,  @ObjectModel.association.type: #TO_COMPOSITION_CHILD  _Item
}

Zorder_Sys_Status

@AbapCatalog.sqlViewName: 'zsystatus'
@AbapCatalog.compiler.compareFilter: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'system status'
define view Zorder_Sys_Status as select from crmd_orderadm_h
inner join crm_jest as _crm_jest on crmd_orderadm_h.guid = _crm_jest.objnr
inner join Z_C_Status_Text as _status_text on _crm_jest.stat = _status_text.istat                                               
{  key crmd_orderadm_h.guid,  key _crm_jest.stat,  _status_text.txt04,  _status_text.txt30
}
/*where _crm_jest.inact = '' and _crm_jest.stat like 'I%' and _crm_jest.stat <> 'I1030' // has error
and _crm_jest.stat <> 'I1026'; // do not transfer*/
where _crm_jest.inact = '' and ( _crm_jest.stat = 'I1003' or
_crm_jest.stat = 'I1003' or _crm_jest.stat = 'I1005' )
/*I1002 open
I1003 in process
I1005 complete*/

Z_c_partner

@AbapCatalog.sqlViewName: 'zcpartner'
@AbapCatalog.compiler.compareFilter: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'partner detail'
define view Z_c_partner as select from crmd_orderadm_h
inner join crmd_link as _link on crmd_orderadm_h.guid = _link.guid_hi and _link.objtype_hi = '05'  and _link.objtype_set = '07'
inner join ztf_bp_detail( clnt: '001') as _bp on _link.guid_set = _bp.partset_guid
{  key crmd_orderadm_h.guid,  --_link.objtype_hi as header_type,  --_link.objtype_set as item_type,  _bp.bp_guid,  _bp.partner_no,  _bp.name,  case _bp.title    when '0001' then 'Ms.'    when '0002' then 'Mr.'    when '0003' then 'Company'    when '0004' then 'Mr and Mrs'    else 'Unknown'  end as title
}

ztf_BP_DETAIL

@ClientDependent: true
@AccessControl.authorizationCheck: #NOT_REQUIRED
define table function ztf_BP_DETAIL  with parameters @Environment.systemField: #CLIENT                  clnt:abap.clnt  returns { client:s_mandt;            partner_guid:BU_PARTNER_GUID;            partset_guid:CRMT_OBJECT_GUID;            partner_no: CRMT_PARTNER_NO;            bp_guid: BU_PARTNER_GUID;            title:AD_TITLE;            name: BU_NAME1TX;          }  implemented by method    zcl_amdp_bp_detail=>crmd_partner_but000;

zcl_amdp_bp_detail

CLASS zcl_amdp_bp_detail DEFINITION  PUBLIC  FINAL  CREATE PUBLIC .  PUBLIC SECTION.  INTERFACES if_amdp_marker_hdb.  CLASS-METHODS crmd_partner_but000 FOR TABLE FUNCTION ztf_bp_Detail.  PROTECTED SECTION.  PRIVATE SECTION.
ENDCLASS.
CLASS zcl_amdp_bp_detail IMPLEMENTATION.
METHOD crmd_partner_but000        BY DATABASE FUNCTION FOR HDB        LANGUAGE SQLSCRIPT        OPTIONS READ-ONLY        USING crmd_partner but000.    RETURN SELECT sc.client as client,                  sc.partner_guid as partner_guid,                  sc.guid as partset_guid,                  sc.partner_no as partner_no,                  sp.partner_guid as bp_guid,                  sp.title as title,                  sp.name1_text as name                  FROM crmd_partner AS sc                    INNER JOIN but000 AS sp ON sc.client = sp.client AND                                              sc.partner_no = sp.partner_guid                    WHERE sc.client = :clnt AND                          sc.partner_fct = '00000001'                    ORDER BY sc.client;  ENDMETHOD.
ENDCLASS.

For CDS table function and AMDP implementation, please read this blog My CDS view self study tutorial - Part 6 consume table function in CDS viewfor more detail.

Z_i_Order_View

@AbapCatalog.sqlViewName: 'ziorder'
@AbapCatalog.compiler.compareFilter: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'order consumption view'
define view Z_i_Order_View as select from Z_C_Order_Item
inner join Zorder_Sys_Status as _sys_status
on Z_C_Order_Item.guid = _sys_status.guid
inner join Z_c_partner as _partner
on Z_C_Order_Item.guid = _partner.guid
{  key Z_C_Order_Item.guid as order_guid,  Z_C_Order_Item.object_id,  Z_C_Order_Item.description,  Z_C_Order_Item.posting_date,  _partner.name,  _partner.partner_no,  _partner.title,  _sys_status.stat,  _sys_status.txt04,  _sys_status.txt30,  @ObjectModel.association.type: [#TO_COMPOSITION_CHILD]  Z_C_Order_Item._Item
}

Z_C_Service_Order_View

@AbapCatalog.sqlViewName: 'zcorderview'
@AbapCatalog.compiler.compareFilter: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'service order consumption view'
@Search.searchable: true
@OData.publish: true
@ObjectModel: {  type: #CONSUMPTION,  compositionRoot,  createEnabled,  deleteEnabled,  updateEnabled
}
@UI.headerInfo:{  typeName:      'Service Order',  typeNamePlural: 'Service Orders',  title: { value: 'object_id' },  description: { value: 'description' }
}
define view Z_C_Service_Order_View as select from Z_i_Order_View {  key Z_i_Order_View.order_guid as order_guid,  @UI.lineItem : [{position:10, label : 'Service Order ID'}]  // @UI.identification: [ { position: 10 } ]  @UI.selectionField: [ { position: 20, label : 'Service Order ID' } ]  Z_i_Order_View.object_id,  @UI.lineItem : [{position:20, label : 'Description'}]  //@UI.identification: [ { position: 20 } ]  @Search:{ defaultSearchElement: true, ranking: #HIGH, fuzzinessThreshold: 0.8 }  //@UI.selectionField: { position: 4, element: '_ProductCategory.MainProductCategory' }  @UI.selectionField: [ { position: 10, label : 'Description' } ]  Z_i_Order_View.description,  Z_i_Order_View.partner_no,  Z_i_Order_View.title,  @UI.identification: [ { position: 20 } ]  Z_i_Order_View.posting_date,  @UI.lineItem : [{position:30, label : 'Account'}]  @UI.identification: [ { position: 30, label : 'Account' } ]  Z_i_Order_View.name,  Z_i_Order_View.stat,  Z_i_Order_View.txt04,  @UI.lineItem : [{position:40}]  @UI.identification: [ { position: 40 } ]  Z_i_Order_View.txt30,  @ObjectModel.association.type: [#TO_COMPOSITION_CHILD]  Z_i_Order_View._Item
}

Once you have activated all the CDS view entities, follow the steps described in this blog Step by Step to create CDS view through SmartTemplate + WebIDE , and you will get the working Service order application immediately.

Further reading

If you have a look at the automatically generated project in WebIDE, you will find that now there is no application specific view or controllers. Only Component.js exists with a few dummy code below. The UI5 runtime takes over everything for you to make the application work.

It means your trouble shooting will become more struggled in case you meet with isuse, since now the whole scenarios works as a black box for you. As a result it is of great importance for developers to understand what occurs under the hood.

CDS view self study

The following posts are written by me during my self-study on CDS view:

• Part1 - how to test odata service generated by CDS view
• Part2 - what objects are automatically generate after you activate one CDS view
• Part3 - how is view source in Eclipse converted to ABAP view in the backend
• Part4 - how does annotation @OData.publish work
• Part5 - how to create CDS view which supports navigation in OData service
• Part6 - consume table function in CDS view

The following posts are written for smart control self-study:

• Part1 - Currency example - how Smart field works
• Part2 - Smart field with value help
• Part3 - Smart Field with Smart Link
• Part4 - How SmartTable works

I am currently working on a Fiori App for which I need a custom view which should come in a full screen and not in a split screen. I found that the below routing has to be used in order to achieve it. Since its a learning for me, I am sharing this info.

Below routing has to added in your component file

routing : {

     "routes" : {

            "fullScreen" : {

                "subroutes" : {

                        "SCC" : {

                                "pattern" : "SCC/{tempCartId}/{tempItem}/{CartId}/{CartItem}", 

                                 "viewPath" : "ui.s2p.srm.sc.create.ZSRM_SC_CRE2.view",

                                 "view" : "SCC",

                                 "targetAggregation" : "pages",

                                         }

                                      }

                                  }

                      }

              },

SAP Fiori, Cloud Edition (SFCE) was Released to Customers (RTC) in a Controlled Availability program, but is now GA (Generally Available or General Availability?).  Now how to get started with it, right?  Fear not, there is a lot of help available to you.  Let's start with keeping it aligned with Run Simple!  First, read Aviad's blog which has the list of apps available for the Fiori, Cloud Edition.  Second, go through the welcome package put together by Inbal Sabag (Someone in your organization should have received it in an email).  I strongly recommend that you fill in the questionnaire included.  There is a list of services available which I shamelessly copied and reproduced here:

• SAP HANA Cloud Platform account including support, storage, outbound bandwidth
• Selected Fiori self-service apps from HCM, CRM, Supply Chain, Inbox, Sourcing and Procurement covering the most frequently and commonly used use-cases (Apps Reference Library)
• Administration user, site visits and Cloud Identity logons
• SAP Fiori launchpad (cloud) as a role-based, personalized, single point of access
• SAP Web IDE for extending and developing Fiori-like apps.
• UI theme designer for branding
• SAP HANA Cloud Platform OData provisioning (HCP ODP) to consume business data from the backend system via OData services
• SAP HANA Cloud Connector to securely connect cloud account with an on-premise system (download here)
• SAP Cloud Identity for identity lifecycle management for SAP Cloud applications and on-premise applications.

We highly recommend you start by following the instructions in the system configuration KIT (more info coming soon).

There are some basic tasks which come right after you have the licensing in place.  An HCP account will be established automatically and Administrative ID and password provided by email to the person designated on the contract.  So some other IDs and Pwds for your team members is likely the first task to complete.  There are connections that you need to make to the back end systems.  Connectivity via Reverse Proxy gives you insight into this alternative to HCC (HANA Cloud Connector as well as pros and cons for either method.  The link also puts you square in the middle of the HANA Cloud Platform documentation, so read other topics as you desire. 

If you read Aviad's blog you will see the current list of apps available for SFCE  Nicely enough each of the apps listed is linked directly to the Fiori apps library entry.  For an example, click on My Leave Requests.  You may know that there are two versions, but since the app links to the one which applicable for SAP Fiori Cloud Edition, (version 2 if you really want to know) you do not have to figure it out on your own.  Once you are there, you will see the product features displayed.  Probably more of interest is the "Implementation Information" section (click on it right next to the "Product Features" in the center of the page). It has four subsections, Installation, Configuration, Extensibility, and Support.  Read them to find out what is required of your system and the tasks you need to complete for each app. 

If/When you run into problems:

If you have problems with any parts of getting your SFCE, post a Discussion in the SAP Fiori SCN community, marked as a Questions.  There are a lot of Fiori experts around now and in the SAP Technology RIG, there are also some of those experts familiar with both Cloud and On Premise versions of Fiori apps.  We will respond promptly (rather faster than if you open a support ticket).  If it is an issue with how to accomplish something, this really is the place to ask.  If it really and truly is a bug in the product, we will direct you to open a ticket using the Component mentioned in the Support section above, but also make sure the title has SFCE in the title/subject line.  It will help us to find it and make sure action is being taken on the part of the support teams.

And if you have tried these approaches and you do not see a response, you are welcome to contact me with the url of your Discussion (which I will see anyway) or your ticket number and I will see if I can help push it along.  But please make that your last resort and after allowing a reasonable amount of time for responses.

NOTE:  I am trying to use the SFCE acronym, but if I slip up and you see FCE, it is the same thing.  Also, HCP ODP used to be HCI ODP as well as GWaaS (which is a little more generic of a term and really is not that accurate since HCP ODP does not fully reproduce all the functions of GW, at least not yet).

Have fun with the Fiori Cloud Edition and remember there are a lot of resources and people who will help you to succeed!

Cheers, Mike (Moderator, Space Editor, curmudgeon ... ooops did I leave that in?)

SAP Technology RIG

BUSINESS SCENARIO

You want to start a Web Dynpro ABAP Application from the Fiori Launchpad. You find the popular docment http://scn.sap.com/docs/DOC-58178. This describes the official way to add a WDA Application to the Fiori Launchpad. This is very diffcult. You'll need many steps to reach the goal:

• customize lpd_cust
• create an semantic object
• use the floorplan designer
• create a pfcg role

This blog describe an easy way to do the same. You on only need two tools:

• floorplan designer
• pfcg role designer

1. Fiori Launchpad Designer

Use transaction '/UI2/FLPD_CUST' to start the Fiori Launchpad Designer. Create a new Catalog 'Test'. Use this button

for creation.

Continue with Save.

Create a new Tile.

Select 'App Launcher # Static'.

Uncheck 'Use semantic object navigation' and insert the relative location from your Web Dynpro Application in the field 'Target URL'. In this example we use the demo application DEMODYNAMIC. The relative link of this Application is: '/sap/bc/webdynpro/sap/DEMODYNAMIC' (also see path in transaction 'SICF'). Enter a title of your own choise. Enter a Icon of your own choise.

Save the tile and you will see your new tile.

Now create a group 'ztest'. Select the tab 'Groups':

and for creation for the group use th button:

Enter Title 'ZTEST' and ID 'ztest'.

Continue with 'Save'. Now you have to add a Tile of a catalog. Select the catalog 'ztest' and add the tile 'DEMODYNAMIC' by pressing '+'.

2. PFCG role designer

In this step you must assign you Fiori catalog and Fiori group to a role.

Start the role designer with the transaction 'PFCG'.

Create a new role 'Z_FIORI_TEST' and select tab 'Menu'.

Add the group 'ztest'.

Add the catalog 'ztest'.

Assign your SAP User and save the role.

Start the Fiori Launchpad by using transaction '/UI2/FLP'.

Click on the tile and your Web Dynpro Application starts in a new tab

Are you interested in topics such as design, building and using Fiori apps, prototyping (BUILD and Splash), and simplifying screens (SAP Screen Personas)? If so, we have gathered relevant information on these subjects into a monthly email newsletter. Authors include industry experts, UX practitioners, SAP partners, and members of the product teams

You can sign up to receive the SAP UX Newsletter at

http://sap.us11.list-manage.com/subscribe?u=3efe5935c81dd05f758763dd0&id=0de936af27

For the SAP UX and Design team, Peter Spielvogel.

In this blog Create a CRM Service Order Fiori application within a couple of minutesI introduced the approach to generate a Fiori application which supports search and display on Service Order within just a few minutes.

In this blog, I will use one field in Service Order header level to demonstrate how to enable Service order change and save function.

After finished, the Fiori application has the following feature:

When you click edit button:

The fields in UI will become editable:

Change the posting date via Date picker controller and click save button, the change is successfully saved to backend:

Implementation detail

1. Most of CDS entities described in previous blog remain unchanged, only a small adaptation is needed, as highlighted below:

The reason is, since we need to support update scenario, we have to explicitly tell framework about this fact via annotation "transactionalProcessingDelegated". Meanwhile, the automatically generated service provider class by annotation @OData.publish: true could not fulfill the update scenario - we have to create a new SEGW project via tcode SEGW manually, so we have to mark this flag as false to suppress the service automatically generation.

Finish the change and re-activate the consumption view.

2.  tcode SEGW, create a new SEGW project and choose Reference->Data Source from context menu, load the CDS view you change in previous step.

Once done, you should have the following hierarchy displayed. Generate Runtime Objects by clicking the button in toolbar.

3. Redefine three methods of automatically generated data provider class:

Source code could be found from attachment.

You have observed the following behavior: the sales volume is displayed in detail view with 1880 USD, while in master list, it is displayed as 2K for short. Why?

The truncation behavior in master list is implemented by Fiori application to fulfill the product standard of Globalization requirement.

The exact value for SalesVolume is 1880.00,

And for the field in master list, there is a formatter to return the volume in short format:

And in order to understand the implementation detail of framework API "FormatAmountShort", we have to understand the definition of CLDR - Unicode Common Locale Data Repository.

The Unicode CLDR provides key building blocks for software to support the world's languages, with the largest and most extensive standard repository of locale data available. This data is used by a wide spectrum of companies for their software internationalization and localization, adapting software to the conventions of different languages for such common software tasks. See one part of CLDR definition below from http://cldr.unicode.org/translation/number-patterns :

The first call of FormatAmountShort will trigger the load of CLDR file in the runtime.

The English version of CLDR content defined in the web page http://cldr.unicode.org/ is packed and stored in JSON file en.json by SAP and is now loaded:

And here below is the code how "1880" is transformed to "2k" by framework code:

The reason why English version of CLDR file is loaded is the language setting of the browser.

UI5 runtime will use the first Language configured in browser as primary language for all subsequent language-specific configuration stuff load mechanism, as illustrated in line 67 below:

Finally the English version of CLDR file is loaded in line 718:

You might observe the same number value but displayed with different format if you log on the same system with different user.

The user with Decimal Notation setting " " will see the format "1.880,00" and setting "Y" will see "1 880,00". What has happened under the hood?

If you monitor the network tab in Chrome development tool when Fiori launchpad is initialized for the very beginning, you can find the http request below:

The response contains the Defaults user setting stored in ABAP backend. The attribute "numberFormat" is related to the number format being displayed.

In Configuration.js, the corresponding enumeration variable is defined for each type of number format.

The main logic for number format is implemented in file NumberFormat.js. As the variable name has already given a good hint, the integer part and fraction part of 1880.00 are parsed and stored into the two variables separately.

The logic of the following code:

1. Since a number is displayed as several groups and each group consists of THREE digits, so in code 627, the position of group is calculated by MOD operation against 3.

2. For user setting "Y", the group separator character is " " and decimal separator is "," , stored in corresponding attribute in variable oOptions.

3. You can debug the NumberFormat.format in the run time to have a better understanding on the logic above. Suppose you do not the exact location of NumberFormat.js, just switch to debug mode, open Chrome development tool and go to Sources tab,

press Ctrl+O and type "NumberF" and then there is auto-complete function which lists all potential results.

Click the second one (  ) and you will navigate to NumberFormat.js. Hover the mouse and you can see its absolute path in tooltip.

Now you can set breakpoint and debug.

For more tips about Chrome development tool used in my daily work, please refer to this blog.

Enjoy debugging!

SAP Fiori, cloud edition, offers simple deployment for the SAP Fiori user experience (UX) through cloud services running on SAP HANA Cloud Platform. You get a full demo-to-production environment to experience, extend, and run SAP Fiori apps and SAP Fiori launchpad in the cloud while consuming business data securely from your on-premise SAP Business Suite software in a hybrid architecture.

Below is the list of apps available with SAP Fiori, cloud edition:

* This table will be updated on a regular basis when new apps are available with SAP Fiori, cloud edition

For additional information please check the official documentation, HCP documentation and SCN page.

Pre-requisites

1.HCP(Hana Cloud Platform)Account with SAP WEB IDE enabled.

Steps

1. Configure OData destination.I am using northwind OData service.From HCP cockpit choose destinations->New Destinations

2.Start SAPWebIDE from Services of HCP cockpit

3.From SAP Web IDE menu select File->New->Project from Template

4.Select 'SAPUI5 Application template'.From Available versions we have two options SAPUI5 Innovation and SAPUI5 1.28.Select SAPUI5 1.28

5.Give a meaningful project name.I am giving OdataConsumingApp.Leave namespace empty.Click Next.select view type XML and name view1(we are not changing it).Click Next.Click Finish.A new project will be created in workspace.

6.Right Click Application->New->OData Service.

7.Select Service URL from sources.Then Select Odata service from dropdown menu.If you dont see your service in drop down check step 1.Type in service URL and click play button.If no error occur we can see service details in right side of the service selection.Click Next. Click Finish.Now the selected OData service is connected to our App.

8.Its time to do some coding.Open component.js in code editor by double clicking.Paste below code in init method after the call to the base component.This is for accessing the service url from the config and creating an OData model and setting it to application.

9.Now we will add some code for view.Open View1.view.xml.Paste below code  inside Page's content aggregation.We are using a list and binding it to Categeries  enitityset of northwind OData service.

10.See our application in action.Right Click on Application->Run->Run As->Web  Application.

for more information visit SAPUI5 Application Consuming OData service with SAP WEB IDE PART-2 | sap abap | sapui5 made easy

Fiori Launchpad on Hana Cloud Platform – A first look to creating your Launchpad in the cloud

Recently on March 31st, SAP announced general availability of SAP Fiori Cloud Edition.  This is made available in the Hana Cloud Platform's Cloud Portal.  For my first SCN blog, I’ll walk through step by step how to enable the services you’ll need in HCP and how to create a few simple applications to see your new Cloud Fiori Launchpad in action with some initial impressions.

I won’t cover signing up for your free Hana Cloud Trial account, but if you don’t have one yet…sign up for free at:  https://account.hanatrial.ondemand.com

The first step in setting up your own Fiori Launchpad in the cloud is to logon to your Hana Cloud Platform account and activate the Hana Cloud Portal.  Below you see the HCP dashboard.  Once you click on “Services” and scroll down to the bottom of the page, you see Hana Cloud Portal.  I had already enabled mine for other demos but by clicking on the service you can activate your Cloud Portal.

Hana Cloud Platform dashboard

Hana Cloud Services – SAP Hana Cloud Portal

Now that the Hana Cloud Portal is activated you can click on “Go to Service”.

Clicking “Go to Service” launches your own Hana Cloud Portal URL.  The home screen here is a welcome to Hana Cloud Portal along with links on the left hand side to the different options you have in your Cloud Portal.

In order to create a Fiori Launchpad (FLP), you click on Site Directory and click on the + tile. You can see below I have already created a Nimbl Cloud FLP, but if I wanted to create another one I would click the +.

There are multiple site templates available for you to choose from.  I selected SAP Fiori Launchpad.

After you have created your SAP Fiori Launchpad, you have the option to edit your Launchpad.  Here you are taken to a very nice looking Launchpad designer/editor.  I believe the cloud version of this is already miles ahead of the on-premise solution.  From this Launchpad Home screen you can perform all of the major tasks that any Launchpad designer might do.  Create an App tile, go to catalogs, groups, see the apps uploaded to your Hana Cloud account for usage, etc…

From the FLP cloud edition home page, it’s a lot like creating tiles, groups, and catalogs in the on-premise version of Launchpad Designer, only easier.

Below I go through the quick steps of creating an application tile that points to a URL. For my use case, I decided to make my own Development Tools catalog of application tiles.

How to:  Creating an application tile

Click Create App Tile from the Home tab.  You are taken to a wizard for creating your application tile as seen in the screenshots below.  Very simply, enter the information on this screen and the Navigation screen.  Once that is done, your application tile is created.  If you have not already created Groups/Catalogs, you can house this application in the sample group/sample catalog already created for you.

Enter apps name and description

For this example, I am choosing to link to a URL App Type:

The Navigation tab, Icon selection, and tile group assignment:

The end product:

In less than an hour, I was able to activate my Hana Cloud Portal, Fiori Launchpad in the Cloud, and create 4 application tiles to URLs, a Catalog, and a Group.  Now I am happily using my Nimbl Development Launchpad as an everyday starting point to checking Nimbl email, log into my Web IDE account, search on SCN, and/or google more SAP solutions.

Usage Analytics

The one feature that the Fiori Launchpad cloud edition differentiates itself with is the built in analytics.  There wasn't a good way in the on-premise version of FLP to track site visits, how many times someone has accessed a certain application, and give trends on daily/weekly/monthly access.  FLP in the cloud fixes that with this slick looking Usage Analytics page. After accessing my apps and playing around during development, I was able to see how many times I visited the page, what OS I was using, and what browser I accessed the FLP with.

For Help or to learn more about Fiori Launchpad in the Cloud, you can click on the help link and you are taken straight to the page below to peruse/learn more:

Stay tuned for another installment in the Fiori Launchpad Cloud edition blog to see how to connect to an on-premise SAP system and deploy any of the 29 currently available SAP standard apps.

Happy Cloud Launching!

Last night I got the opportunity to sit down and chat with Aviad Rivlin from SAP and discuss the SAP Fiori Cloud Edition (a.k.a SFCE). Aviad is a director of product management for the SAP Fiori Cloud Edition. In our 20 minute chat you will find out all about SFCE , here are some of the specific questions Aviad answers:

• What is SAP Fiori Cloud Edition?
• What are the main benefits customers can expect?
• What Fiori Apps are available now and what is planned for the future?
• Do you need to be running SAP ERP on HANA or S/4HANA?
• Can you use Transactional, Analytical and Factsheet apps?
• Can you build your own Fiori or Fiori-Like apps and run them on SFCE?
  
• What do customers need to install “on-premise”?
• What is HCP oData Provisioning a.k.a. Gateway as a Service (GWaaS)?
• How frequently do updates get applied in the cloud?
• How is testing managed for updates?
• How much does it cost? (Will Aviad really answer this? - you will have to listen to find out)

You can listen to our full discussion here

If you haven’t already seen Aviad's post announcing the general availability of SFCE I encourage you to take a look:

Announcing General Availability (GA) of SAP Fiori Cloud Edition!

Another great place to start as Aviad mentions at the end of our talk is with the SAP Fiori Cloud Demo Edition, so make sure you check that out as well.

Please leave your comments and feedback below.Thanks for listening!