Create pop-up screen SAP C4C

Hi!

In this post I’d like to tell you how to create a pop-up modal dialog window in SAP Cloud Application Studio. This window must appear after pressing “Save” button when a number of conditions are met.

Scenario.

I had a requirement to create a modal dialog window which pops up in Lead when it has status “Qualified”.
On this window a button “Convert to opportunity” should be placed. By pressing this button a standard screen for converting lead to opportunity should appear.

Realisation.

First of all we need to catch a moment when conditions are met. In my case I need to catch a moment when status “Qualified” is set in Lead.

To do this we need to create an extension object for Lead.

Here we add field “ConvertLead” with type Indicator. So if all conditions are met we set this indicator to true in Lead – Before-Save.

Now we need to create embedded component and add it to TI screen of Lead.
Then we need to configure DataList: add parameters ID and ConvertLead and bind them.

Next step we need to create InPort in EC for field LeadID. For this field we need to create structure in DataList and add parameter LeadID in it.
We use this parameter as key for reading Lead instance.

Then add handler for InPort. This handler will be used for retrieving current LeanLead.

Next step we configure field CreateLead in DataList. Add EventHandler for checking this field in the case it changes.

EventHandler looks like this:

EventHandler checks if we should open ModalDialog screen. We use Condition to check if indicator CreateLead is set. In the case if indicator is set we open ModalDialog.

Now we need to configure ModalDialog screen: add button for converting LeanLead to opportunity. To add button you should drag and drop it from Toolbox tab.

Then create outport for button (settings of it shown on picture):

Next step add structure for ThingType navigation and add field LeanLeadID_OPP, change CCTS Type to identifier, change ThingType Mode to static and set Associated ThingType.

Now configure button: change semantic to QuickCreate(this must be the first thing you do), add associated ThingType container, OutPort and write InPort.

All settings have been done. Now we need to attach EC to /BYD_COD/SalesOnDemand/Marketing/Prospect/COD_Mkt_Prospect.TI.uicomponent (in my case).

Choose your EC.

Bind parameters (OutPort in TI and InPort in EC, LeadID).

Click Apply and test.

Result.

Create Lead.

Change status to Qualified and press Save button.

ModalDialog should appear. Click button Opportunity on ModalDialog and convert lead to opportunity.

Check conversion result.

Hope my post will be helpful!
Have a good day!