This blog describes how to migrate a workflow application from SAP Cloud Platform Neo environment with SAP UI5 components as Task UIs to SAP Cloud Platform Cloud Foundry Environment. A workflow application from Neo environment requires some migration steps to deploy and execute in SAP Cloud Platform Cloud Foundry environment. As part of migration you need to copy and paste the workflow and UI components. You need to adapt the Workflow Cloud Foundry APIs used in the SAP UI components.
Migrating to SAP Cloud Platform Cloud Foundry environment will add the following benifits.
- Customers could choose one of the Hyper scalers (for eg: AWS, Azure) as their Cloud Infrastructure service provider.
- Out of the box process visibility on all deployed workflows using SAP Cloud Platform Process Visibility.
- Easier integration to SAP Cloud Platform CAI and Intelligent Robotic Process Automation
- Workflow Service Instance created in your Cloud Foundry Space and assigned required Workflow Service Roles. Please refer the Getting Started section of SAP Help portal.
- A portal FLP site has created in your Cloud Foundry Space. Please refer Create Workflow and My Inbox Tiles in Fiori Launch Pad. If you have subscribed workflow , business rules and proess visibility services , you can download a MTA file from Git hub, build and deploy the MTA.
- You have assigned Space Developer role to your user in Cloud Foundry Space. Please refer adding Space Members
- Cloud Platform Neo sub account with SAP WebIDE Full stack enabled.
In this blog we are using a sample application(sample.onboarding) available in SAP WebIDE full stack as the workflow application in Neo environment. SAP has provided the migrated CF sample MTA project as EmployeeOnboarding Extension Workflow for Cloud Foundry. You can refer the migrated CF based Workflow sample application.
Import sample workflow application
- Logon to your SAP Cloud Platform WebIDE full stack in Neo environment. Enable Workflow Editor extension in WebIDE. Select Preferences ->Extensions, search “workflow” and enable Workflow Editor.
- Import Employee Onboarding sample application to your workspace. Right click on Workspace and select New->Project from Sample Application.
- Select Employee Onboarding extension workflow for Neo project.
- Check the License agreement and click Finish
Create Multi Target Application Project
A mutitarget application contains multiple modules and it can be build and deploy as a single archive. This will enable customers to transport their Workflow applications as a single deployable across their dev, quality and production landscape.
- Create a new Multi Target Application. Right click on Workspace and select new->Project from Template.
- Select Cloud Foundry as Environment and click Next
- Enter Project Name as EmployeeOnboarding.
- Enter MTA Application ID as EmployeeOnboarding. Make sure you check Use HTML5 Application Repository and click Finish
- Add a new Workflow Module. Right click on MTA project EmployeeOnboarding and select New->Workflow Module.
- Enter a module name onboard and click Next
- Enter a Workflow name as onboard and click Finish button
- Create a new HTML5 Module. Right click the MTA project EmployeeOnboarding and select New -> HTML5 Module
- Select SAPUI5 Application as Template. Click Next
- Enter Module Name as onbequip and Namespace as com.sap.cloud.workflow.samples. Make sure this is the same name and namespace as in the SAP UI5 component in Neo.Click Next
- Click Finish
- Repeat steps 12,13 to create a new HTML5 module and enter the Module Name as onbapprove and Namespace as com.sap.cloud.workflow.samples. Make sure this is the same name and namespace as in the SAP UI5 component in Neo.
- Repeat steps 12,13 to create a new HTML5 module and enter the Module Name as onbaccept and Namespace as com.sap.cloud.workflow.samples.Make sure this is the same name and namespace as in the SAP UI5 component in Neo
Migration of Workflow content requires copying the following artifacts from the Neo project to CF MTA project.
- Workflow models in workflow folder (.workflow file)
- Scripts used in script task in the scripts folder.
- Sample payload in sample-data folder
- Html content used as email templates in webcontent folder
- Re assigning the Task UIs to all User Tasks.
- Select the CF EmployeeOnboarding->EmployeeOnboarding->Workfllows->onboard.workflow, right click and Delete the newly created workflow. EmployeeOnboarding is the new MTA project created to deploy in SAP Cloud Platform Cloud Foundry environment.
- Select the Neo project sample.onboarding, onboarding->workflows->onboard.workflow , right click and copy. sample.onboarding is the workflow project based on SAP Cloud Platform Neo environment
- Select EmployeeOnboarding->onboard->Workflows, right click and select Edit and Paste
- Select Neo project sample.onboarding and copy scripts->onboard folder by right click Edit->Copy .
- Select the onboard->scripts folder from CF project EmployeeOnboarding and paste the copied content by right click Edit->Paste
- Select project onboarding and copy files under sample-data->onboard folders by right clickEdit->Copy
- Select the onboard->sample-data folder from CF project EmployeeOnboarding and paste the copied content by right click Edit->Paste
Repeat the same steps if your project has Forms (forms folder) and html files (webcontent folder) for email tasks.
Migrate Task UI Components
The UI component migration invole the following changes for each component.
- Adapting the workflow API calls to get the context, x-csrf token and patch api to complete task.
- Add the bpmworkflowruntime route in xs-app.json file
- Modifying the manifest.json file to update the component and view names.
- Select CF project EmployeeOnboarding. Select all the folders between controller and View and Component.js under onbequip->webapp folder. Right click and select Edit ->Delete.
- Select project the Neo Project sample.onboarding and component confirmEquip. Select all the folders between controller to View and the file Component.js under confirmEquip->webapp folder. Right click and select Edit ->Copy.
- Select CF project EmployeeOnboarding and component onbequip. Select onbequip->webapp Right click and select Edit ->Paste
- Select CF project EmployeeOnboarding and component onbequip. Open xs-app.json file. Copy and paste the below content in the routes json array. Make sure the copied element is the first item in the routes array.
4. Select project EmployeeOnboarding , component onbequip and Open manifest.json file. Copy the value of sap.app id.
Using notepad remove the dots in the name space and form an application Id. For eg:
com.sap.cloud.workflow.samples.onbequip would be comsapcloudworkflowsamplesonbequip
5. Open Component.js and replace the API calls to get the Task context as give below.
“/bpmworkflowruntime/rest/v1/task-instances/” + taskId + “/context”
“/comsapcloudworkflowsamplesonbequip/bpmworkflowruntime/v1/task-instances/” + taskId + “/context”
6. In Component.js replace the XSRF-Token request to complete the Task as shown below.
7. In Component.js replace the Task completion Patch API call as shown below.
8. In Component.js, change the loading of the local json model products.json.
9. In Component.js, change the loading of the local json model init.json
Reassign the SAP UI5 task UI components to User Tasks
- Open the onboard->onboard.workflow from EmployeeOnboarding project and Select user task for eg: Change or Confirm Equipment.
2. Select USER INTERFACE tab and click the Select button to reassign the SAP UI5 based task UI.
3. Select Project Name, Application Name and SAP UI5 Component Click OK button.
Repeat the same steps for other User Tasks Approve Equipment and Accept Workplace for new hire.
Modify mta.yaml file
In this section you will add/remove resource dependencies of your workflow project. All Workflow and related Task UIs in this project are accessed using My Inbox and Workflow monitor applications. It is not required to have a separate approuter.
- Select EmployeeOnoading_appRouter from the CF project. Right click and select Edit-.>Delete.If you do not see the approuter, click on the “show hidden files” icon.
2. Open mta.yaml file under the project Employeeonboarding. Select all the content under resources and delete the same.
3. Copy and paste the below snippet under the resources Please replace “wfs” with Workflow Instance name you have created in your Cloud Foundry Space.
– name: wfs
– name: EmployeeOnboarding_html5_repo_host
4. Under modules, onboard – requires add the workflow instance name. The workflow instance name is the one you have created in your Cloud Foundry space.
5. Select the MTA project EmployeeOnboarding and right click. Select Build->Build to build the MTA.
A successful build would generate an MTA archive under mta_archives folder.
6. Right click on the .mtar file and select Deploy->Deploy to SAP Cloud Platform.
Further reference: SAP Cloud Platform Workflow in Cloud Foundry