sap river rapid development environment how-to guide to create a...how to create a sap fiori starter...

SAP River Rapid Development Environment How-To Guide

Provided by Customer Experience Group

How To Create A SAP Fiori Starter App In SAP River RDE Applicable Releases: SAP River Rapid Development Environment 1.0 Version 1.0 - May 2014

How To Create A SAP Fiori Starter App In SAP River RDE

2

Document History

Document Version Authored By Description

1.0 Customer Experience

Group

First release of this guide


3

TABLE OF CONTENTS

1. Business Scenario ................................................................................................................................. 4

2. Background Information ...................................................................................................................... 4

3. Prerequisites ........................................................................................................................................ 4

4. Step-by-Step Procedure ....................................................................................................................... 5 4.1 Create new project based on a template ........................................................................................ 5 4.2 Using the Features of the SAP River RDE editor .............................................................................11

4.2.1 Changing Z_Fiori/view/Master.view.xml ................................................................................11 4.2.2 Changing Z_Fiori/view/Detail.view.xml ..................................................................................13


4

1. BUSINESS SCENARIO

SAP River Rapid Development Environment (or SAP River RDE) is a next-generation cloud-based meeting space where multiple project stakeholders can work together from a common web interface -- connecting to the same shared repository with virtually no setup required. It includes multiple interactive features that allow you to collaborate with your colleagues and accelerate the development of your HTML5/UI5 applications. Building new SAP Fiori-like UIs is a common customer requirement. Customers often have their specific business scenarios and tasks they want to build their own app using the SAP Fiori design principles. 2. BACKGROUND INFORMATION

In this How-To Guide we will show you how to create a new Fiori-like app using the SAP River RDE. The implementation of this scenario is divided into two steps.

1. Create new project based on a template in SAP River RDE.

2. Extend the OData service via the Redefine approach.

3. PREREQUISITES

To connect to your SAP River RDE system, open the browser and enter the URL of your system.


5

4. STEP-BY-STEP PROCEDURE

Our installation will be made by the following steps:

1) Create new project based on a template 2) Using the Features of the SAP River RDE editor

4.1 Create new project based on a template In this first step, you are going to use the SAP River RDE Project Wizard to create a new project based on a template.

1. Create new project in SAP River RDE.

There are two ways to do this. You can either:

a. Select File New Project

b. Or right click on on the folder “Local (watt)” and select New Project.


6

2. The New Project wizard starts. In the first step called Project Basic Information, enter a name for your project.

From the Application Domain dropdown list, select All

Click the down arrow symbol at the bottom of the screen

3. The screen scrolls up and you are now shown the Available Templates screen.

Select SAP Fiori Application -> SAP Fiori Starter Application then click the arrow down symbol to move to the next screen.

4. On the Data Connection Information screen, select the button.


7

5. A new set of fields will now appear called Catalog for System.

From the drop down list, select your system.

6. The OData service catalog for the selected backend system is now downloaded and a list of all OData services is displayed.

7. Search for your service and select it from the results list.


8

8. Expand the tree to display the service’s metadata.

9. With the service name selected, click on to select this OData service and close the Catalog screen. The OData service URL now is transferred to the “Service” field.

Click the down arrow symbol to proceed to the step Template Customizing.

10. We must now define which fields will appear in the Master view.

Select the Master Section from the table on the left and enter the following information:


9

Master Section

Title Customers

Search Placeholder Customer Name

Search Tooltip Search for Customers

OData Collection Customers

Item Title CustomerName

Numeric Attribute CustomerID

Units Attribute <LEAVE EMPTY>

Attribute 1 City

Attribute 2 DistributionChannelName

Search Field CustomerName

11. The next step is to define which fields will appear in the Detail view.

Select the Detail Section from the table on the left and enter the following information:


10

Detail Section

Title Customer

Detail Text Customer Details

Title CustomerName

Numeric Attribute CustomerName

Units Attribute <LEAVE EMPTY>

Click the down arrow symbol to proceed.

12. You are now on the final Confirm step, so click the

button and the new project will be created in your workspace.

13. In order to preview your new app, expand the your Fiori project in your workspace and select the index.html file.

14. Once the index.html file has been selected, the toolbar button will become available.

Click on the Run button to preview your app.


11

15. The app preview pane will now start in a new browser tab.

Notice that the preview pane allows you to simulate the different form factors found on desktops, tablets and phones.

There is also a custom form factor available.

You can terminate the preview pane simply by closing the tab.

16. Notice that there are a few places where the text “[object Object]” has been displayed. This is due to the fact that we left various fields in the wizard empty.

In the next section, we will both tidy this up and add some more information to the Details view.

4.2 Using the Features of the SAP River RDE editor ...

When working with XML elements that are unfamiliar to you, it is often helpful to make use of the API Reference Panel from the menu bar Tools API Reference Pane.

4.2.1 Changing Z_Fiori/view/Master.view.xml

1. Open the Z_Fiori/view/Master.view.xml file by expanding the tree structure and double clicking on the name


12

2. Starting at line 16, there is a <content> tag that finishes at line 27.

<content> <List id="list" items="{/Customers}" mode="{device>/listMode}" select="handleSelect" growing="true" growingScrollToLoad="true"> <ObjectListItem id="MAIN_LIST_ITEM" type="{device>/listItemType}" title="{CustomerName}" number="{CustomerID}" numberUnit="{}"> <attributes> <ObjectAttribute id="ATTR1" text="{City}" /> <ObjectAttribute id="ATTR2" text="{DistributionChannelName}" /> </attributes> </ObjectListItem> </List> </content>

The text “[object Object]” underneath the Customer Id is caused by fact that the numberUnit parameter is set to an empty JavaScript object (highlighted above).1

1 In JavaScript, the string representation of an empty object is the text “[object Object]”


13

To correct this, simply delete the empty braces inside the double quote characters:

title="{CustomerName}" number="{CustomerID}" numberUnit="{}">

becomes

title="{CustomerName}" number="{CustomerID}" numberUnit="">

3. Now that you have edited this file, notice that an asterisk character appears after the filename in the tab at the top of the editor screen.

This indicates that the file contains unsaved changes, so press Ctrl+S to save your changes and the asterisk will disappear.

4. To test this change, select index.html from the project tree on the left and run the application again. Alternatively, if you have left the “Page Preview” tab open, simply refresh this tab.

5. The text “[object Object]” has now disappeared.

4.2.2 Changing Z_Fiori/view/Detail.view.xml

1. Open the file Z_Fiori/view/Detail.view.xml.

Here we are going to make several changes: we will firstly delete the unwanted text “[object Object]” and

secondly display some more information about the selected customer.

2. On lines 14 and 15, the number parameter is set to CustomerName and the numberUnit parameter is

set equal to empty JavaScript objects.

<ObjectHeader title="{CustomerName}" number="{CustomerName}" numberUnit="{}"> <attributes> <ObjectAttribute text="{i18n>DETAIL_TEXT}" /> </attributes> </ObjectHeader>

In this case, change the number parameter to display the value of the CustomerID OData field and set

the numberUnit property to be an empty string:

<ObjectHeader title="{CustomerName}"


14

number="{CustomerID}" numberUnit=""> <attributes> <ObjectAttribute text="{i18n>DETAIL_TEXT}" /> </attributes> </ObjectHeader>

CAUTION

OData field names are case-sensitive! Entering CustomerId instead of CustomerID will not generate an

error, but then neither will it cause the desired field to be displayed. You’ll just see an empty space

instead.

3. Save the Detail.view.xml file and rerun the app (or refresh the Page Preview) to test that these

changes have the desired results. You should now see something like this:

4. Now we will add more customer information to the Detail view.

5. On lines 22 to 39 of Detail.view.xml, you will find the definition of the <IconTabBar> element. Inside

this element is an <items> element within which there is currently a single

<IconTabFilter> element. The icon property of this tab is set to sap-icon://hint,

which results in the “Information” icon being shown.

We will firstly display some new fields within this <IconTabFilter> and then create a second

<IconTabFilter>.

6. Let’s start by adding some customer address details to the existing <IconTabFilter>. Between the

open and close <IconTabFilter> elements on line 25 you can see an empty SimpleForm. Here, we will

display the fields CustomerName, City and PostalCode.

<form:SimpleForm minWidth="1024" > <core:Title text="More Details" /> <Label text=""/> <Text text="{}" /> <Label text=""/> <Text text="{}" /> <Label text=""/> <Text text="{}" /> </form:SimpleForm>


15

7. We will change/add the following properties:

<form:SimpleForm id="CustomerAddress" minWidth="400" editable="false"> <core:Title text="Customer Address" />

8. In between the <form:SimpleForm> and </form:SimpleForm> elements, add the following tags:

<form:SimpleForm id="CustomerAddress" minWidth="400" editable="false"> <core:Title text="Customer Address" />

<Label text="Customer Name" /> <Text text="{CustomerName}" /> <Label text="City" /> <Text text="{City}" /> <Label text="Postal Code" /> <Text text="{PostalCode}" /> </form:SimpleForm >

9. Save your changes and rerun the app (or refresh the Page Preview tab).

10. You should now see that area under the Information icon now display this additional information.

11. The next part is to create a new <IconTabFilter> in which we will display some more information about

this customer. After the end tag for the first <IconTabFilter> element, add the following statements:

<IconTabFilter icon="sap-icon://factory"> <form:SimpleForm id="DivisonInfo" minWidth="400" editable="false"> <core:Title text="Division" /> <Label text="Division" /> <Text text="{DivisionName}" /> <Label text="Distribution Channel" /> <Text text="{DistributionChannelName} ({DistributionChannel})" /> </form:SimpleForm> </IconTabFilter>


16

12. You might be wondering how you would know which icon names can be used. The simplest way is to

look at the “Icon Explorer” within the SAPUI5 Demo Apps.

This can be accessed via here https://sapui5.hana.ondemand.com/sdk/#demoapps.html or directly here

https://sapui5.hana.ondemand.com/sdk/test-resources/sap/m/demokit/icon-explorer/index.html

13. Save your changes are rerun the app (or refresh the Page Preview tab)

14. You should now see two icons in the customer details view.

https://sapui5.hana.ondemand.com/sdk/#demoapps.html

https://sapui5.hana.ondemand.com/sdk/test-resources/sap/m/demokit/icon-explorer/index.html


17

Your entire Detail.view.xml file should now look like this

<core:View controllerName="Z_Fiori.view.Detail" xmlns="sap.m" xmlns:form="sap.ui.layout.form" xmlns:core="sap.ui.core"> <Page title="{i18n>DETAIL_TITLE}" class="sapUiFioriObjectPage" showNavButton="{device>/isPhone}" navButtonPress="handleNavButtonPress"> <ObjectHeader title="{CustomerName}" number="{CustomerID}" numberUnit=""> <attributes> <ObjectAttribute text="{i18n>DETAIL_TEXT}"/> </attributes> </ObjectHeader>

<IconTabBar expanded="{device>/isNoPhone}"> <items> <IconTabFilter icon="sap-icon://hint"> <form:SimpleForm id="CustomerAddress" minWidth="400" editable="false"> <core:Title text="Customer Address" /> <Label text="Customer Name" /> <Text text="{CustomerName}" /> <Label text="City" /> <Text text="{City}" /> <Label text="Postal Code" /> <Text text="{PostalCode}" /> </form:SimpleForm > </IconTabFilter> <IconTabFilter icon="sap-icon://factory"> <form:SimpleForm id="DivisonInfo" minWidth="400" editable="false"> <core:Title text="Division" /> <Label text="Division" /> <Text text="{DivisionName}" /> <Label text="Distribution Channel" /> <Text text="{DistributionChannelName} ({DistributionChannel})" /> </form:SimpleForm> </IconTabFilter> </items> </IconTabBar> <footer> <Bar> <contentRight> <Button id="actionButton" icon="sap-icon://action" press="openActionSheet"></Button> </contentRight> </Bar> </footer> </Page> </core:View>


18

5. APPENDIX - CODE INTELLISENSE TOOL

To bring up the Code IntelliSense tool, press Ctrl-Space if using Windows or ⌘-Space if using a Mac.2

1. Search through the pop-up list for SimpleForm.

Hmmm, that’s annoying – it’s not in the list.

The reason is that the items seen in the Code IntelliSense list are firstly limited only to those SAPUI5

libraries that have been declared for use by the current view, and secondly, the list of elements is

restricted based on which XML element is currently acting as the parent element (determined by the

cursor’s current location).

2. To correct this situation, we must go back and look at the declaration of the entire XML Detail view on

lines 1 and 2.

<core:View xmlns:core="sap.ui.core" xmlns="sap.m" controllerName=" Z_Fiori.view.Detail">

Here we see the declaration of three different values:

The name of the JavaScript controller associated with this view

2 different XML namespaces are declared using the xmlns property: a default one that

references the sap.m library if UI elements and a namespace called core that references a

library called sap.ui.core.

The problem is that the SimpleForm UI element does not live in either of these libraries; therefore, Code

IntelliSense will never display that UI element.

3. To locate the correct library that contains the SimpleForm UI element, visit

https://sapui5.hana.ondemand.com/sdk/#content/Overview.html and click on the Magnifying Glass

icon near the top left corner of the screen.

Enter SimpleForm in the search field. Here you will see that the UI element name belongs to the library

sap.ui.layout.form.3

4. Now that we know in which library the SimpleForm UI element is found, we create our own XML

namespace to identify all the elements in this library.

Add a new xmlns:f property to the core:View declaration. The “:f” identifies our own namespace and

must be used as a prefix when referencing UI elements in this library.

<core:View xmlns:core="sap.ui.core" xmlns="sap.m" xmlns:f="sap.ui.layout.form"

2 WARNING! In Mac OS X, by default the ⌘-Space keystroke is assigned to bringing up the Spotlight search bar. In the current version

of WATT, this default assignment in Mac OS X must be switched off in System Preferences in order to use Code IntelliSense 3 Please do not use the older library sap.ui.commons.form as this has been deprecated.

https://sapui5.hana.ondemand.com/sdk/#content/Overview.html


19

controllerName=" Z_Fiori.view.Detail">

5. Now save the file by pressing Ctrl-S (or ⌘-s on a Mac)

6. Place the cursor back on the empty line you created earlier in step 6 above. Now type <f:s and

SimpleForm will be proposed by the code completion tool. Press Tab or Enter to accept the proposal.

7. In order to find out what properties this element has, a space character after the element name and

press Ctrl-Space (or ⌘-Space). Now you will see a list of the properties available for this element.

In this case, we will add the following four properties:

<f:SimpleForm id="CustomerAddress" minWidth="400" editable="false" title="Customer Address"

© 2014 SAP AG. All rights reserved.

SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAP

BusinessObjects Explorer, StreamWork, SAP HANA, and other SAP

products and services mentioned herein as well as their respective

logos are trademarks or registered trademarks of SAP AG in Germany

and other countries.

Business Objects and the Business Objects logo, BusinessObjects,

Crystal Reports, Crystal Decisions, Web Intelligence, Xcelsius, and

other Business Objects products and services mentioned herein as

well as their respective logos are trademarks or registered trademarks

of Business Objects Software Ltd. Business Objects is an SAP

company.

Sybase and Adaptive Server, iAnywhere, Sybase 365, SQL

Anywhere, and other Sybase products and services mentioned herein

as well as their respective logos are trademarks or registered

trademarks of Sybase Inc. Sybase is an SAP company.

Crossgate, m@gic EDDY, B2B 360°, and B2B 360° Services are

registered trademarks of Crossgate AG in Germany and other

countries. Crossgate is an SAP company.

All other product and service names mentioned are the trademarks of

their respective companies. Data contained in this document serves

informational purposes only. National product specifications may vary.

These materials are subject to change without notice. These materials

are provided by SAP AG and its affiliated companies ("SAP Group")

for informational purposes only, without representation or warranty of

any kind, and SAP Group shall not be liable for errors or omissions

with respect to the materials. The only warranties for SAP Group

products and services are those that are set forth in the express

warranty statements accompanying such products and services, if

any. Nothing herein should be construed as constituting an additional

warranty.

www.sap.com

sap river rapid development environment how-to guide to create a...how to create a sap fiori starter...

Documents