用户体验是一个人使用某个产品（如网站或计算机应用程序）的总体体验，特别是使用起来有多容易或令人愉快。
用户界面是用户与计算机系统进行交互的手段，尤其是，输入设备和软件的使用
在使用SAP提供的CRM 7.0贸易促进管理解决方案时，我们的客户对用户体验不满意。他们说，为了实现简单的事情，他们需要在许多屏幕之间导航。所以他们要求我们改进它的用户体验，记住用户界面也应该看起来很吸引人。
所以你可能会遇到很多这样的场景，作为参考，我将引导你了解一个通用的场景；在这个场景中，你将能够理解如何分析代码，并用你的组件、功能和，和风格。
应该对Javascript、HTML和CSS有基本的了解。
SAPUI5开发初学者。
这是一个假设的需要，而不是业务需求。
假设我们必须在SAPUI5 TPM解决方案的详细促销主屏幕的组合框中加载业务伙伴列表。
目前，如果您想查看业务合作伙伴列表，那么可以在以下7个步骤后找到它。
我们将分析我们的代码并找到如何在那里检索它，并将使用这些函数在详细贸易促销主屏幕的组合框中加载数据。这将减少数字导航步骤，因为用户将能够在主屏幕上看到列表。随着用户界面的增强，这将带来愉快的用户体验。
要从SAPUI5存储库检索SAPUI5应用程序项目，按以下步骤进行：
已从SAPUI5存储库检索到应用程序项目相关文件。
在google chrome中登录CRM。
选择一个业务角色：/JBPC/KAM–CBP:Key Account Manager导航到
转到"计划"并创建新的详细促销。
因为您已经浏览了场景。让我们在eclipse中找到相应的视图。按CTRL+SHIFT+I打开chrome的检查工具。转到"元素"选项卡。
单击突出显示的按钮。点击管理按钮。在chrome的elements标签中看到突出显示的代码
Copy id of span:这里的id是视图id和父span的组合。您将选择其中一个。在这里我们将处理idAdminAreaHeader。在eclipse的详细升级视图中找到具有此id的元素。
转到控制器并找到方法handleMoreButtonPress，该方法在admin按钮的按下事件中被调用。
此函数调用一个handleShowAdminUi函数，该函数将admin视图设置为可见。
在视图中找到上述id。"idAdminAreaContainer"
继续在管理区域的parties Incolved面板中添加一行
单击Name字段的F4帮助。"getNameValueHelpDialog"函数被调用，它调用了一个片段"BusinessPartnerSearch"。
打开片段
我们必须搜索Apply按钮，因为点击这个按钮业务伙伴被加载。
在管理控制器中找到"handleApplyFiltersToTable"方法。
在这个方法中，它正在调用一个ICF方法来检索带有筛选器的业务伙伴
因此我们暂时忽略筛选器部分，提取ICF名称和代码来调用它来提取业务伙伴
提取创建Url代码
var u=app.getPromoServiceUrl（）；
u=util.getUrlParts文件（u） ；
u.controllerID=u.controllerID+"\u 701\u PROMO\u PARTIESINVOLVED"
然后提取调用代码，得到业务伙伴数组。
应用程序：biData.biComm.sendRequest（[{
name:'SEARCH\u PARTNER'，什么叫云，
params:s
}]，u.url，u.controllerID，u.xsrfToken，this.getPartnerDataFromIcf，这个）；
在这个函数中，它将数组返回回回调函数getPartnerDataFromIcf
因此我们将用我们自己的自定义函数替换此回调函数。
现在我们知道如何获取业务伙伴，让我们从视图和控制器扩展开始。
您必须在eclipse中创建一个sapui5项目，您将在其中创建下面的片段和控制器。然后将其部署到ABAP系统上。部署后，云服务器免费，您将在SPRO中配置UI扩展点。
视图扩展
创建一个具有任意名称的片段；在eclipse studio项目中，为业务伙伴添加组合框。
DetailePromoteExtension.fragment.js文件
这里我们还添加了一个CSS类，自助建站源码，我们将使用JQuery为其设置样式。
控制器扩展
创建一个具有任何名称的控制器，这里我们的控制器名称是"com.company.sapui5公司.DetailePromotionExtension"
这里我们使用的是beforeRender上的生命周期方法每次呈现DOM中的元素之前都会调用
在这个方法中，返利下载，我们调用Icf从后端获取数据，并将其传递给回调函数"getPartiesFilterDataFromIcf"
getPartiesFilterDataFromIcf：这个函数在全局业务伙伴模型中设置接收到的数据，然后为添加在片段中的组合框设置模型和聚合。
现在我们的控制器和片段已经准备好，理财返利平台，您可以将其部署到ABAP系统上并配置扩展点以查看结果。
维护UI扩展配置如下：
Tcode SPRO Customer Relationship ManagementTradeManagement
常规设置UI扩展
维护扩展名称空间：外部命名空间：com.company.sapui5公司Ext.Path:../../sap/appname/extention\u foldername
注意："extention\u foldername"是Web内容文件夹中的文件夹。如果您已将文件放置在此文件夹中，则仅提及文件夹名称。
