SAPUI5 Custom UI with BPM OData Service

The BPM OData service enables simplified access to BPM task data with a custom user interface based on a modern Web technology like SAPUI5.

SAPUI5 supports several data sources, for example, XML and OData. The UI controls of a view are connected to a data source with a data binding, so that the controls are updated automatically whenever the application data is changed. A model is provided by SAPUI5 for each supported data source. If OData is the data source, the model instance is called ODataModel. The ODataModel enables the binding of controls to data from OData services.

The constructor of the ODataModel has the service URL as a parameter to connect itself to the OData service. Requests to the service to fetch data are created automatically according to the data bindings defined in the UI controls.

SAPUI5 Snippet: Create the ODataModel bound to a service URL

var oModel =  new sap.ui.model.odata.ODataModel( "/bpmodata/taskdata.svc/<task-instance-id>");

The data provided by the ODataModel can be accessed according to the structure of the OData service as defined in the metadata of a service. The syntax of the binding path matches the URL path relative to the service URL used in OData to access specific entries or collections.

SAPUI5 Snippet: Bind a UI control to the expanded wrapper element

oThingInspector.bindElement("/InputData(<task-instance-id>)", {expand: "customer"});

SAPUI5 Snippet: Bind a property to a field in the created and already fetched ODataModel

sap.ui.getCore().byId("name").bindProperty( "text",  "InputData/customer/name");

Collections and SAPUI5s Two Way Binding

You can visualize a collection by using a SAPUI5 table control or a row repeater. If you use collections in combination with the Two Way Binding, you can only edit a single entry in a collection. SAPUI5 rejects changes on further entries, if there is already a pending update for an entry. Before modifying another entry, the pending update needs to be submitted using the method submitChanges. This is currently not supported by the BPM OData Service. To edit multiple entries, you can create a JSON model out of the ODataModel and bound the table control to this JSON model. Both data models need to be synchronized accordingly by the custom java script implementation. The following code snippet shows how to do this using the SAPUI5 table control.

SAPUI5 Snippet: Example model creation for InputData

var oDataModel =  new sap.ui.model.odata.ODataModel( "/bpmodata/taskdata.svc/"+taskId, true); 
oDataModel.setCountSupported( false);
oDataModel.setDefaultBindingMode(sap.ui.model.BindingMode.TwoWay);

oDataModel.read("/InputData('"+taskId+"')", null, {"$expand":"customer/vcards", false, function(oData, oResponse){
       // create JSON model
       var oODataJSONModel =  new sap.ui.model.json.JSONModel();

       // set the odata JSON as data of JSON model
       oODataJSONModel.setData(oData);
  
       // store the model  
       sap.ui.getCore().setModel(oODataJSONModel, "MyJSONModel");
    
  }, function(){
       alert("Read failed");
  } 
);

SAPUI5 Snippet: Example Table Binding

var oTable = new sap.ui.table.Table({
                 id: "TestTable",
                 title: "Table Collection Example",
                 visibleRowCount: 7,
                 selectionMode: sap.ui.table.SelectionMode.Single
  });  

//Define the columns and the control templates to be used
var oColumn = new sap.ui.table.Column({  
          label: new sap.ui.commons.Label({text: "attr1"}),
          template: new sap.ui.commons.TextView().bindProperty("text", "attr1"), 
          // bind the column to property 'attr1' width: "200px" 
  });

   oTable.addColumn(oColumn);
   oTable.setModel(sap.ui.getCore().getModel("MyJSONModel"));
   oTable.bindRows("/customer/vcards/results"); // there is a 'results' object created  for each collection, so /customer/vcards is not sufficient