Extensions On SAP Cloud Platform - Cloud Foundry Environment

Extension GuideSAP Predictive Maintenance and Service, cloud editionDocument Version: 1.0 – 2019-10-25CUSTOMERExtensions on SAP Cloud Platform - Cloud FoundryEnvironment

Typographic ConventionsType StyleDescriptionExampleWords or characters quoted from the screen. These include field names, screen titles,pushbuttons labels, menu names, menu paths, and menu options.Textual cross-references to other documents.ExampleEmphasized words or expressions.EXAMPLETechnical names of system objects. These include report names, program names,transaction codes, table names, and key concepts of a programming language when theyare surrounded by body text, for example, SELECT and INCLUDE.ExampleOutput on the screen. This includes file and directory names and their paths, messages,names of variables and parameters, source text, and names of installation, upgrade anddatabase tools.ExampleExact user entry. These are words or characters that you enter in the system exactly asthey appear in the documentation. Example Variable user entry. Angle brackets indicate that you replace these words and characterswith appropriate entries to make entries in the system.EXAMPLEKeys on the keyboard, for example, F 2 or E N T E R .CUSTOMER2 2019 SAP SE or an SAP affiliate company. All rights reserved.Extensions on SAP Cloud Platform - Cloud Foundry EnvironmentTypographic Conventions

Contents11.11.21.3Introduction . 4ACF Extensions. 5Standalone Extensions . 13Adding Application to Custom Fiori launchpad . 1922.12.2Destinations . 23Working with Destinations for Local Development .23Working with Destinations for CF Deployment .24Extensions on SAP Cloud Platform - Cloud Foundry EnvironmentContentsCUSTOMER 2019 SAP SE or an SAP affiliate company. All rights reserved.3

1IntroductionThis guide will take you through the steps you need to follow to create new extension applications in the SAPCloud Platform - Cloud Foundry (CF) environment. For extension development, customers can use the Web IDEservice from the SAP Cloud Platform - Neo (Neo) environment until the service is available in the CF environment.Create a new Neo Subaccount (Frankfurt Region) if it has not already been created and enable the Web IDE in thatsubaccount:This document will cover two types of extensions: Asset Central Foundation (AC) Extensions - extensions for Asset Central (AC) UI applications Standalone Extensions – new SAPUI5 applicationsCUSTOMER4 2019 SAP SE or an SAP affiliate company. All rights reserved.Extensions on SAP Cloud Platform - Cloud Foundry EnvironmentIntroduction

Before we proceed with extension development, it is important that we also configure the Cloud Foundry space wewant to use for local testing. To configure the Cloud Foundry space, navigate to the preferences tab in Web IDEand select the Cloud Foundry section. In the Cloud Foundry section, configure the relevant space:1.1ACF ExtensionsAsset central foundation Extensions is only supported for following applications: Equipment Models Locations Spare Parts Systems Failure ModesYou need to follow the following steps for local testing and Cloud Foundry deployment of Asset CentralFoundation extensions:1.Create Destination in Neo Account: the ACF extensions plugin enables you to extend Asset CentralFoundation applications. To be able to access the AC extension plugin, you need to create a plugin destinationin your Neo Account where Web IDE is enabled. Fill in the configuration, as below:1.Name: you can give any name to the destination2.Type: HTTP3.Description: Give any logical description to the destination.4. URL: fapps.eu10.hana.ondemand.com5.Proxy Type: Internet6. Authentication: NoAuthernticationIn addition to the above configuration, add the following properties:7.WebIDEEnabled: true8. WebIDEUsage: featureExtensions on SAP Cloud Platform - Cloud Foundry EnvironmentIntroductionCUSTOMER 2019 SAP SE or an SAP affiliate company. All rights reserved.5

2.Turn on AC SDK Extension: Open your Web IDE and navigate to the Preferences tab. In the Preferences tab,go to the Extensions settings and search for AC SDK. Turn on the AC SDK extension:Note: Please do not forget to save once you have turned on the AC SDK.CUSTOMER6 2019 SAP SE or an SAP affiliate company. All rights reserved.Extensions on SAP Cloud Platform - Cloud Foundry EnvironmentIntroduction

3.Create AC Extension: Navigate to the Development tab in Web IDE and open the wizard for Project fromTemplate (File - New - Project from Template). In the wizard, select Cloud Foundry Environment and ACExtension Category and proceed with the AC Extensions in CF template:4. Template Configurations: Enter all the required information. Select the application you want to extend fromthe Original Application dropdown. Give the view name for the new section in the field Section Name. Checkthe ASPM Enabled checkbox only if you are ASPM customer.5.Folder Structure Created: Once the wizard is finished, it will create the following three modules:1.App router module: this is the application router for local development and provides you with the entrypoint to the local SAP Fiori launchpad.2.UI module: this will contain all your source code.Extensions on SAP Cloud Platform - Cloud Foundry EnvironmentIntroductionCUSTOMER 2019 SAP SE or an SAP affiliate company. All rights reserved.7

3.UI deployer: this module will deploy all the source code from the UI module to the central HTML5repository.6. Ready for Local Development: implementation for the local section has been completed. You can run theproject by right-clicking on the ‘ui’ module and choosing Run as SAP Fiori launchpad Sandbox. You will be ableto see the new section in the object page.CUSTOMER8 2019 SAP SE or an SAP affiliate company. All rights reserved.Extensions on SAP Cloud Platform - Cloud Foundry EnvironmentIntroduction

7.Add your Implementation under UI Module: you can add your implementation in the ‘NewSection’ view andthe controller is created.8. Cloud Foundry Deployment: Once your local testing has been done and the application is ready for CloudFoundry deployment, some changes are required before the UI application can be deployed on the CloudFoundry space. Make the following changes:Extensions on SAP Cloud Platform - Cloud Foundry EnvironmentIntroductionCUSTOMER 2019 SAP SE or an SAP affiliate company. All rights reserved.9

1.2.Add the navigation property for the manifest file. Open the manifest file and switch to ‘Descriptor Editor’and add the relevant navigation properties (you may have to change the sap-app version to “1.2.0” toenable the Navigation tab):Remove or comment out the app router module from mta.yaml (selected portion in the screenshotbelow):CUSTOMER10 2019 SAP SE or an SAP affiliate company. All rights reserved.Extensions on SAP Cloud Platform - Cloud Foundry EnvironmentIntroduction

3.Remove or comment out all the services except the ‘app-host’ service in the ‘resources’ section ofmta.yaml:4. Comment the uncommented code and uncomment the commented code in component.js:Extensions on SAP Cloud Platform - Cloud Foundry EnvironmentIntroductionCUSTOMER 2019 SAP SE or an SAP affiliate company. All rights reserved.11

5.Now you can build and deploy the extension application. Right-click the project and select the ‘build’option. Once the build is complete, a mtar file is generated in the mta archives folder. You can deploy thismtar file by right-clicking on it.CUSTOMER12 2019 SAP SE or an SAP affiliate company. All rights reserved.Extensions on SAP Cloud Platform - Cloud Foundry EnvironmentIntroduction

1.2Standalone Extensions1.Create Multi-Target Application: navigate to the Development tab in web IDE and open the wizard for Projectfrom Template (File - New - Project from Template). In the wizard, select ‘Cloud Foundry’ Environment and‘Multi Module’ Category and proceed with the ‘Multi-Target Application’ template.2.Template Configuration: please select the checkbox ‘use HTML5 application Repository’. This will create theUI Deployer module.3.Show Hidden Files: Click on the ‘eye’ icon at the top of the repository to see all the hidden modules. Once youclick it, ‘app router’ and ‘ui deployer’ modules should become visible :Extensions on SAP Cloud Platform - Cloud Foundry EnvironmentIntroductionCUSTOMER 2019 SAP SE or an SAP affiliate company. All rights reserved.13

4. Create HTML5 Module: Right-click on the new application and create a new ‘HTML5 module’. You may usethe ‘SAPUI5 Application’ template to create an HTML5 module:5.Using PdMS/AC/AIN/ASPM Service: if you need to use the PdMS/AC/AIN/ASPM service, you need to addthe business service in the xs-app.json file of the app router accordingly:1.For PdMS service:{"csrfProtection": false,"source": " /pdms/(.*) ","target": "/ain/ 1","service": "com.sap.dsc.iam.pdms","endpoint": "pdms-backend","authenticationType": "xsuaa"CUSTOMER14 2019 SAP SE or an SAP affiliate company. All rights reserved.Extensions on SAP Cloud Platform - Cloud Foundry EnvironmentIntroduction

}2.For AC service:{"csrfProtection": false,"source": " /ac/(.*) ","target": "/ain/ 1","service": "com.sap.dsc.iam.assetcentral","endpoint": "asset-central-service","authenticationType": "xsuaa"}3.For AIN service:{"csrfProtection": false,"source": " /ain/(.*) ","target": "/ain/ 1","service": "com.sap.dsc.iam.ain","endpoint": "ain-service","authenticationType": "xsuaa"}4. For ASPM service:{"csrfProtection": false,"source": " /aspm/(.*) ","target": "/ain/ 1","service": "com.sap.dsc.iam.assetcentral","endpoint": "asset-central-service","authenticationType": "xsuaa"}Extensions on SAP Cloud Platform - Cloud Foundry EnvironmentIntroductionCUSTOMER 2019 SAP SE or an SAP affiliate company. All rights reserved.15

Screenshot of example (you should only add the business service you will use):Also bind the relevant ‘PdMS/AC/AIN/ASPM’ business service to the app router. Open the mtad.yaml file andadd it to the ‘resources’:CUSTOMER16 2019 SAP SE or an SAP affiliate company. All rights reserved.Extensions on SAP Cloud Platform - Cloud Foundry EnvironmentIntroduction

Then bind it to application router by adding it under ‘requires’:6. Local Testing and Development: Once you have added the new ‘HTML5 Module’, you can continue with localdevelopment and run it locally like this:7.Cloud Foundry Deployment: Once your local testing has been completed and the application is ready forCloud Foundry deployment, some changes are required in the mta.yaml file before the UI application can bedeployed in the Cloud Foundry space. Make the following changes:Extensions on SAP Cloud Platform - Cloud Foundry EnvironmentIntroductionCUSTOMER 2019 SAP SE or an SAP affiliate company. All rights reserved.17

1.2.Add the navigation property for the manifest file. Open the manifest file, switch to the Descriptor Editorand add the relevant navigation properties like this:Remove or comment out the app router module from mta.yaml (selected portion in the screenshotbelow):CUSTOMER18 2019 SAP SE or an SAP affiliate company. All rights reserved.Extensions on SAP Cloud Platform - Cloud Foundry EnvironmentIntroduction

3.Remove or comment out all the services except the ‘app-host’ service in the ‘resources’ section of themta.yaml file.4. You can now build and deploy the extension application. Right-click on the project and select the buildoption. Once the build is complete, a mtar file will be generated in the mta archives folder. You can deploythis mtar file by right-clicking it.1.3Adding Application to Custom Fiori launchpadYou can setup your custom FLP and add your newly created extension to the custom FLP by following thesesteps:1.Extract the contents of the attached archive which has the pre-delivered SAP Fiori launchpad content basedon the product - PdMS/AIN / ASPM.Extensions on SAP Cloud Platform - Cloud Foundry EnvironmentIntroductionCUSTOMER 2019 SAP SE or an SAP affiliate company. All rights reserved.19