Display popup in SAP C4C

[Gayatri_Bagde]

There are number of use cases when the business would like to show a popup message to highlight some particulars when any transaction is opened.

For Example: In service ticket, popup can be displayed to show some data or time remaining for SLA breach, or highlight the sales representative if an opportunity is getting stalled in next 7 days.

For this blog post, let's consider a business case - whenever a service ticket is opened, user should be prompted with how much time is left to close a ticket.

Solution:

To achieve this, I'll be using cloud application studio. This development will be divided into 3 sections as:

1) Creating a custom Business Object
2) Action / ABSL script to calculate the time

3) Creating an Embedded Component

 

Step 1: A custom BO is created as follow:



Significance of fields:

1. ID: This holds service Ticket’s ID which is currently opened by the user. This will be used to retrieve the details of service ticket SLA.


2. TimeRem: This field will hold the message for time left to complete the ticket.


3. showPopup: This is an indicator which is used to determine whether we need to display a popup or not. Popup will not be displayed if the ticket is already completed/closed.

Significance of Action:

1. CalculateRemTime: This action is required to calculate the time remaining to close the ticket as per the SLA defined in the system.

Step 2: Create an EC(Embedded Component) as follows



Following configurations are required in Embedded component.

Step 3: Configure the Data Model in EC



EC is bound to custom BO created in Step 1. Bind the fields created in Data Model to Custom BO as follows, in order to exchange the data between UI and ABSL script.

Data Model Field	Bound to Custom BO Field
SERVICE_REQUEST_ID	ID
showPopup	showPopup
TimeRem	TimeRem

Step 4: Further Configure the Inport as shown below



Step 5: InPort will be called whenever the EC is loaded in Service Ticket screen. We will trigger an event handler whenever “InPort” is triggered. "CallPopup" highlighted in below image will be event handler created in next step



Step 6: Configure event handler - "CallPopup" as shown below:

1. In order to read Ticket's SLA data in custom action, we need to get the Ticket ID which user has opened. In order to do so, assign the Ticket ID passed to EC's Inport to a data field as shown below. As this field is bound to "ID" field of Custom BO as shown in data model (Step 3), the data will be accessible in action.


2. Create an instance of custom BO. This is required in order to call the action "CalculateRemTime" in custom BO .


3. Call the BOAction - CalculateRemTime of custom BO


4. Now, configure the message box i.e. popup. The message box should be displayed only if the “showPopup” indicator is true. Hence, configure a condition operation and only if the condition is true, make a call to message box ( Note: In case of the requirement where business wants to display more complex screens in popup like table views with the required data or need to have certain inputs from user, we can use "ModalDialog" box instead of "MessageBox")


5. "SingleText" field shown above holds the message to be shown in popup. As in our case, the message is stored in field - "TimeRem", write a ruby script in order to display the desired message. For that, select "Calculation Rule" radio button and write the script as shown below.


6. Now write the code in action “CalculateRemTime” as shown below: This action, calculates the time difference between the current date and Completion Due date.
   

   import ABSL;
   
   import AP.CRM.Global;
   
   
   
   var currentDateTime = Context.GetCurrentUserDateTime().content;
   
   
   
   var query = ServiceRequest.QueryByElements;
   
   var resultData;
   
   // 2. Selection
   
   var selectionParams = query.CreateSelectionParams();
   
   selectionParams.Add(query.ID.content, "I", "EQ", this.GetFirst().ID);
   
   // Result
   
    resultData = query.ExecuteDataOnly(selectionParams);
   
   
   
    var Ticket = ServiceRequest.Retrieve(resultData.GetFirst().ID);
   
    var completionDue;
   
    if(Ticket.IsSet())
   
    {
   
   	 if(Ticket.CompletionDueTimePoint.IsSet())
   
   	 {	
   
   		if(!Ticket.CompletionDueTimePoint.TimePoint.IsInitial())
   
   		{
   
   			if(!Ticket.CompletionDueTimePoint.TimePoint.DateTime.IsInitial())
   
   			{
   
   				completionDue = Ticket.CompletionDueTimePoint.TimePoint.DateTime.ConvertToGlobalDateTime().ConvertToLocalDateTime().content;
   
   			}
   
   		}
   
   	 }
   
   	 if(!completionDue.IsInitial())
   
   	 {
   
   		 //Convert DateTime value as a string value and replace all character values (we need only numeric values)
   
   		 var currentDateTimeString = currentDateTime.ToString().Replace("-","").Replace(".", "").Replace("T", "").Replace("Z", "");
   
   		 var completionDueDateTimeString = completionDue.ToString().Replace("-","").Replace(".", "").Replace("T", "").Replace("Z", "");
   
    
   
   		 //Get Date and Time values from our string variables
   
   		 var currentDate = Date.ParseFromString(currentDateTimeString.Substring(0, 8));
   
   		 var CurrentTime = Time.ParseFromString(currentDateTimeString.Substring(8));
   
   		 var completionDueDate = Date.ParseFromString(completionDueDateTimeString.Substring(0, 8));
   
   		 var completionDueTime = Time.ParseFromString(completionDueDateTimeString.Substring(8));
   
   
   
   		 var completionDate;
   
   		 if(Ticket.RequestFinishedAtTimePoint.IsSet())
   
   		 {
   
   			if(!Ticket.RequestFinishedAtTimePoint.TimePoint.IsInitial())
   
   			{
   
   				if(!Ticket.RequestFinishedAtTimePoint.TimePoint.DateTime.IsInitial())
   
   				{
   
   					completionDate = Ticket.RequestFinishedAtTimePoint.TimePoint.DateTime.ConvertToGlobalDateTime().ConvertToLocalDateTime().content;
   
   				}
   
   			}
   
   
   
   		 }
   
   
   
   		 if(completionDate.IsInitial())
   
   		 {
   
   
   
   			 this.GetFirst().showPopup = true;
   
   			 //Get the Hour and Minute of the Time variable.
   
   
   
   			 var getHourOfTime1 = CurrentTime.GetHour();
   
   			 var getMinuteOfTime1 = CurrentTime.GetMinute();
   
   			 var getHourOfTime2 = completionDueTime.GetHour();
   
   			 var getMinutesOfTime2 = completionDueTime.GetMinute();
   
   
   
   			 //Date Difference
   
   			 var dateDifference = currentDate.Delta(completionDueDate).ConvertToDays();
   
   			 var totalDifference;
   
   
   
   			 //TimeDifference
   
   			  var timeDifference;
   
   
   
   			 if ((getHourOfTime1 > getHourOfTime2) || (getHourOfTime1 == getHourOfTime2) && (getMinuteOfTime1 > getMinutesOfTime2))
   
   
   
   			 {
   
   
   
   			   timeDifference = completionDueTime.Delta(CurrentTime).ConvertToMinutes();
   
   				dateDifference = dateDifference - 1;
   
   
   
   				timeDifference = 1440 - timeDifference;  // 24 hours (24*60=1440)
   
   				var realMinutes= timeDifference % 60;
   
   				var realHours= (timeDifference-realMinutes)/60;
   
   				totalDifference = dateDifference.ToString() + " days & " + realHours.ToString() + " Hours & " + realMinutes.ToString() + " Minutes";//timeDifference.ToString() + " minutes & " + SecondsDifference.ToString() + " Seconds";
   
   				this.GetFirst().TimeRem.content = "Ticket is due for completion in " + totalDifference ;
   
   			 }
   
   
   
   			else
   
   			 {
   
   
   
   				timeDifference = completionDueTime.Delta(CurrentTime).ConvertToMinutes();
   
   				var realMinutes= timeDifference % 60;
   
   				var realHours= (timeDifference-realMinutes)/60;
   
   				totalDifference = dateDifference.ToString() + " days & " + realHours.ToString() + " Hours & " + realMinutes.ToString() + " Minutes";//timeDifference.ToString() + " minutes & " + SecondsDifference.ToString() + " Seconds";
   
   				this.GetFirst().TimeRem.content = "Ticket has breached Completion SLA " + totalDifference + " back";
   
   			 }
   
     
   
   		   }
   
   		   else
   
   		   {
   
   			this.GetFirst().showPopup = false;
   
   		   }
   
   		}
   
   }​

   
   


7. Enhance "BeforeSave" event to delete the instance of custom BO created in UI designer. (Step 6 - 2)

With this, configuration for EC is completed.

Now let’s embed this EC in service Ticket’s screen.

Step 7: For this, we need to enhance the standard ticket TI screen



Step 8: Select relevant “PaneContainer” as highlighted in below image, click on “Add Embedded Component to Pane” button. In the window displayed, fill in the values as shown below: In this case, we need to pass the Service Ticket ID from Standard Ticket screen to EC. For this, make a binding of ports. Here, we need to use Inport created in EC in step 4



Our configuration for displaying popup is completed.

Let’s test the solution:

Open any ticket in the system. Popup will be displayed with the time remaining to close the ticket.



In this way, we can add a valuable feature and get end user's attention to business critical information for any specific transaction. Keep enhancing 🙂

Thanks,

Gayatri