Skip to Content
0
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

Hi,

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">
<pages>
<Page title="{i18n>title}">
<content>
     <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:formElements>
                    <sap.ui.layout.form:FormElement id="element0" label="Material Number">
                        <sap.ui.layout.form:fields>
                            <Input value="{/Material}" id="input0" width="100%" editable="false" />
                        </sap.ui.layout.form:fields>
                    </sap.ui.layout.form:FormElement>
                    <sap.ui.layout.form:FormElement id="element1" label="Plant">
                        <sap.ui.layout.form:fields>
                            <Input value="{/Plant}" id="input3" width="100%" editable="false" />
                        </sap.ui.layout.form:fields>
                    </sap.ui.layout.form:FormElement>
                     <sap.ui.layout.form:FormElement id="element2" label="Quantity">
                        <sap.ui.layout.form:fields>
                            <Input value="{/Quantity}" id="input4" width="100%" />
                        </sap.ui.layout.form:fields>
                    </sap.ui.layout.form:FormElement>
                     <sap.ui.layout.form:FormElement id="element3" label="Delivery Date">
                        <sap.ui.layout.form:fields>
                            <Input value="{/Delivdate}" id="input5" width="100%" />
                        </sap.ui.layout.form:fields>
                    </sap.ui.layout.form:FormElement>
                    <sap.ui.layout.form:FormElement id="element4" label="PR Number">
                        <sap.ui.layout.form:fields>
                            <Input value="{/PrNumber}" id="input6" width="100%" editable="false" />
                        </sap.ui.layout.form:fields>
                    </sap.ui.layout.form:FormElement>
                </sap.ui.layout.form:formElements>
            </sap.ui.layout.form:FormContainer>
        </sap.ui.layout.form:formContainers>
        <sap.ui.layout.form:layout>
            <sap.ui.layout.form:ResponsiveGridLayout id="layout3" />
        </sap.ui.layout.form:layout></sap.ui.layout.form:Form>
</content>
</Page>
</pages>
</App>
</mvc:View>

my JSON payload to create the WF instance

{

"PreqItem":"00010",

"Material":"000000000000000011",

"Plant":"5000","

Quantity":"10.000",

"Delivdate":"20181212",

"PrNumber":  "0010000550"

}

component.js

sap.ui.define([
	"sap/ui/core/UIComponent",
	"sap/ui/Device",
	"sampleui/sampleui/model/models"
], 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
			this.getRouter().initialize();


			// 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");
contextModel.setDefaultBindingMode(sap.ui.model.BindingMode.TwoWay);
this.setModel(contextModel);


	//add actions
			startupParameters.inboxAPI.addAction({
				action: "Approve",
				label: "Approve"
			}, function(button) {
				this._completeTask(taskId, true);
			}, this);
			startupParameters.inboxAPI.addAction({
				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();
			$.ajax({
				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
				}
			});
			this._refreshTask(taskId);
		}


		, _fetchToken: function() {
			var token;
			$.ajax({
				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);
		}
	});
});