Shulou(Shulou.com)05/31 Report--

This article introduces the knowledge of "what is the uniqueness of using SAP UI5 in SAP". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Let's take Account, the work center view page, as an example.

First of all, we know that after the page is drawn in UI Designer, the corresponding XML file will be generated and stored in the ABAP background. At the same time, we can also see the generated XML file in UI Designer:

We can see the label EmbeddedComponents in the red area above, where the targetComponentID points to an Object Work List (OWL). This OWL is the OWL we see in the Account working view, as shown in the following figure.

So how are these XML files rendered at run time?

The runtime has a JavaScript object to open the window, and the implementation of this object is located in the file MWindowManager.js. We can see from the breakpoint here that the _ open method triggers the rendering of the entire page. When we click on the Account work center view, we pass the path of the view to this method.

Enter the subsequent processing logic, where a request is sent to the background according to resource path (that is, the address of the view mentioned earlier), a JSON model is retrieved, and the callback function is executed.

Next, let's take a look at what was done in the callback.

Looking at the HTTP response returned from the background, it is found that it is a JSON model that contains the specific component information of the page. This corresponds to the XML we saw earlier. The program then fetches the render manager of these components and performs a render (rendering) operation.

My colleague, Li Tanhua Zhou of SAP Chengdu Research Institute, once mentioned in his article on Fiori Design Guidelines that C4C has three sets of UI,Silverlight,HTML5 and RUI. Both HTML5 and RUI are based on SAP UI5. So when are you going to render HTML5 controls and when are you going to render RUI controls? In fact, each UI control has its own corresponding renderer. Which render is responsible for generating the HTML5 source code is the logic in the getRendererName below to extract the corresponding renderer.

For example, the following figure shows the Tool Bar rendering on the RUI side:

For example, the following figure shows the red box area on the HTML5 page being rendered:

However, not all C4C UI is developed through UI Designer. Part of the traditional XML view of UI5 still exists in C4C.

Take the Visit work center as an example, select a survey to open:

The Survey details page that opens is implemented through the UI5 XML view:

So the question is, how can a hyperlink contained in a view developed by UI Designer point to a UI5 XML view?

First, find the OnClick handler function OnSurveyPreview that the hyperlink clicked on:

It is not difficult to understand that the processing of OnSurveyPreview has three branches. Because as mentioned earlier, C4C has three sets of UI,SilverLight,HTML5 and RUI. Although these three sets of UI share the development view of the same UI Designer, the jump logic after clicking the hyperlink is slightly different, so there are three branches in the OnClick handler OnSurveyPreview. The branch code in the red area in the middle of the image below is implemented by clicking on the hyperlink in RUI.

Click on the red branch in the middle of the image above and find that the hyperlink of RUI and the function realized by clicking to jump is: OnOpenResponsiveSurvey

The function finally opens a CustomControl:

The path to this CustomControl, that is, the implementation of the corresponding JavaScript, is maintained in UI Designer:

At run time, the JavaScript implementation of the Custom Control uses JavaScript code to create an instance of the XML view, as shown in line 127 below, where the constructor of the XML view is called

This is why, after clicking the hyperlink, you can see the loading of the main.view.xml file from the Chrome developer tool:

This is the end of the content of "what is the uniqueness of using SAP UI5 in SAP". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.