creating a fiori starter application with an additional view
TRANSCRIPT
SAP River Rapid Development Environment How-To Guide
Provided by Customer Experience Group
Creating a Fiori Starter Application with an Additional View Applicable Releases: SAP River Rapid Development Environment 1.0 Version 1.0 - August 2014
Creating a Fiori Starter Application with an Additional View
2
Document History
Document Version Authored By Description
1.0 Customer Experience
Group
First release of this guide
Creating a Fiori Starter Application with an Additional View
3
TABLE OF CONTENTS
1. Business Scenario ............................................................................................................................... 4
2. Background Information .................................................................................................................... 4
3. Prerequisites ...................................................................................................................................... 4
4. Step-by-Step Procedure ..................................................................................................................... 5 4.1 Creating a Fiori Starter Application ...................................................................................................... 5 4.2 Add a table to the Details view ........................................................................................................... 11 4.3 Adding the additional view ................................................................................................................. 14
Creating a Fiori Starter Application with an Additional View
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. 2. BACKGROUND INFORMATION
In this How-To Guide we will start off by creating a new Fiori Starter Application based on a service provided by the Netweaver Geteway Consumption System, ES1. Access to this system can be obtained by referring to the following link. http://scn.sap.com/docs/DOC-40986 We will then add a table to the details view of the application and complete the application by adding an additional view. 3. PREREQUISITES
To connect to your SAP River RDE system, open the browser and enter the URL of your system.
Creating a Fiori Starter Application with an Additional View
5
4. STEP-BY-STEP PROCEDURE
This is the sequence of steps:
1) Create a Fiori Starter Application 2) Add a table to the Details view 3) Add an additional view
4.1 Creating a Fiori Starter Application In this exercise we will create a Fiori Starter Application project with the service /sap/opu/odata/sap/SALESORDERXX which is available on the ES1 system.
1. Open SAP River RDE
2. Select the highest level in your project explorer (the Local root)
Creating a Fiori Starter Application with an Additional View
6
3. Choose File New Project
4. Provide a new for the project and choose on the down arrow at the bottom of the page to go to the next screen.
5. Choose the template SAP Fiori Starter Application and choose on the down arrow at the bottom of the page to go to the next screen.
Creating a Fiori Starter Application with an Additional View
7
6. Choose the Catalog button and then choose your connection to the ES1 system. This should prompt you to log into the system. Provide your credentials and then select the service SALESORDERXX. Choose the OK button and then the down arrow to proceed to the next step.
Creating a Fiori Starter Application with an Additional View
8
7. In the template Customization step provide the following values for the Master Section and the select the Detail Section
8. Provide values for the Detail Section and then choose the down arrow to proceed.
Creating a Fiori Starter Application with an Additional View
9
9. Choose the Finish button to complete the wizard.
10. Your project has been created
11. To check if the Fiori Starter app is running correctly, select the index.html file and click on the button Run
Creating a Fiori Starter Application with an Additional View
10
12. After logging into the system you should now see…
Creating a Fiori Starter Application with an Additional View
11
4.2 Add a table to the Details view e the menu option File -> New -> Project
1. Double click on the Detail.view.xml within the view folder to open the file
2. Within the file you should find an empty space between the closing of the IconTabBar and the opening of the footer.
3. Between these two tags add a Table setting the items property to SOItems as shown.
Creating a Fiori Starter Application with an Additional View
12
4. Within the table add the columns property and then add three column(s) as shown.
5. Below the closing of the columns add a ColumnListItem with the three Text fields in the cells property as shown. Save the file after completing your changes.
Creating a Fiori Starter Application with an Additional View
13
6. Test your app by choosing the Run button or if the preview is still open you can just choose the Refresh button. This should result in the app displaying a table within the details view, which displays the Sales Order Items with each selection of a Sales Order Header.
Creating a Fiori Starter Application with an Additional View
14
4.3 Adding the additional view tion File -> New -> Project
1. With the view folder selected, choose the menu option File -> New -> Component
2. The Add a Component step should have the location already set correctly, choose the down arrow to proceed.
Creating a Fiori Starter Application with an Additional View
15
3. Choose the template Empty Mobile XML View, found under SAPUI5 View, and then choose the down arrow to proceed
4. Provide the name DetailsExpanded and choose the down arrow to proceed
5. Choose the Finish button to complete the wizard.
Creating a Fiori Starter Application with an Additional View
16
6. Your project should now resemble
7. To make the view navigable it is required to add a route into the applications Component.js. Open the Component.js and scroll down to approximately line 24 where you should find the start of the routing object. Within the routing object you will find the nested object routes which also has a nested object subroutes. The existing subroute is used to display the Detail view. To display the DetailsExpanded view, we can copy the existing Detail view route and paste it below the Detail route, making sure to separate each object by a comma. After pasting it, change the values of the three properties from Detail to DetailsExpanded as shown below. Save the file once completed.
Creating a Fiori Starter Application with an Additional View
17
8. Using the table that we added in the previous section we can create an event to navigate us to our new view. Within the Detail.view.xml scroll down to the ColumnListItem of the table and add the press and type properties as shown below. The press property value will be a function that we will use to process the navigation. Save your changes.
9. Open the Detail.controller.js and add the goToExpDetail function with the following code. In this screenshot it was added below the function handleNavButtonPress. Notice that a comma was added on line 46 to separate the functions. Save your changes.
10. Within the Detail.controller.js scroll to the onInit function and copy the code of the function.
11. Open the DetailsExpanded.controller.js and uncomment the onInit function. Make sure to either keep the trailing comma commented out or remove it. Paste the code that was copied from the Detail.controller.js within the onInit function. Change the conditional from
oEvent.getParameter("name") === "Detail"
to
oEvent.getParameter("name") === "DetailsExpanded"
This should result in the following…
Creating a Fiori Starter Application with an Additional View
18
12. Open the DetailsExpanded.view.js. Within the view we will add a SimpleForm to display some additional fields from the SOItems. Because the SimpleForm is not within the default namespace or any of the predefined ones it will first be necessary to add this by utilizing the xmlns property as shown.
13. Finally add a SimpleForm to display some additional fields from the SOItems.
14. Making sure the save all of your changes, test the application by choosing the index.html and choosing Run or by using the Refresh button if the application preview is already opened. You should now see a navigation arrow on the table, which indicates that each item can be selected allowing us to navigate to the additional view.
Creating a Fiori Starter Application with an Additional View
19
Creating a Fiori Starter Application with an Additional View
20
© 2012 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