Shulou(Shulou.com)06/01 Report--

How to embed custom UI in the SAP Cloud for Customer page, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain in detail for you, people with this need can come to learn, I hope you can get something.

Recently, Jerry's team is working on a smart business card project, where sales representatives can use WeChat Mini Programs to create smart business cards, post some promotions and share them on Wechat (moments or WeChat groups). People who click on the business card can browse the product in charge of the sale, view the parameters of the product and other details, and have a simple conversation with the intelligent robot bound to the business card to ask for more information about this promotion.

Suppose a car salesman is responsible for selling the following three cars, which are maintained in the C4C system as product master data.

Car sales created a promotion based on the Mini Cooper car in WeChat Mini Programs, a smart card, and shared it on the Wechat platform.

After others click to enter, click the chat button, you can talk to the configured SAP Conversation AI to learn more about Mini Cooper.

The smart card will extract the Wechat user information of the person who is interested in Mini Cooper and create a new Lead data in the C4C system. At the same time, we will collect the records of the conversation between users and SAP Conversation AI, after collecting considerable data, conduct big data analysis, use artificial intelligence and other tools to calculate the potential users who are most likely to buy this model, and finally make a report displayed in the C4C system for the car sales to view.

We develop a new application, conduct big data analysis and latent passenger analysis reports, deploy on the SAP cloud platform, and then embed the UI of the self-developed application into C4C.

The technology I use to embed and develop applications in C4C is Mashup (mashup). The Mashup framework of C4C is derived from SAP Business by Design and has a history of more than ten years. Although the technology is old, it is very useful when implementing self-developed UI to embed these requirements.

Jerry recently encountered some problems when using Mashup to complete C4C embedding self-development UI, during which he received great support from colleague Xu Boris. I would like to express my thanks here. In this paper, the problems encountered are recorded so that I can check them later.

Let's take a look at the results. Open the Lead details page, and the ID of the current Lead will be automatically transferred to the embedded custom page and complete the display logic. In this example, I use Microsoft's bing search to play the role of a third-party application. Lead ID 25225 is automatically passed into the bing page and the search is completed automatically.

You can see the dynamic effect in this video:

The embedding of self-developed pages is technically achieved through iframe tags:

Create a new HTML Mashup in the Mashup Authoring of C4C:

You need to specify Port Binding. When I first used Mashup, I didn't understand the text of the following help document. Later, when I was familiar with it, I realized that Port Binding is containers, each container contains a series of input fields. Because Mashup is always embedded in the standard page through iframe, and the values of the fields on the standard page are passed into the Mashup through these input parameters.

Suppose I want to transfer the LeadID of the Lead page to Mashup, select the LeadID field in the Lead Info Inport on the Mashup creation page.

Then bind the LeadID field to the input parameter Q of the bing search.

In the create Mashup page, the selected Port Binding is called Lead Info. Where are the input parameters defined?

Open this model called COD_globalmashupporttypes, whose type is porttype, which is actually a package that contains all the Mashup input parameter containers supported by the C4C standard.

Keep dragging down, and the LeadID field in LeadInfo used in my example is defined here.

The next step is to configure the created Mashup into the Lead details page. Notice that there are two work center views of Sales Leads and Leads in C4C:

The former (Sales Lead) and the corresponding OData service have been marked as Deprecated, so let's configure Mashup on the latter Leads view first.

In the Adaptation mode of Key User Tool, click the Add button

Select the previously created Mashup model and you can add it to the C4C standard page.

Note that not any created Mashup can be added to any C4C page (I call it a host page). In other words, only if there is an Outport in the UI model of the host page that points to the same Port Binding as the Port Binding on which a Mashup was created, the latter can be embedded in the former through Key User Tool.

For the Leads detail page COD_Mkt_Prospect, there is an Outport pointing to Lead_Info-- that is exactly the Port Binding on which the Mashup I created is based, so I can add the created Mashup directly with Key User Tool on the Lead page.

If you have to use Sales Lead in the Deprecated state for a variety of reasons, you will encounter a problem: because its UI model COD_MarketingLead does not have any Outport pointing to Lead_Info, you cannot add Mashup directly to C4C UI through Key User Tool.

At this point, we can change our thinking and use the Cloud Application Studio of SAP C4C to complete the embedding requirements of Mashup. Embedded Component of C4C (hereinafter referred to as EC) can be used as a reusable UI component that can load other UI controls, and of course you can put a Mashup in it. Therefore, we put the created HTML Mashup into an EC, and then embed the EC into the C4C standard page.

Compared with Key User Tool, the disadvantage of this approach is that the parameters from host UI to EC and from EC to Mashup need to be done by application developers themselves, and the steps are a little more cumbersome. Take the parameter LeadID as an example, it needs to be passed from C4C standard UI to EC, and then from EC to Mashup.

The parameters of the C4C UI component are passed through a pair of Outport and Inport. The initiator of the jump maintains the Outport and passes the parameters to the Inport maintained by the UI of the jump destination. Maintain the jump relationship in the initiator of the jump, pairing its Outport with the Inport of the jump destination, also known as binding.

The blue illustration below represents the Outport and Inport that need to be created in order to complete the parameter transfer from C4C UI to Mashup via EC.

The detailed development steps are as follows:

(1) create a new EC, and we will put the HTML Mashup into this EC later. But before that, the first step is to pass the LeadID parameter from C4C UI to EC.

Create an Inport called fromLeadTI, define a parameter objectID, and bind it to the leadID field of the EC model. In this way, when we add the EC to the Lead page, bind the leadID of the Outport of the Lead page to the leadID field of the Inport created by the EC, and complete the parameter passing from the C4C page to the EC.

(2) create a new PortType AICardPortTypePackage and define a parameter SalesLeadID in Inport, which completes the LeadID transfer task from EC to Mashup.

Then create a custom Port Binding that exposes the inport declared in the newly created Port Type that contains the SalesLeadID input parameter for Mashup to use.

(3) create a new HTML Mashup and use the custom Port Binding created in step 2:

In this way, Mashup can use the input parameter SalesLeadID exposed in the custom Port Binding:

Bind it to the url parameter Q of the bing search, and the Mashup is configured.

(4) add the EC to the Lead page in UI Designer:

Didn't we create an Inport for EC in the first step with the parameter objectID? After adding EC to the C4C Lead UI, bind the SalesLeadID of the Lead UI Outport to the objectID of the EC Inport, which enables the parameter transfer from C4C UI to EC.

(5) finally, the parameter transfer from EC to Mashup should be completed. So create an Outport in EC and pass the SalesLeadID to the custom Port Binding contained in the Port Type Package created in the second step. Because the Mashup I created is based on this custom Port Binding, I can use the data passed from EC.

As a final step, drag the Mashup into the EC:

Bind the SalesLeadID of EC Outport to the parameter of the same name of Mashup Inport to complete the parameter passing from EC to Mashup.

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.