How to Add Custom Actions to Enable Additional Functionality

Warning: This page contains code snippets and require the reader to have good understanding about the model-view-controller (MVC) architecture in SAPUI5.

This is part of the blog series which details about the possible UI extensions in SAP Operational Process Intelligence.

The below image is the scenario instance details page, where you are presented with all the information of particular scenario instance (for example, Order No 41463) like the phases, milestones & overall status.

With SAP OPInt SP12 and above, you can create custom navigation actions which appear in the scenario instance details’ footer with situational awareness (enabled based on business conditions) and even add deeper process insights as new tabs using associations.

In this UI5 app, you can change the behavior of the following using UI extensions:

1. Custom actions in the footer to perform actions which are not possible using ‘navigation actions’ with situation awareness – you want to add a custom action to create an internal ticket if a particular order is overdue or you want to release a blocked sales order on click of a button or you want to remove that particular order from SAP OPInt, so on and so forth.
2. Add additional tabs which shows rich information like geo maps.

What to Expect

In this document I will explain how you can add a custom action to create an internal ticket and how you can show/hide the same based on certain business conditions (like sales order is overdue or for a particular customer segment etc.)

Steps to Add Custom Actions using UI Extensions

Pre-Requisite:

1. Complete the pre-requisite before you proceed with the extension of scenario instance details page.
2. You already have the services required to perform the action you want to trigger (in this example, to create an internal ticket) using the custom action.

Step 1: Create a new package under my.opi.workspace and name it as ui (if not available already). Create sub-packages pages, scenarioInstanceDetails & footer as shown below. This is where we will place all the source code to extend the scenarioInstanceDetails page.

Step 2: Under the footer package, create a JS view fragment and its controller as shown below. Name them CustomActionButtons.controller.js & CustomActionButtons.fragment.js. This fragment and its controller will contain the source code for the custom action and its properties

Step 3: Implement the Fragment

In the fragment.js, add the following piece of code to create the UI element (sap.m.Button) and set its properties.

Note: The button text, tool tips have a hardcoded English text. You might want to use the texts from the i18n messagebundle for enabling internationalization (translation) capabilities

// Note that it is a JS Fragment
sap.ui.jsfragment("my.opi.workspace.ui.pages.scenarioInstanceDetails.footer.CustomActionButtons", {

	oCreateTicketButton: undefined,

	createContent: function(oController) {
		var aControls = [];

		// Create a sap.m.Button 
		this.oCreateTicketButton = new sap.m.Button({
			id: "BtnCreateTicket",
			// The text which appears on the button & its tooltip
			text: "Create Ticket",
			tooltip: "Create Ticket"
		});

		// Add the method from the controller which will be called on button press 
		this.oCreateTicketButton.attachPress(oController.createTicket);

		// Add the button to an array and return the same
		// Similarly you can create any other button, push to the array and return the araay
		aControls.push(this.oCreateTicketButton);
		return aControls;
	}
});

Step 4: Implement the fragment’s controller

The next step is to implement the fragment’s controller where we decide what happens when the action is triggered (implementation of the method createTicket, as mentioned while defining the button in the fragment). In order to create a ticket, the user needs to enter some details like the header text, priority, detailed information, component, etc. In this example, I would be calling a JS view as UI5 dialog to capture these details. Based on your requirement, you can have any implementation here including service with POST action

sap.ui.controller("my.opi.workspace.ui.pages.scenarioInstanceDetails.footer.CustomActionButtons", {

	// The method which will be triggered on button press 
	createTicket: function(oEvent) {
		// When the button is pressed a dialog is called for entering the details to create a ticket

		this.ticketCreationView = sap.ui.view({
			// the following fragment will be created in the upcoming steps
			viewName: "my.opi.workspace.ui.pages.scenarioInstanceDetails.footer.NewTicketDialog",
			type: sap.ui.core.mvc.ViewType.JS
		});

		jQuery.sap.syncStyleClass("sapUiSizeCompact", this, this.ticketCreationView.dialog);

		// Open the dialog
		this.ticketCreationView.openDialog();
	
	}
	
});

Step 4.1: Create the view and controller for the ‘Create New Ticket’ dialog

Under the footer package, create two new files and name them NewTicketDialog.controller.js and NewTicketDialog.view.js. Note that this is view which is called as a dialog in the controller implementation above.

Step 4.2: Implement the NewTicketDialog view

In the createContent method, you create the UI elements which you want in your dialog – Ticket Subject, Priority & Detail Text, along with the buttons to complete creating the ticket or cancel the action.

Apart from the createContent method, you would also want to implement the following methods: getControllerName, openDialog, closeDialog, _destroyView & the handleCreateButtonPress.

Step 4.3: Implement the controller of the dialog view

In the createTicket method, we call the service to create the ticket and pass the subject, priority & description as JSON (as per the service definition).

Step 5: Register the footer extension in the Component.js

Now that we have created the artefacts required for the extension, finally we need to register this UI extension in the Component.js file. Open the Component.js file from the package my.opi.workspace. If you do not see this, then please revisit with the pre-requisite section.

Step 5.1: Edit the Component.js

In the Component.js, add the controller and view extensions under the metadata customizing section as shown below. Note that if you already have a controller or view extensions (as explained in the other blog) then add the footer extensions to it.

Step 6: Activate all the artefacts and access your new custom OPInt workspace. (http(s)://host:port/my/opi/workspace). When you navigate to the scenario instance details page, you should be able to see the ‘Create Ticket’ button in the scenario instance details page’s footer.

By following the above steps, the custom action is enabled for all the business scenarios in your system. But you might want to enable this action
1. For a particular business scenario or
2. Only if the order are in ‘Critical’ state (either overdue or running late)
3. All the orders coming from your premium customers irrespective of the order status
4. Role-based access.

If that is case, then visit the next blog in the series to know how you can control when to enable the custom actions.