opensap fiux1 week 4 exercise part 2

openSAP Build Your Own SAP Fiori App in the Cloud Exercise - Week 4 Part 2: Advanced Enhancements Add a View to a Fiori Master Detail App

SAP Web IDE is a browser-based development tool. It accelerates building modern applications for desktop and mobile devices by using the latest UI technologies. SAP Web IDE simplifies the end-to-end application lifecycle for SAPUI5 and Fiori applications: prototyping, development, packaging, deployment, and extensions.

Prerequisites

Before starting with this exercise, you need to finish week 2, week 3, and Part 1 of this week 4 exercise and have a working and tested Fiori Master Detail app project.

Optionally, you can import the provided sample app as your starting point for this exercise:

1. Download MyFirstFioriApp_w4u2_start.zip file from the same openSAP page where you found this exercise

2. Launch SAP Web IDE

3. Right-click on your project explorer called Local and choose New Folder

4. Right-click on the created folder and choose Import Archive

Exercise - Week 4 Part 2: Advanced Enhancements Add a View to a Fiori Master Detail App

2

5. Browse for the provided ZIP file just downloaded (MyFirstFioriApp_w4u2_start.zip) and confirm the import by pressing OK

Note

All screenshots are based on SAP Web IDE version 1.9. Future versions of SAP Web IDE might look different.

Learning Objectives

In this exercise, you will continue to enhance your existing Fiori Master Detail app. This time, you will learn how to add a new Detail View to your app. After selecting an item in your app (in the Master View area), the results will be shown in the Detail View area. In case there are multiple result entries, these sub-items should be displayed in a result table. You will create this new tab, add a table element to its main area, and create a link to a further Detail View page that shows more information for each of these sub-items. You will also learn how to setup the navigation between these views. The Fiori app can then be best described as a Fiori Master-Detail-Detail app by the end of the exercise.

You can perform this exercise (Part 2) by starting with the outcome of Part 1. However, this exercise also works without the steps in Part 1, but it still has as a prerequisite an already created Fiori Master Detail app (as described in the exercise from week 3).


3

The following steps are explained to add and include a new Detail View to your app:

1. Create a new tab and add a table element in your first Detail View

2. Create a new Detail View component

3. Link the new Item Detail View and the first Detail View of your app

4. Add an event to your table in your tab’s main content area

5. Change the Detail View controller for navigating to the Item Detail View

6. Add logic to the new Item Detail Controller and its View

7. Create the navigation back from your Item Detail View to your Detail View

8. Add a Simple Form layout to the Item Detail View

9. Run the application

1. Create a new tab and add a table element in your first Detail View

First, you need to create a new tab for the Detail View of your Fiori app and add a table element into the tab’s main area. Use the code editor to proceed through this exercise.

Note In case something goes wrong in this exercise, you can always re-load the archive project MyFirstFioriApp_w4u2_start.zip as a starting point.

Note For this exercise, the Outline Pane will be used to support you navigation through the code parts. To open the Outline Pane, go to the SAP Web IDE menu View Outline Pane.

1.1 Double-click on the file Detail.view.xml in the project’s file browser to open it in the code editor.

1.2 Search inside the XML-tag section ‘<IconTabBar’ for the last closing tag of the ‘IconTabFilter’ element (the last entry of ‘</IconTabFilter>’).

1.3 Right after this last IconTabFilter closing tag (and before the ‘</items>’ tag), create a new Tab, using the ‘IconTabFilter’ tag, by copying and pasting the following example code.


4

Syntax <IconTabFilter id="filter99" icon="sap-icon://task"> </IconTabFilter>

1.4 Inside the newly created IconTabFilter, insert a new table element that shows the fields {Item} and {Description} in one table row and a column for each field from your data source – all bound to the context of SOItems. Do this by copying and pasting the following code:


5

Syntax <content> <Table id="idItemsTable" itemPress="" items="{path: 'SOItems'}"> <columns> <Column minScreenWidth="Tablet" demandPopin="true"> <Text text="Item" /> </Column> <Column minScreenWidth="Tablet" demandPopin="true"> <Text text="Description" /> </Column> </columns> <items> <ColumnListItem type="Navigation"> <cells> <Text text="{Item}" /> <Text text="{Description}" /> </cells> </ColumnListItem> </items> </Table> </content>

1.5 Click Save to confirm your changes.


6

Note You can run the application (using from the menu Run Run with Mock Data) to view your changes.

2. Create a new Detail View component

Now you will create a new Detail View page. Since Fiori is using the MVC (Model View Controller) model, you may create the different elements manually (View & Controller) or let SAP Web IDE create the whole component for you automatically.

2.1 Select the folder view in your project’s file browser.

2.2 Right-click on the view folder and choose New Component

2.3 You will see now that the file path is your app name and the subfolder view.


7

2.4 Click Next to confirm.

2.5 Choose the right component. In this case, choose SAPUI5 View.


2.7 You can decide what kind of view you want to create. For this exercise, the following parameters are used:

2.7.1 View Type: XML

2.7.2 Namespace: myfioriapp_ns (this is the namespace we previously defined)

2.7.3 View Name: ItemDetail


8

Note

By using a value for the Project Namespace, you assign a kind of group definition to your project files. In this exercise, you must use the same value as the Project Namespace value to indicate that the new view and its controller belong to your app.


2.9 Click Finish to confirm and finish the component creation wizard.

2.10 Check that two new files ItemDetail.view.xml and ItemDetail.controller.js were created in your app project’s folder view.


9

3. Link the new Item Detail View and the first Detail View of your app

Now you will configure the navigation between the Detail View and Item Detail View by configuring routes. The creation of navigation routes between app pages is the basis for making each page accessible via a URL.

3.1 Double-click on the file Component.js in your app project’s folder to open it in the code editor.

3.2 Search for the starting point of the routing object that starts with routing:, go to its nested object called routes: and find another nested object called ‘subroutes:’. There is one route definition there for the ‘Detail’ view.

3.3 Create a second entry under the same subroutes: [ … ] below the existing entry for the ‘Detail’ view that start with { pattern: “{entity}/:tab:” and endd with }

The value of the parameter view in the Controller defines the actual View file to be called during navigation. In this case it’s the new ItemDetail view.

Syntax ,{ pattern : "{entity}/:tab:/{item}", name : "itemDetail", view : "ItemDetail" }


10

Note Between both subroutes entries framed with { … } you must write a comma. The final entry must look like this: subroutes: [{ … }, { … }]

3.4 Click the Save button to confirm your changes to the Component.js file.

4. Add an event to your table in your tab’s main content area

After creating the layout of your new tab and table, you can now define an event handling: you define the transition between a table entry and the resulting output. In this case, it is the navigation from each item in your table to the new Item Detail View that includes more data for each table line item.

With the current SAPUI5 framework, you can define the event handling once in the header part of your table. You don’t need to do this handling for each table row.

4.1 Double-click on the file Detail.view.xml in the folder view of the project’s file browser to open it in the code editor (if it isn’t already open).


11

4.2 Find the opening tag of your table that starts with <Table id= that you created earlier in this exercise inside the new ‘IconTabFilter’.

4.3 You need to create a navigation statement: Add a new table property – a function call itemPress that calls the function onItemDetailPressed. The statement should look like: itemPress=”onItemDetailPressed”

Syntax <Table id="idItemsTable" itemPress="onItemDetailPressed" items="{path: 'SOItems'}">

4.4 Click Save to confirm your changes to the Detail.view.xml file.

5. Change the Detail View controller for navigating to the Item Detail View

In the second part of the event handling, the onItemDetailPressed function raised by the itemPress event needs to have some logic in order to perform an action. This is called binding. The binding, like other actions in the MVC model, is coded in the Controller of the Detail View.


12

5.1 Double-click on the file Detail.controller.js in the view folder of the project to open it in the code editor.

5.2 Add a new function call to implement the table event. In this exercise, it was called onItemDetailPressed.

Syntax onItemDetailPressed: function(oEvent) { var oSelectedItem = oEvent.getParameters().listItem; var sPath = oSelectedItem.getBindingContextPath().substr(1); this.getRouter().navTo("itemDetail",{ from: "detail", entity: "ItemDetail", item: sPath },false); },

Note The new function can be added as a further function call after the getRouter function call.

Note Make sure to add a comma after the closing bracket ‘}’ of function getRouter to separate the existing functions and your new function call.

5.3 Click Save to confirm your changes to the Detail.controller.js file.


13

6. Add some logic to the new Item Detail Controller and its View

When navigating to the Item Detail View, you need to make sure that this view is showing a result. Following the MVC (Model View Controller) model, you need to add code to the Controller and View files of this Item Detail View.

Start with the initiation of the Item Detail View by configuring a binding in the ItemDetail.component.js.

6.1 Double-click on the file ItemDetail.controller.js in the folder view of the project’s file browser to open it in the code editor.

6.2 Check that your ItemDetail.component.js file belongs to your project’s namespace. In this exercise and example, the namespace is myfioriapp_ns.

Therefore, check the first code line in the Item Detail Controller. It should look like:

Syntax sap.ui.controller("myfioriapp_ns.view.ItemDetail", {

6.3 Since the Item Detail Controller consists of the controller declaration only, you need to create a new binding declaration to instantiate the Item Detail View, to attach a route and to bind the view. In this example, the instantiation of the Item Detail View consists of a separate routing determination function. Therefore, consider adding below the onInit function a second function called getRouter

Check the following code to get familiar with the initiation of the new Item Detail View:

Syntax onInit: function() { var view = this.getView(); this.getRouter().attachRouteMatched(function(oEvent) { var sContextPath = new sap.ui.model.Context(view.getModel(),"/" + oEvent.getParameter("arguments").item); view.setBindingContext(sContextPath); },this); }, getRouter : function () { return sap.ui.core.UIComponent.getRouterFor(this); }


14

6.4 Click Save to confirm your changes to the ItemDetail.controller.js file.

6.5 As a second task, double-click on the file ItemDetail.view.xml in the folder view of the project’s file browser to open it in the code editor.

6.6 Check that the parameter controllerName corresponds to the project’s namespace, too. In this example, the namespace is myfioriapp_ns.

Therefore, the full parameter in the Item Detail View file must look like:

Syntax controllerName="myfioriapp_ns.view.ItemDetail"


15

6.7 Click Save to confirm your changes to the ItemDetail.view.xml file.

7. Create the navigation back from your Item Detail View to your Detail View

Finally, you need to be able to navigate back from the Item Detail View to the table on the previous Detail View. The navigation call is triggered in the tag <Page as an event on the Item Detail View XML file. The called function of this event will be implemented in the controller of the item Detail View.

7.1 Double-click on the file ItemDetail.view.xml in the folder view of the project’s file browser to open it in the code editor (if it isn’t already open).

7.2 Go to the starting tag of <Page and define additional parameters for the navigation.

7.2.1 To display the standard back-arrow button, add the parameter and value:

showNavButton=”true”

7.2.2 To raise the event and call a function that handles the navigation back to the Detail View page, add the parameter and value:

navButtonPress=”onNavBack”

Syntax <Page title="Item Detail" navButtonPress="onNavBack" showNavButton="true">


16


7.4 Double-click on the file ItemDetail.controller.js in the folder view of the project’s file browser to open it in the code editor (if it isn’t already open).

7.5 Create a new function that uses the router functionality of SAPUI5 to determine the right view in your app to navigate to. In this example, the name of the function was defined as onNavBack.

Syntax , onNavBack: function(){ this.getRouter().myNavBack("detail"); }


17

Note Be sure to add a comma after the closing bracket of function getRouter to separate the existing functions and your new function call.

7.6 Click Save to confirm your changes to the ItemDetail.controller.js file.

8. Add a Simple Form layout to the Item Detail View

In the Item Detail View, you need to create at least a basic layout with some elements to display additional details for the previously selected item from your table. In this exercise, the SimpleForm element is used.

The SimpleForm element does not belong to the sap.ui.core library that is the default library declared for all layout elements you have used so far. It belongs to the library sap.ui.layout.form and must be declared as an additional xmlns (XML namespace) property.

Note On the SAPUI5 Explored page, you can search for each element. The SimpleForm belongs to the layout elements found here:

https://sapui5.netweaver.ondemand.com/sdk/explored.html#/entity/sap.ui.layout.form.SimpleForm/samples

Inside the SimpleForm element, you will add fields like Item, Material, and Description.


18

8.1 Double-click on the file ItemDetail.view.xml in the folder view of the project’s file browser to open it in the code editor.

8.2 Add a new xmlns property after an existing xmlns property in the file. The property definition consists of the parameter xmlns followed by the addressed tag name, e.g. form, that should use the library, e.g. sap.ui.layout.form. Later in the tag definition, the library elements from sap.ui.layout.form will be used when the tag <form…> is interpreted.

Syntax xmlns:form="sap.ui.layout.form"

8.3 Add inside the tag <Content the layout element <form:SimpleForm

8.4 Add inside the tag <form:SimpleForm some content, like:

8.4.1 A title like Item Details

8.4.2 Label and Value of Item

8.4.3 Label and Value of Material

8.4.4 Label and Value of Description


19

Syntax <form:SimpleForm minWidth="1024"> <core:Title text="Item Details"/> <Label text="Item" /> <Text text ="{Item}" /> <Label text="Material" /> <Text text ="{Material}" /> <Label text="Description" /> <Text text ="{Description}" /> </form:SimpleForm>


9. Run the application

Finally, the application is ready to run without errors. To view the changes in the application, it must be restarted if it was already running in a browser window.

9.1 Select the entry index.html in the projects file browser.

9.2 Click the Run button to open a new browser tab/window and run your Fiori app with back-end data.

9.3 In your app, open the new tab and select an entry to navigate to the Item Detail View.


20

9.4 Check the Item Detail View and navigate back to check it, too.

9.5 To test again with your mock data, go back to SAP Web IDE and right-click on the index.html entry in the projects file browser and go to the menu Run Run with Mock Data to open a new browser tab/window. Congratulations, you have completed Part 2 of the Week 4 exercise!

www.sap.com

© 2015 SAP SE or an SAP affiliate company. All rights reserved. No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP SE or an SAP affiliate company. SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP SE (or an SAP affiliate company) in Germany and other countries. Please see http://www.sap.com/corporate-en/legal/copyright/index.epx#trademark for additional trademark information and notices. Some software products marketed by SAP SE and its distributors contain proprietary software components of other software vendors. National product specifications may vary. These materials are provided by SAP SE or an SAP affiliate company for informational purposes only, without representation or warranty of any kind, and SAP SE or its affiliated companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP SE or SAP affiliate company 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. In particular, SAP SE or its affiliated companies have no obligation to pursue any course of business outlined in this document or any related presentation, or to develop or release any functionality mentioned therein. This document, or any related presentation, and SAP SE’s or its affiliated companies’ strategy and possible future developments, products, and/or platform directions and functionality are all subject to change and may be changed by SAP SE or its affiliated companies at any time for any reason without notice. The information in this document is not a commitment, promise, or legal obligation to deliver any material, code, or functionality. All forward-looking statements are subject to various risks and uncertainties that could cause actual results to differ materially from expectations. Readers are cautioned not to place undue reliance on these forward-looking statements, which speak only as of their dates, and they should not be relied upon in making purchasing decisions.

opensap fiux1 week 4 exercise part 2

Documents