Hands On SCP Instructions V2
User Manual: Pdf
Open the PDF directly: View PDF .
Page Count: 46
Download | |
Open PDF In Browser | View PDF |
Develop SAP Business One extensions on the SAP Cloud Platform TABLE OF CONTENTS PREREQUISITES .............................................................................................................................................. 4 i. Download and Install Development Tools ..................................................................................... 4 ii. Create a SAP Cloud platform trial account.................................................................................... 5 iii. Activate Web IDE Full Stack service .............................................................................................. 6 iv. SAP API Business Hub .................................................................................................................... 9 STEP 1: CREATE A SAP FIORI APP CONNECTING TO SAP BUSINESS ONE SERVICE LAYER VIA SAP API BUSINESS HUB ............................................................................................................................... 10 i. Create a SAPUI5 Application......................................................................................................... 10 ii. Add a Data Source to the SAPUI5 Application ............................................................................ 13 iii. Create a Model ................................................................................................................................ 15 iv. Add controls to the View1 view. ................................................................................................... 17 Add a sap.m.Table control ............................................................................................................................ 17 Add a Search Field control to the sap.m.Table ........................................................................................... 22 v. Add a second view called Details ................................................................................................. 26 Create a Details view. ..................................................................................................................................... 26 Add an Object Header control....................................................................................................................... 27 vi. Define navigation between View1 and Details. ........................................................................... 30 STEP 2: CREATE A NODEJS APP ................................................................................................................ 32 STEP 3: DEPLOY THE NODEJS APP INTO SAP CLOUD FOUNDRY ........................................................ 33 STEP 4: CONSUME THE NODEJS APP FROM THE SAP FIORI APP ........................................................ 37 i. Add a Button “Add Freight” to the Details view. ........................................................................ 37 ii. Implement the Button business logic calling the NodeJS server side and Service Layer. ... 39 2 The objective of this hands on is to put in practice how to develop SAP Business One extensions on SAP Cloud Platform. The exercise will be composed by - Step 1: Create a Fiori application connecting to SAP Business One Service Layer via SAP API Business Hub - Step 2: Implement a server side NodeJS application - Step 3: Deploy the NodeJS application to SAP Cloud Foundry - Step 4: Consume the server side NodeJS application from the Fiori application This hands-on exercise will require several steps, please follow them in the proposed order as each step is counting on the precedent steps. 3 PREREQUISITES i. Download and Install Development Tools Download and install git version control on your system from the following link https://git-scm.com/downloads We will also make use of SAP Cloud Platform Cloud Foundry Environment. To do so, we need the Cloud Foundry command line interface (CLI) You can download it and install if the CF CLI for your operating system on. https://github.com/cloud foundry/cli#downloads 4 ii. Create a SAP Cloud platform trial account The exercises proposed in this hands on are implemented on top of the SAP Cloud Platform. If you have already a trial SAP Cloud Platform account, you can skip this step. To create a trial SAP Cloud Platform account, go to the following link: Explanation Screenshot To create a trial SAP Cloud Platform account, go to the following link: https://account.hanatrial.ondemand. com Press the Register button Enter all your details Accept the terms and conditions by checking both check boxes and press “Register”. 5 iii. Activate Web IDE Full Stack service We will use Web IDE Full Stack for the creation and implementation of our application. Web IDE is offered as a service on the SAP Cloud Platform. To activate Web IDE Full Stack service please follow the steps here below, if you already have Web IDE Full Stack service active in your account please skip this step. Explanation Screenshot Open your trial SAP Cloud Platform account from the following link: https://account.hanatrial.ondema nd.com Press the Log On button if you are not automatically logged in After login if you are proposed between Cloud Foundry Trial and Neo Trial please choose Neo Trial. 6 Explanation Screenshot Select the Services icon on the left side bar. Enter Web in the search edit text. Click on the SAP Web IDE Full Stack box. Click Enable. This may take a few minutes. 7 Explanation Screenshot Once Enabled select the link Go to Service to open Web IDE Full Stack. Web IDE opens with an empty Workspace unless you already developed applications with Web IDE in the past. 8 iv. SAP API Business Hub SAP API Business Hub is the central catalog of all SAP and partner APIs for developers to build sample apps, extensions and open integrations with SAP. SAP Business One has exposed 3 packages as of today: - SAP Business One – Sales - SAP Business One – Business Partners - SAP Business One - Inventory Many other packages will follow very soon, stay tuned. Please go to the following link for more details: https://api.sap.com 9 STEP 1: CREATE A SAP FIORI APP CONNECTING TO SAP BUSINESS ONE SERVICE LAYER VIA SAP API BUSINESS HUB The objective of this first exercise is to develop a SAP Fiori app using the SAP UI5 template. Service Layer provides OData v4 support since SAP Business One 9.3 PL04 version for SAP HANA. In this exercise, we will use the Service Layer APIs exposed via the SAP API Business Hub, please refer to the prerequisites section SAP API Business Hub for more details. Web IDE supports OData v4 on some templates like SAP Fiori Worklist Application OData v4 and SAPUI5. More templates will support OData v4 gradually. In this exercise, we will use the SAPUI5 template. i. Create a SAPUI5 Application Explanation Screenshot Open SAP Web IDE Full Stack. Check the prerequisites sections “Create a SAP Cloud platform trial account” and “Activate Web IDE Full Stack service” if you don’t know how to open WebIDE Full Stack. Right click on your Workspace and select New -> Project from Template. 10 Explanation Screenshot Select the SAPUI5 Application template. Press Next. If you don’t see this template, change the Category to All categories. Enter a Project Name. Enter a Namespace. Press Next. Keep the Initial View Details with the default values. Press Next. 11 Explanation Screenshot Press Finish to confirm the creation of the SAPUI5 template. 12 ii. Add a Data Source to the SAPUI5 Application Explanation Screenshot In Web IDE select your project and right click to get the menus. Select New -> OData Service. Select SAP API Business Hub in the Sources (left side of the screen). Select the “SAP Business One – Sales” API package from the dropdown control. You might be prompted to enter your SAP Community User Name and Password. Enter your credentials and press Log In. From the available APIs presented select Orders and make sure the “Service: Orders selected” blue message is shown at the top of the Data Connection tab. Press Next. 13 Explanation Screenshot In the Model Selection step keep the radio button “Use default model” to create a default model associated to our OData Service. Press Next. Press Finish. Open the file “webap/manifest.json” inside your application and select the Code Editor. Search for the element “dataSources”/”Orders” and change the “odataVersion” value inside “settings” to “4.0”. 14 iii. Create a Model The generated model by the OData service wizard was generated for OData version 2.0. As our SAP Business One APIs are OData version 4.0 the easiest is to remove the autogenerated Model and create a new one after we changed the OData service OData version to 4.0. Explanation Screenshot Open the manifest.json file, select Descriptor Editor (bottom of the screen) and Models tab. Select the Default model and press the button to delete it. Press the + button to add a new Default model. Check the box “Set as default model for the application”. There is no need to enter a Model Name as we checked the default model option. Select Orders as the Model Source. Press OK. 15 Explanation Screenshot A new Default model will be shown in the Models tab pointing to the API Hub URI for OData v4 Data Source. Press Save button to your changes. 16 iv. Add controls to the View1 view. Add a sap.m.Table control Explanation Screenshot Open the view folder. Open the View1.view.xml file with the Layout Editor. Select the Outline tab. Select View.view.xml. Click on the button to select the Entity Set associated to our view. 17 Explanation Screenshot Check the second option Define dummy entity set… and choose the /Orders Entity Set. Press OK. Once back to the Layout Editor the /Orders entity should be shown. Press Save button. 18 Explanation Screenshot Expand sap.m.Page. Right click on content and select Add. Enter table to filter the controls shown in the list. Click on the Table control so it will be added to our view. On the table created edit each sap.m.Table -> columns -> sap.m.Column -> header -> sap.m.Label Text Property: Change Header 1 by DocEntry. Change Header 2 by CardCode. Change Header 3 by DocTotal. 19 Explanation Screenshot Select each one of the items -> sap.m.ColumnListItem -> cells -> sap.m.Text cell to bind them to their corresponding Orders properties. On the Text property click the Binding button on the right side of the Text property. Delete the default Expression string. In the Search for data field enter the name of the Orders property DocEntry. Double click on the field name so it will be copied to the Expression string between curly brackets. Repeat this step for CardCode column. For the DocTotal column we will add 2 properties: DocTotal DocCurrency We will then search and add first the DocTotal and afterwards search and add the DocCurrency. Press Save button on the View1.view.xml file. 20 Explanation Screenshot Your View1.view.xml layout should look like this at this point. Click on the green arrow to run your application. A new tab opens showing your application. You can see the Table is automatically filled with the list of Orders available in the API Business Hub sandbox running SAP Business One. 21 Add a Search Field control to the sap.m.Table Explanation Screenshot Open the View.view.xml file with the Layout Editor. Go to the Outline tab and select sap.m.Table -> headerToolbar. Right click to get the context menus and select Add. Click on the Toolbar proposed control. 22 Explanation Screenshot Go to the created sap.m.Toolbar -> content element and right click to select the Add menu. Enter SearchField to filter the controls. Click on the Search Field proposed control. Select the sap.m.SearchField control in the Outline tab. Select the Events tab in the right side of the screen. On the Search event click on the button and select New Function option. 23 Explanation Screenshot Enter onSearch as function name that will be called when the Search button will be pressed. Press OK. Press Save. A new function with that name will be created in the View.Controller.js. Open the View1.controller.js file. Copy the code from https://github.com/B1SA/B 1_SCP_HandsOn/blob/ma ster/snippets/View1.controll er.js_onSearch.js into your onSearch method so it looks like here. This code filters the Orders with DocEntry greater or equal than the value entered in the SearchField. Press Save. Run your application. 24 Explanation Screenshot Check that the SearchField filters the table with Orders having a DocEntry higher than the entered value. 25 v. Add a second view called Details Create a Details view. Explanation Screenshot Right click on your application and select New -> SAPUI5 View. Keep the default values for View Type and Namespace. Enter the name of the new View: Details. Press Next. Press Finish to confirm the creation of the Details view. 26 Explanation Screenshot Two files are created: Details.view.xml Details.controller.js. Add an Object Header control. Explanation Screenshot Open the Details.view.xml file with the Layout editor. Go to the Outline tab. Right click on Details.view.xml -> sap.m.App -> sap.m.Page -> content and select Add. 27 Explanation Screenshot Enter objectheader to search for the Object Header control. Click on the Object Header proposed control. Select the created sap.m.ObjectHeader element in the Outline tree. Go to the Properties tab in the right side of the screen. Click one by one on the Data Binding icon for the properties: Title Intro Number Number Unit A new dialog will be presented for each one of the properties. Search for the Orders Data Field to be assigned to each property: Title -> CardCode Intro -> DocEntry Number -> DocTotal Number Unit -> DocCurrency and double click on the proposed list to get it into the Expression string. 28 Explanation Screenshot Note: Do not select BusinessPartners/CardC ode for the CardCode property. Press Save button. The sap.m.ObjectHeader should look like this at this point. 29 vi. Define navigation between View1 and Details. Explanation Screenshot From our main View1 table we want to navigate to Details view when the user clicks on a row. Open View1.view.xml file with Layout Editor. Select Outline tab View1.view.xml -> sap.m.App -> sap.m.Page > content -> sap.m.Table -> items -> sap.m.ColumnsListItem. Select the Events tab. Click on the icon. Select Navigate To menu. Select Propagate current context on the Data Binding combo box. Select Details on the View combo box. Press OK. Press Save to save the View1.view.xml changes. The selected Order data from the View1 will be bound to the Details view. 30 Explanation Screenshot From our Details view we want to navigate back to our main View1 when the user press on the Navigate back button. Open the Details.view.xml file with the Layout Editor. Go to the Outline tab and select sap.m.Page. On the Properties tab scroll down to see the Show Nav Button property and change its value to true. Go to the Events tab. On the Nav Button Press event click on the icon . Select the option Navigate To. Select View1 on the combo box. We will navigate back to View one when the Nav back button will be pressed. Click on the Save button. Test your app to see navigation is working fine between View1 and Details view. Congratulations! You have created your first SAP UI5 application connecting to SAP API Business Hub 31 STEP 2: CREATE A NODEJS APP In this step we are going to implement the backend of our application. It will contain a simple business logic to calculate freight costs from different providers and consume 3rd Party services. The application is written in NodeJS and the source code is available on GitHub. Explanation Screenshot Once git is installed (according to the pre requisites), open your system terminal (cmd, bash..) Navigate to a specific folder where you will download a sample application. Pay attention what folder is it, we will access it later Execute the following command to clone our solution backend repository: $ git clone https://github.com/B1SA/Frei ghtCalculator.git You can see the app code on your file explorer: Edit the File manifest.yml and set a unique name for your application. E.eg FreightCalc32 STEP 3: DEPLOY THE NODEJS APP INTO SAP CLOUD FOUNDRY In this step, we are going to deploy our Freight Calculator app to SAP Cloud Platform Cloud Foundry. Explanation Screenshot First, we need to activate the SAP Cloud Platform Cloud Foundry Environment. On the SAP Cloud Platform Dashboard click on the HOME option First, we need to activate the SAP Cloud Platform Cloud Foundry Environment. From the SAP CP Home Screen, click on Cloud Foundry Trial Select the Trial Region that most suits you. And Click on OK 33 Explanation Screenshot This will initialize your Cloud Foundry Trial and create a DEV space (where the solutions will be deployed). Go Ahead and access your space. Your space is created and ready to deploy your app. We now need your environment endpoint to be able to push our app. Click on the trial link And then on Overview option in the menu Select and copy your API Endpoint. E.g. https://api.cf.eu10.hana .ondemand.com With the CLI installed (according to the pre requisites), open your system terminal and navigate to the folder of the backend app cloned on STEP 2 of this guide From that folder, login to Cloud foundry using the command cf login -a e g. $ cf login -a api.cf.eu10.hana.ondeman d.com When prompted provide your SAP Cloud Platform email and password 34 Explanation Screenshot Now all you have to do is push your app to the SAP Cloud Platform Cloud Foundry by using the command: cf push This process will read the manifest.yml to name your application and also upload and deploy all the artefacts in a container in the Cloud Foundry Environment. Once the Process finishes, you can see your app URL: This application makes use of a 3rd Party service called Shippo to calculate shipping costs. In order to consume their services, we need an API KEY. The Instructors of this hands-on session will provide a set of keys you can use in the next step. However, you can also get your own FREE test key on their website https://goshippo.com/ Best practices of cloud development (see https://12factor.net/config) suggests that any kind of configuration (such as keys) should not be part of the codebase but set as environment variables. And that is easily done with Cloud Foundry Back to the terminal, set the Environment Variable SHIPPO_KEY to a valid API Key with the following command cf set-env You can test the app with a test page on the app URL Congratulations! You have implemented and deployed your first Cloud Foundry application on SAP Cloud Platform! 36 STEP 4: CONSUME THE NODEJS APP FROM THE SAP FIORI APP i. Add a Button “Add Freight” to the Details view. Explanation Screenshot Open the Details.view.xml file with the Layout Editor. On the Outline tab right click on the sap.m.App -> pages -> sap.m.Page -> footer element and select Add. Select the Toolbar control proposed. 37 Explanation Screenshot On the Outline tab right click on sap.m.Toolbar -> content and select Add. Enter hbox in the Add Control to: content new dialog. Select the proposed HBox control. On the Outline tab right click on sap.m.Toolbar -> content and select Add. Enter button in the Add Control to: content dialog. Select the Button control. On the Outline tab select the sap.m.Button. On the Properties tab change the Text property by Add Freight. 38 ii. Implement the Button business logic calling the NodeJS server side and Service Layer. Explanation Screenshot Select Outline tab, sap.m.Button. Open Events tab. Click on the Press event icon and select New Function. Enter onAddFreightPress as the function name. This function will be called when the event Press is fired on the AddFreight button. Open the Details.controller.js file and scroll down to the bottom of the file. A new empty function called onAddFreightPress has been automatically created. Before implementing this function lets add some definitions to the Details.controller.js file. Open the Details.controller.js file. Remove the code at the beginning of the file until “use strict”; as shown here in the first screen. Replace that code from by the one shared at https://github.com/B1SA/B 1_SCP_HandsOn/blob/ma ster/snippets/Details.contro ller.js_definitions.js as 39 Explanation Screenshot shown in the second screen. Let now implement the function onAddFreightPress. 1. When the user clicks on the AddFreight button we call the server side NodeJS to get freight options. Replace the URL to the freight calculator by your backend application URL (code marked in red in the screen capture). In case of success we call the function openFreightDialog. In case of error we simply show a MessageToast. You can get this code from https://github.com/B1SA/B 1_SCP_HandsOn/blob/ma ster/snippets/Details.contro ller.js_onAddFreight.js. PS: The code contains more functions than this one, please copy the full set of functions. We will explain each one of the functions in the coming steps. On the Details.controller.js scroll and search for the function openFreightDialog. This function opens a new Dialog showing the freight options returned by the server side. This function will use an xml fragment to design the freight options dialog. Edit this function and change the pointer to the xmlfragment to match the name of your namespace and SAPUI5 application (you can get this information from the beginning of your Details.controller.js file. In my case it is 40 Explanation Screenshot “sa.B1SL_SUMMIT_2018. view.Dialog”. Let’s add the Fragment required to show the Dialog. Right click on view folder and select New->File menu. Give the name Dialog.fragment.xml to the new file. Press OK. Download the Dialog.fragment.xml file from https://github.com/B1SA/B 1_SCP_HandsOn/blob/ma ster/snippets/Dialog.fragme nt.xml. Copy the code inside your Dialog.fragment.xml file. You can notice in that file contains the controls of the Dialog. Also, that file contains 3 callback functions will be called for the events: search confirm cancel We will implement those functions in our Details.controller.js file. 41 Explanation Screenshot Open the Details.controller.js file. The handleFreightDialogSear ch (code copied already earlier) is called when the user enters data to filter the list of freight options. The filter will be based on the provider property. The handleFreightDialogConf irm function is called when the user selects one of the freight options proposed by the Dialog. This function calls the function UpdateSO to update the Order via Service Layer API. The handleFreightDialogClos e function is called when the user closes the Dialog without selecting a freight option. A MessageToast will show to the user the message “No Provider selected.” 42 Explanation Screenshot The updateSO function calls SAP Business One Service Layer via the SAP API Business Hub sandbox. We do an ajax call to the destination /apihub_sandbox/ automatically created when we added the Data Source pointing to the SAP API Business Hub. Then we specify the DocEntry of the Order to be updated with a PATCH request. In case of success we show a MessageToast message “SL success”. In case of error we show a MessageToast message “SL error”. Test your application. Filter the Orders table with DocEntry higher than 1211. Please follow directions from instructors so you only update a specific Order DocEntry to avoid conflicts between hands-on participants. 43 Explanation Screenshot Check the Order DocTotal before adding the freight costs. Select one of the providers. 44 Explanation Screenshot Check the Order DocTotal amount is updated after you select a freight provider based on the provider costs. You will also see the success message if the update of the Order is successful. Congratulations! You have just implemented your first full stack loosely coupled SAP Business One extension! 45 www.sap.com/contactsap © 2018 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. The information contained herein may be changed without prior notice. 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 or its affiliated companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP 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 docume nt 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, and they should not be relied upon in making purchasing decisions. 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. All other product and service names mentioned are the trademarks of their respective companies. See http://www.sap.com/corporate-en/legal/copyright/index.epx for additional trademark information and notices.
Source Exif Data:
File Type : PDF File Type Extension : pdf MIME Type : application/pdf PDF Version : 1.7 Linearized : No Page Count : 46 Language : en-US Tagged PDF : Yes XMP Toolkit : 3.1-701 Creator : MARTINEZ GEA, Maria Trinidad Creator Tool : Microsoft Word Create Date : 2018:04:06 10:35:20+00:00 Modify Date : 2018:04:06 10:35:20+00:00 Document ID : uuid:B89110A0-8F89-4B07-A7D1-11863C1373BA Instance ID : uuid:B89110A0-8F89-4B07-A7D1-11863C1373BA Author : MARTINEZ GEA, Maria TrinidadEXIF Metadata provided by EXIF.tools