Skip to Content
Aug 27, 2018 at 01:19 PM

Access values entered in user task UI inside component.js

177 Views Last edit Aug 28, 2018 at 05:23 AM 2 rev


I have built a simple UIs application with few fields ( one of them is quantity) and attached it to a user task. Everything is working fine. Now I want to capture the changes that user does when he is approving the workitem. I want to store the value sin workflow context, so that I can access them in further steps of the workflow. I read few blogs in this regard and most of them are talking about adding varaibles to the workflow context, but not actually reading the values from UI. I am pasting the code below for my view and component.js of my UI5.

View XML

<mvc:View xmlns:mvc="sap.ui.core.mvc" controllerName="sampleui.sampleui.controller.View1" displayBlock="true">
<App xmlns="sap.m" id="idAppControl">
<Page title="{i18n>title}">
     <sap.ui.layout.form:Form xmlns:sap.ui.layout.form="sap.ui.layout.form" id="form3" editable="true">
        <sap.ui.layout.form:formContainers><sap.ui.layout.form:FormContainer title="PR Item Details" id="container3">
                    <sap.ui.layout.form:FormElement id="element0" label="Material Number">
                            <Input value="{/Material}" id="input0" width="100%" editable="false" />
                    <sap.ui.layout.form:FormElement id="element1" label="Plant">
                            <Input value="{/Plant}" id="input3" width="100%" editable="false" />
                     <sap.ui.layout.form:FormElement id="element2" label="Quantity">
                            <Input value="{/Quantity}" id="input4" width="100%" />
                     <sap.ui.layout.form:FormElement id="element3" label="Delivery Date">
                            <Input value="{/Delivdate}" id="input5" width="100%" />
                    <sap.ui.layout.form:FormElement id="element4" label="PR Number">
                            <Input value="{/PrNumber}" id="input6" width="100%" editable="false" />
            <sap.ui.layout.form:ResponsiveGridLayout id="layout3" />

my JSON payload to create the WF instance







"PrNumber":  "0010000550"



], function (UIComponent, Device, models) {
	"use strict";

	return UIComponent.extend("sampleui.sampleui.Component", {

		metadata: {
			manifest: "json"

		 * The component is initialized by UI5 automatically during the startup of the app and calls the init method once.
		 * @public
		 * @override
		init: function () {
			// call the base component's init function
			UIComponent.prototype.init.apply(this, arguments);

			// enable routing

			// set the device model
			this.setModel(models.createDeviceModel(), "device");
			// get task data
var startupParameters = this.getComponentData().startupParameters;
var taskModel = startupParameters.taskModel;
var taskData = taskModel.getData();
var taskId = taskData.InstanceID;
// initialize model
var contextModel = new sap.ui.model.json.JSONModel("/bpmworkflowruntime/rest/v1/task-instances/" + taskId + "/context");

	//add actions
				action: "Approve",
				label: "Approve"
			}, function(button) {
				this._completeTask(taskId, true);
			}, this);
				action: "Reject",
				label: "Reject"
			}, function(button) {
				this._completeTask(taskId, false);
			}, this);
		_completeTask: function(taskId, approvalStatus) {
			var token = this._fetchToken();
		//	var quan = sap.ui.getCore().byId("input4").getValue();
				url: "/bpmworkflowruntime/rest/v1/task-instances/" + taskId,
				method: "PATCH",
				contentType: "application/json",
				async: false,
				data: "{\"status\": \"COMPLETED\", \"context\": {\"newstatus\":\"" + approvalStatus + "\"}}",
				headers: {
					"X-CSRF-Token": token

		, _fetchToken: function() {
			var token;
				url: "/bpmworkflowruntime/rest/v1/xsrf-token",
				method: "GET",
				async: false,
				headers: {
					"X-CSRF-Token": "Fetch"
				success: function(result, xhr, data) {
					token = data.getResponseHeader("X-CSRF-Token");
			return token;

		_refreshTask: function(taskId) {
			this.getComponentData().startupParameters.inboxAPI.updateTask("NA", taskId);