Part 1C: Working with Task APIs in your Custom HTML5 application
In this concluding section of Part1, let us know how-to update the user interface to show the task data and workflow context.
The whole objective here is to use task APIs to (a) get task related data and enhance the workflow context (b) add task action button implementation and © bind the UI elements with the workflow context data.
So, when you want to use your custom UI application as a user task-interface of workflow then these steps need to be performed to ensure that workflow context and task context is seamlessly connected.
Each step mentioned below is not mandatory, you can choose to use them at your discretion and based on your requirement. But in most of the cases, for our internal showcase scenario, I have more or less followed the same steps and the integration of user interfaces works like butter.
Get started now:
* Open the Web IDE
* Open Controller.js file of your project
* Add the following code snippets in init function to:
* Get the task instance data // Step 1: get task data var startupParameters = this.getComponentData().startupParameters; var taskModel = startupParameters.taskModel; var taskData = taskModel.getData(); var taskId = taskData.InstanceID;
* Get the workflow context and enhance it with the task data var processContext = new sap.ui.model.json.JSONModel(); $.ajax({ url: “/bpmworkflowruntime/rest/v1/task-instances/” + taskId + “/context”, method: “GET”, contentType: “application/json”, dataType: “json”, success: function(result, xhr, data) { //Get the process context processContext.context = data.responseJSON; //Get task related data to be set in ObjectHeader processContext.context.task = {}; processContext.context.task.Title = taskData.TaskTitle; processContext.context.task.Priority = taskData.Priority; processContext.context.task.Status = taskData.Status; if (taskData.Priority === “HIGH”) { processContext.context.task.PriorityState = “Warning”; } else if (taskData.Priority === “VERY HIGH”) { processContext.context.task.PriorityState = “Error”; } else { processContext.context.task.PriorityState = “Success”; } processContext.context.task.CreatedOn = taskData.CreatedOn.toDateString(); } });
* Get the task description and add it to UI model //get task description and add it to the UI model var jsonModel = new sap.ui.model.json.JSONModel(); startupParameters.inboxAPI.getDescription(“NA”, taskData.InstanceID).done(function(dataDescr) { processContext.context.task.Description = dataDescr.Description; jsonModel.setProperty(“/context/task/Description”, dataDescr.Description); }). fail(function(errorText) { jQuery.sap.require(“sap.m.MessageBox”); sap.m.MessageBox.error(errorText, { title: “Error” }); }); jsonModel.setData(processContext); this.setModel(jsonModel);
* Next, add buttons and their implementation in the task interface.
Here in this example, I have just added one button, you can choose to create other buttons based on your project requirement like button to Reject or Confirm etc. //Implementation for the approve button action var oPositiveAction = { sBtnTxt: “Approve”, onBtnPressed: function(e) { var model = that.getModel(); model.refresh(true); //Call a local method to perform further action that._triggerComplete(that.oComponentData.inboxHandle.attachmentHandle.detailModel.getData().InstanceID, true, jQuery.proxy( //on successful competion, call a local method to refresh the task list in My Inbox that._refreshTask, that)); } }; //Add ‘Approve’ action to the task startupParameters.inboxAPI.addAction({ action: oPositiveAction.sBtnTxt, label: oPositiveAction.sBtnTxt, type: “Accept” //Set the onClick function }, oPositiveAction.onBtnPressed);
— All the above code snippet is added to the init function of the Controller.js file —-
* Now, add few more functions in the Controller.js file to:
* Trigger action to complete the task.You need to implement this function for the button, whose click would complete the task. In this, you call task API to set the status as completed.You can find more details on the API here:
https://help.sap.com/doc/40db36d987084ab09e496381090e9a2e/Cloud/en-US/wfs-core-api-docu.html //This method is called when the confirm button is click by the end user _triggerComplete: function(taskId, approvalStatus, refreshTask) { $.ajax({ //Call workflow API to get the xsrf token url: “/bpmworkflowruntime/rest/v1/xsrf-token”, method: “GET”, headers: { “X-CSRF-Token”: “Fetch” }, success: function(result, xhr, data) { //After retrieving the xsrf token successfully var token = data.getResponseHeader(“X-CSRF-Token”); var dataText; //form the context that will be updated – approval status and the equipment list dataText = “{ “status”:”COMPLETED”,”context”: {“workplaceConfirmed”: “” + approvalStatus + “” }}”; $.ajax({ //Call workflow API to complete the task url:“/bpmworkflowruntime/rest/v1/task-instances/”+taskId, method: “PATCH”, contentType: “application/json”, //pass the updated context to the API data: dataText, headers: { //pass the xsrf token retrieved earlier “X-CSRF-Token”: token }, //refreshTask needs to be called on successful completion success: refreshTask }); } }); },
* Finally, write a function to refresh the inbox once the task is completed //Request Inbox to refresh the control once the task is completed _refreshTask: function() { var taskId = this.getComponentData().startupParameters.taskModel.getData().InstanceID; this.getComponentData().startupParameters.inboxAPI.updateTask(“NA”, taskId); }
This completes the updates to Component.js file. Now let us modify the view.xml file to bind the UI element of the user interface such that they fetch the respective value from the workflow context
* Open the view.xml and change the Text field of FirstName label element to {/context/user/FirstName} where {/context} reads the data from the workflow context and remaining path is the relative payload path as passed to the workflow.Similarly do the same for other elements as shown below.
* Save and Deploy the SAPUI5 application
* Start a new workflow instance with the following payload and open the task in My Inbox { “user”:{ “FirstName”:“Kate”, “LastName”:“Beckett”, “city”:“London”, “country”:“United Kingdom” } }
Now you will see the data in the form data from the workflow context
With this we complete Part1 of our learning. In this part you learnt how to create an HTML5 application and modify the application artefacts so that it can be successfully integrated in user task of SAP Cloud Platform Workflow. You also learnt about task APIs and how they can be used to associate task data with workflow context, so that the text in the UI element are shown appropriately when the task in opened in MyInbox application.
In the upcoming Part2 and Part3 you will learn some advanced options which might help you while using your custom UI5 application as user-task or to start the workflow. http://bit.ly/2hcDWlj #SAP #SAPCloud #AI
SAP Extended Warehouse Management with S/4HANA 1709
S/4HANA 1709 is a compelling release. Today, I want to tell you about our warehousing offering with the world-leading SAP Extended Warehouse Management solution embedded in S/4HANA. I will cover the 1709 release highlights and explain why I think this is your solution for centralized management of small and mid-size warehouses and your answer to migrate from SAP ERP WM to support the latest warehousing technologies and capabilities.
Watch our video – I talked to @JörgMichaelis, Chief Product Owner SAP Extended Warehouse Management, on highlights in SAP EWM in S/4HANA 1709:
SAP Extended Warehouse Management (SAP EWM): A True Success Story
I have been managing the SAP Extended Warehouse Management (EWM) solution as part of my development portfolio for several years now. With pride, I talk about our journey, what we have achieved and where we are now. SAP EWM is an impressive success story – with over 1400 customers, across 47 countries and 24 industries. Our leading-edge software is running small, medium and large, high volume warehouses – supporting the latest technologies across production and spare parts warehouses, distribution centers, cross docking and transit hubs!
And this success story continues. Market growth, new business opportunities and technologies continue to fuel SAP Extended Warehouse Management as a strategic investment area for innovation.
Embedded SAP EWM in S/4HANA: What is it?
SAP EWM in S/4HANA provides our customers with a new deployment alternative (first released at the end of 2016). We are taking our world-class SAP Extended Warehouse Management solution and also delivering it
embedded, as an integral part of SAP’s new enterprise resource management suite – SAP S/4HANA.
It’s a smart, strategic move to make our proven warehousing software, and the continuous innovation here, also available in a centrally-deployed ERP suite. We develop a common core – one code-line – and deliver this in different deployment options for our different customer needs.
In this way, SAP EWM can be run decentrally (for example, for high-volume, highly automated warehouses) or as an embedded solution in S/4HANA as part of a central ERP implementation (for example, for smaller and mid-size warehouses).
SAP EWM in SAP S/4HANA 1709: What’s New?
SAP/4HANA 1709 is the second release with embedded SAP EWM. It represents an important milestone.
With this release, we complete our core SAP EWM coverage in S/4HANA. The remaining integration areas (already available with decentral SAP EWM), are now also available for SAP/4HANA 1709:
EWM – QM integration
Comprehensive EWM and Quality Management (QM) integration is now available to support quality management processes in the warehouse – for example, for goods inspection, sampling and usage decisions.
EWM – TM integration
With the addition of embedded SAP Transportation Management ™ with S/4HANA 1709, we now deliver direct EWM-TM integration in S/4HANA for end-to-end logistics processes.
The 1709 release also comes with new, embedded analytics:
Warehouse Operational Analytics
Leveraging the S/4HANA data modelling infrastructure – Core Data Services views for EWM are now available in S/4HANA 1709. These can be used for dashboards and analytics with SAP Smart Business or SAP Fiori for Warehouse Experts (i.e. for outbound delivery KPI reporting and analysis) and Warehouse Shift Supervisors (i.e. for outbound workload and execution progress analysis and operations alerting).
In addition, 2017 SAP EWM innovations are made available with the S/4HANA 1709 release, for example:
Advanced Labor Management
Major new capabilities are delivered for setting up labor structures and standards to support advanced labor tracking (based on shift data, teams, travel distances, labor standards, time and attendance, reported activities etc.), including personal and fatigue factors.
– Outbound delivery changes The delivery in ERP can now be changed (triggered by customer, transportation plan, or product allocation changes) after it has been handed over to SAP EWM.
E-Commerce enhancements
A new solution for pick cart handling, as well as enhancements for order reduction (cancellation) etc.
Enhanced warehouse optimization
New pallet building and stock consolidation optimization,…
I will cover these and the other 2017 EWM innovations in detail in a next blog on SAP EWM 9.5.
When is SAP S/4HANA with Embedded EWM the better option?
If you are looking for a proven warehousing solution, based on the latest technology, as part of a central enterprise resource management system to run your small, mid-size and production warehouses, then embedded EWM in S/4HANA is the solution for you.
With S/4HANA, you have a simplified system landscape – one system – and a common user experience across all business areas. This enables seamless integration for end-to-end planning and execution processes across product development, manufacturing, quality, warehousing and transportation. And with the comprehensive SAP Best Practices offering for SAP EWM in S/4HANA, we accelerate implementation by providing preconfigured warehouse management processes, predefined sample warehouse structures and master data and content for automated activation.
As said, it is a compelling offering – made more attractive with the flexible licensing alternatives for SAP EWM in S/4HANA for Basic Warehousing or Advanced Warehousing options.
I invite you to learn more about embedded SAP EWM in S/4HANA:
The SAP EWM Product Page in sap.com:
https://www.sap.com/products/extended-warehouse-management.html
Community for SAP EWM:
https://www.sap.com/community/topic/extended-warehouse-management.html
Learning Hub (for customers and partners (subscription required)):
SAP EWM and SAP S/HANA FAQ:
https://www.sap.com/documents/2017/06/ae78c168-be7c-0010-82c7-eda71af511fa.html
SAP EWM Roadmap:
Franz Hero on Twitter:
If you’d like to follow me on Twitter too, you can find me at:
Tweets by HeroFranz
http://bit.ly/2yNiptd #SAP #SAPCloud #AI