CRM and CX Blog Posts by SAP
Stay up-to-date on the latest developments and product news about intelligent customer experience and CRM technologies through blog posts from SAP experts.
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
Read only

Using UI Events in SAP Sales and Service Cloud V2

Quablab
Participant
‎2025 Jan 08 1:53 PM
1,587

A key concept for UI extension in SAP Sales and Service Cloud V2 are UI Events. The Events are providing a capability to communicate between a extension running as mashup (iFrame) and the SAP Sales and Service Cloud V2 UI. Compared to deep-links, UI Events have the benefit, that they are not opening a new window or browser tab. Instead it is possible to open e.g. Quick Create or Detail Views directly inside the SAP Sales and Service Cloud V2 UI.

In this Blog post, we will discuss the basic concept of UI events and highlight a view special events.

Technical Foundation

UI Events are based on the window.postMessage() method. The Method allows the secure communication between frames. As the messages are processed inside the browser no network communication or server is involved. In SAP Sales and Service Cloud V2 UI events are following a standardized protocol.

 

 

{
  operation:"navigation", 
  params: {
    objectKey: "00163ea6-f284-1eda-b895-42c904e08752", 
    routingKey: "ticket", 
    viewType:"details"
  }
}

 

 

operation: Type of action, which is triggered by the event.

params: Parameter as input to the operation 

Details of the protocol can be found on help.sap.com.

UI Events for Navigation

The most common UI Events are used for navigation tasks. A navigation events requires at least a routingKey and a viewType in the parameter section of the event. If a specific object is targeted, the objectKey is also required.

 

// Open Case List View
function openNewCnsCaseList() {
	var oCase = {operation: "navigation", params: {routingKey: "case", viewType: "list"}};
	window.parent.postMessage(oCase, '*')
}

// Open specific Case
function openNewCnsCaseViewWithRoutingKey() {
	var oCase = {operation: "navigation", params: {objectKey: "071cd754-bbb5-11ef-81f0-7540f83919fa", routingKey: "case"}};
	window.parent.postMessage(oCase, '*')
}

// Open Case Quick Create view
function openNewCnsCaseCreate() {
  	var oCase={operation:"navigation", params: {routingKey: "case", viewType:"quickcreate"}};
	self.window.parent.postMessage(oCase, '*')
}

 

Special Events

Beside navigation events, other use-cases are currently developed. One scenario, which is already is available are search events in Agent Desktop. Use-case for this scenario is a mashup placed in Agent Desktop. At certain events the mashup should trigger automatically a search and open the related account or individual customer.

 

function triggerSearchEvent() {
   var event = {event: "mashup100.magiccom.customExtendedSearch", operation: "search", params: {$search: "alex"}};
	window.parent.postMessage(event, '*')
}

 

The code above, will place search term "Alex" in the search field of Agent Desktop and if only one object is found open it immediately. 

Screenshot 2024-12-17 at 15.33.44.png

 

A new feature currently under development are custom UI Events. The custom events can be mapped to certain actions, like UI Refresh during the placement of the mashup. Details are described in our sample-project.

Summary

UI Events are providing a great way to deeply integrate mashups with SAP Sales and Service Cloud V2. Due to the use of standard browser capabilities compatibility across browsers is ensured. Also no specific client libraries are required. Looking at existing customer projects, we can see the technology is used in many projects and it is amazing, what scenarios are build. If you have build a custom extension, we are keen to get to know about it. 

Resources

1 Comment