1.本地SAP WEB IDE下载
2.启动Orion服务
解压SAP WEB IDE文件后，双击Orion应用程序启动服务，如下图：
服务启动完成后，打开如下路径，进入SAP WEB IDE开发平台：
http://localhost:8080/webide/index.html
3.创建账号并登录
账号创建成功后登录
进入开发平台：
4.UI5开发实例
4.1创建项目
如上图所示：选择 New Project from Template
项目名称及命名空间
视图名及类型
项目创建完成。
4.2配置数据源
在SAP WEB IDE安装目录下：config_masterservice.destinationsdestinations
创建没有后缀名的文件，如下图所示：
文件中配置如下参数(注意替换URL路径及User，Password)：
1 # 2 #Tue Feb 19 08:34:23 UTC 2019 3 Description=GMD HANA 4 Type=HTTP 5 Authentication=BasicAuthentication 6 WebIDEUsage=odata_abap,dev_abap,ui5_execute_abap 7 Name=GMD 8 WebIDEEnabled=true 9 CloudConnectorLocationId=evun-rico 10 URL=http://gmd.xxxxx.com:8000 11 ProxyType=Internet 12 sap-client=300 13 WebIDESystem=GMD 14 User=chenrk 15 Password=XXXXX
文件保存后退出，然后重启WEB IDE平台，打开manifest.json配置数据源，进入Data Sources页面，增加Odata services
选择上一步已经配置好的Destination，例如 GMD HANA，如下图：
Services输入前缀字符Z，下面目录会自动带出SAP后台已创建的OData服务
选择对应的服务，可以看到服务下面的实体集合以及对应的字段名，例如：服务ZRICO_STRU_USR_SRV集合ZUSERSet，然后继续Next
最后Finish完成，如下图：
完成后会自动生成本地元数据XML文件，并显示URL,Local URI,OData Version
4.3配置MODEL
上一步创建了数据源，这里根据数据源配置对应的数据Model，打开manifest.json文件，显示Models标签页，如下图：
点击+符号，添加Models
选择已配置的数据源ZRICO_STRU_USR_SRV，设置为默认Model，如下图：
确认后可以看到Model对应的相关参数，注意数据绑定模式Binding Mode
完成后Ctrl+S进行保存，Model配置完成。
4.4View视图界面设计
选择VIEW文件：MAT.VIEW.XML，右键进入Layout布局编辑器，如下图：
界面中增加了如下组件：Panel,Form,Label,Input,Button,Table，如下图所示： 
小技巧：左端组件拖拽到中间界面后，可以进入Outline进行调整，剪切Cut后粘贴Paste到相应的组件后面。
针对不同组件，需要维护对应的事件及属性：
整个视图布局设计完成后，代码部分如下所示：
1 <mvc:View 2 controllerName="ZRICO_UI5ZRICO_UI5_TEST.controller.MAT" 3 xmlns:html="http://www.w3.org/1999/xhtml" 4 xmlns:mvc="sap.ui.core.mvc" 5 xmlns:core="sap.ui.core" 6 xmlns:form="sap.ui.layout.form" 7 displayBlock="true" xmlns="sap.m"> 8 <App> 9 <pages> 10 <Page title="{i18n>app_header_title}" id="PG_SEARCH"> 11 <content> 12 <Panel 13 xmlns:html="http://www.w3.org/1999/xhtml" 14 xmlns:mvc="sap.ui.core.mvc" 15 xmlns="sap.m" 16 id="__panel0" 17 headerText="{i18n>app_panel_title}"> 18 <content> 19 <form:Form 20 xmlns:html="http://www.w3.org/1999/xhtml" 21 xmlns:mvc="sap.ui.core.mvc" 22 xmlns="sap.m" 23 xmlns:sap.ui.layout.form="sap.ui.layout.form" 24 editable="true" 25 id="__form2"> 26 <form:formContainers> 27 <form:FormContainer 28 id="__container2"> 29 <form:formElements> 30 <form:FormElement 31 id="__element2" 32 label="{i18n>app_panel_lable_usrid}"> 33 <form:fields> 34 <Input 35 id="productInput" 36 type="Text" 37 width="auto" 38 textFormatMode="KeyValue" 39 placeholder="Enter User ID..." 40 showSuggestion="true" 41 showValueHelp="true" 42 valueHelpRequest="handleValueHelp" 43 suggestionItems="{/ZUSERSet}" 44 suggestionItemSelected="suggestionItemSelected"> 45 <suggestionItems> 46 <core:ListItem key="{Usrid}" text="{Usrname}" additionalText="{Usrid}"/> 47 </suggestionItems> 48 </Input> 49 <Button 50 xmlns:html="http://www.w3.org/1999/xhtml" 51 xmlns:mvc="sap.ui.core.mvc" 52 xmlns="sap.m" 53 width="auto" 54 id="app_panel_button_read" 55 icon="sap-icon://search" 56 text="{i18n>app_panel_button_search}" 57 press="onRead"/> 58 59 </form:fields> 60 61 </form:FormElement> 62 63 </form:formElements> 64 65 </form:FormContainer> 66 67 </form:formContainers> 68 <form:layout> 69 <form:ResponsiveGridLayout 70 id="__layout2"/> 71 </form:layout> 72 </form:Form> 73 </content> 74 </Panel> 75 <Table xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" noDataText="No data" id="idTable" items="{path:'/ZUSERSet'}"> 76 <items> 77 <ColumnListItem type="Navigation" press="onItemPress"> 78 <cells> 79 <Text text="{Usrid}"/> 80 <Text text="{Usrname}"/> 81 <Text text="{Usraddr}"/> 82 </cells> 83 </ColumnListItem> 84 </items> 85 <columns> 86 <Column id="__column0"> 87 <header> 88 <Label id="lUsrid" text="{i18n>app_table_header_usrid}"/> 89 </header> 90 </Column> 91 <Column id="__column1"> 92 <header> 93 <Label text="{i18n>app_table_header_usrname}" id="lUsrname"/> 94 </header> 95 </Column> 96 <Column id="__column2"> 97 <header> 98 <Label text="{i18n>app_table_header_usraddr}" id="lUsraddr"/> 99 </header> 100 </Column> 101 </columns> 102 </Table> 103 </content> 104 <footer> 105 <Bar> 106 <contentRight> 107 <Button icon="sap-icon://create" text="Create" press="onCreate"/> 108 <Button icon="sap-icon://edit" text="Edit" press="onEdit"/> 109 <Button icon="sap-icon://delete" text="Delete" press="onDelete"/> 110 </contentRight> 111 </Bar> 112 </footer> 113 </Page> 114 </pages> 115 </App> 116 </mvc:View>
4.5Fragment对话框设计
增加两个对话框：创建/修改事件对话框，Usrid输入框帮助对话框
4.5.1输入框帮助对话框
View增加文件InputUsridDialog.fragment.xml
InputUsridDialog代码部分：
1 <core:FragmentDefinition 2 xmlns="sap.m" 3 xmlns:core="sap.ui.core"> 4 <SelectDialog 5 title="{i18n>inputusriddialog_header_title}" 6 class="sapUiPopupWithPadding" 7 items="{/ZUSERSet}" 8 search="_handleValueHelpSearch" 9 confirm="_handleValueHelpClose" 10 cancel="_handleValueHelpClose"> 11 <StandardListItem 12 title="{Usrid}{Usrname}" 13 description="{Usrid}" /> 14 </SelectDialog> 15 </core:FragmentDefinition>
4.5.2创建/修改事件对话框
创建文件UsrDialog.fragment.xml
UsrDialog代码部分：
1 <core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:f="sap.ui.layout.form"> 2 <Dialog id="UsrDialog" title="{i18n>usrdialog_header_title}"> 3 <f:SimpleForm> 4 <Label text="{i18n>usrdialog_lable_usrid}"/> 5 <Input id="Usrid" value="{Usrid}"/> 6 <Label text="{i18n>usrdialog_lable_usrname}"/> 7 <Input id="Usrname" value="{Usrname}"/> 8 <Label text="{i18n>usrdialog_lable_usraddr}"/> 9 <Input id="Usraddr" value="{Usraddr}"/> 10 </f:SimpleForm> 11 <Toolbar> 12 <ToolbarSpacer/> 13 <Button id="SaveCreate" text="Save"/> 14 <Button id="SaveEdit" text="Save Edit"/> 15 <Button id="CancelButton" text="Cancel"/> 16 </Toolbar> 17 </Dialog> 18 </core:FragmentDefinition>
4.6Control控制事件
创建MAT.controller.js文件，编制事件实现过程
代码部分（注意12行Controller Name与VIEW视图保存一致）：
sap.ui.define([ "sap/ui/core/mvc/Controller", "sap/ui/model/Filter", "sap/ui/model/json/JSONModel", "sap/ui/model/resource/ResourceModel" ], function(Controller,Filter,JSONModel,ResourceModel) { "use strict"; var oModel; var aFilters; var sCurrentPath; // current path var sCurrentUsr; // cureent user return Controller.extend("ZRICO_UI5ZRICO_UI5_TEST.controller.MAT", { inputId: "", onInit: function() { // var mConfig = this.getMetadata().getConfig(); // // resource bundle // var oResourceModel = new ResourceModel({ // bundleName: mConfig.i18nBundle // }); // this.setModel(oResourceModel, "i18n"); // // application data // var rModel = new JSONModel(mConfig.serviceUrl); // this.setModel(rModel); //sap.m.MessageToast.show("Initial"); oModel = this.getOwnerComponent().getModel(); oModel.setUseBatch(false); this.getView().setModel(oModel); //sap.m.MessageToast.show("End Initial"); }, onRead:function(){ var sInputValue = this.getView().byId("productInput").getSelectedKey(); // define filters if ( sInputValue === ""){ aFilters = [ new Filter("Usrid", sap.ui.model.FilterOperator.Contains, sInputValue) ]; } else{ aFilters = [ new Filter("Usrid", sap.ui.model.FilterOperator.EQ, sInputValue)]; } // get data using filter oModel.read("/ZUSERSet", { filters: aFilters, success: function(oData, oResponse){ //window.console.log(oData); } }); var oList = this.getView().byId("idTable"); var oBinding = oList.getBinding("items"); oBinding.filter(aFilters); }, openDialog: function() { var oView = this.getView(); // Open dialog var oUsrDialog = oView.byId("UsrDialog"); if (!oUsrDialog) { oUsrDialog = sap.ui.xmlfragment(oView.getId(), "ZRICO_UI5ZRICO_UI5_TEST.view.UsrDialog"); oView.addDependent(oUsrDialog); } oUsrDialog.open(); // Attach press event for CancelButton var oCancelButton = oView.byId("CancelButton"); oCancelButton.attachPress(function() { oUsrDialog.close(); }); }, // onCreate event onCreate: function() { sap.m.MessageToast.show("Create starting."); var oView = this.getView(); this.openDialog(); var oUsrDialog = oView.byId("UsrDialog"); oUsrDialog.setTitle("Create User"); oView.byId("Usrid").setEditable(true); oView.byId("SaveEdit").setVisible(false); oView.byId("SaveCreate").setVisible(true); // clear oView.byId("Usrid").setValue(""); oView.byId("Usrname").setValue(""); oView.byId("Usraddr").setValue(""); // commit save oView.byId("SaveCreate").attachPress(function() { var oNewEntry = { "Mandt": "300", "Usrid": "", "Usrname": "", "Usraddr": "" }; // populate value from form oNewEntry.Usrid = oView.byId("Usrid").getValue(); oNewEntry.Usrname = oView.byId("Usrname").getValue(); oNewEntry.Usraddr = oView.byId("Usraddr").getValue(); if(!oNewEntry.Usrid){ sap.m.MessageToast.show("Please input the value of Usrid"); return; }else{ // Commit creation operation oModel.create("/ZUSERSet", oNewEntry, { success: function() { sap.m.MessageToast.show("Created successfully."); }, error: function(oError) { window.console.log("Error", oError); } }); } // close dialog if (oUsrDialog) { oUsrDialog.close(); } }); }, //onEdit event onEdit: function() { // no Item was selected if (!sCurrentUsr) { sap.m.MessageToast.show("No Item was selected."); return; } var oView = this.getView(); this.openDialog(); var oUsrDialog = oView.byId("UsrDialog"); oUsrDialog.setTitle("Edit User"); oView.byId("Usrid").setEditable(false); oView.byId("SaveEdit").setVisible(true); oView.byId("SaveCreate").setVisible(false); // populate fields oView.byId("Usrid").setValue(oModel.getProperty(sCurrentPath + "/Usrid")); oView.byId("Usrname").setValue(oModel.getProperty(sCurrentPath + "/Usrname")); oView.byId("Usraddr").setValue(oModel.getProperty(sCurrentPath + "/Usraddr")); // Attach save event oView.byId("SaveEdit").attachPress(function() { var oChanges = { "Mandt": "300", "Usrid":"", "Usrname": "", "Usraddr": "" }; // populate value from form oChanges.Usrid = oView.byId("Usrid").getValue(); oChanges.Usrname = oView.byId("Usrname").getValue(); oChanges.Usraddr = oView.byId("Usraddr").getValue(); // commit creation oModel.update(sCurrentPath, oChanges, { success: function() { sap.m.MessageToast.show("Changes were saved successfully."); }, error: function(oError) { window.console.log("Error", oError); } }); // close dialog if (oUsrDialog) { oUsrDialog.close(); } }); }, // onDelete event onDelete: function() { var that = this; // no Item was selected if (!sCurrentUsr) { sap.m.MessageToast.show("No Item was selected."); return; } var oDeleteDialog = new sap.m.Dialog(); oDeleteDialog.setTitle("Deletion"); var oText = new sap.m.Label({ text: "Are you sure to delete UsrId [" + sCurrentUsr + "]?" }); oDeleteDialog.addContent(oText); oDeleteDialog.addButton( new sap.m.Button({ text: "Confirm", press: function() { that.deleteUsr(); oDeleteDialog.close(); } }) ); oDeleteDialog.open(); }, // deletion operation deleteUsr: function() { oModel.remove(sCurrentPath, { success: function() { sap.m.MessageToast.show("Deletion successful."); }, error: function(oError) { window.console.log("Error", oError); } }); }, onItemPress: function(evt) { var oContext = evt.getSource().getBindingContext(); sCurrentPath = oContext.getPath(); sCurrentUsr = oContext.getProperty("Usrname"); }, //Input usrid value help handleValueHelp : function (oEvent) { var sInputValue = oEvent.getSource().getValue(); this.inputId = oEvent.getSource().getId(); // create value help dialog if (!this._valueHelpDialog) { this._valueHelpDialog = sap.ui.xmlfragment( "ZRICO_UI5ZRICO_UI5_TEST.view.InputUsridDialog", this ); this.getView().addDependent(this._valueHelpDialog); } // create a filter for the binding this._valueHelpDialog.getBinding("items").filter([new Filter( "Usrname", sap.ui.model.FilterOperator.Contains, sInputValue )]); // open value help dialog filtered by the input value this._valueHelpDialog.open(sInputValue); }, _handleValueHelpSearch : function (evt) { var sValue = evt.getParameter("value"); var oFilter = new Filter( "Usrname", sap.ui.model.FilterOperator.Contains, sValue ); evt.getSource().getBinding("items").filter([oFilter]); }, _handleValueHelpClose : function (evt) { var oSelectedItem = evt.getParameter("selectedItem"); if (oSelectedItem) { var productInput = this.byId(this.inputId), //oText = this.byId('selectedKey'), sDescription = oSelectedItem.getDescription(); productInput.setSelectedKey(sDescription); //oText.setText(sDescription); } evt.getSource().getBinding("items").filter([]); }, suggestionItemSelected: function (evt) { var oItem = evt.getParameter('selectedItem'), //oText = this.byId('selectedKey'), sKey = oItem ? oItem.getKey() : ''; //oText.setText(sKey); } }); });
4.7多语言
打开i18n.properties文件，维护字段描述文本：
1 app_header_title=用户信息查询 2 app_panel_title=查询条件 3 app_panel_lable_usrid=用户ID 4 app_panel_button_search=查询 5 app_table_header_usrid=用户ID 6 app_table_header_usrname=用户名称 7 app_table_header_usraddr=用户地址 8 usrdialog_header_title=用户信息维护 9 usrdialog_lable_usrid=用户ID 10 usrdialog_lable_usrname=用户名称 11 usrdialog_lable_usraddr=用户地址 12 usrdialog_button_savecreate=保存 13 usrdialog_button_saveedit=保存修改 14 usrdialog_button_cancel=取消 15 inputusriddialog_header_title=用户ID选择
5.测试
5.1执行
选中项目，点击执行按钮
然后显示页面：
5.2创建
点击右下角创建按钮Create
维护数据后提交
5.3修改
选中行项目，点击EDIT按钮
修改数据后保存
5.4删除
选中行项目，点击Delete按钮
确认Confirm操作后，记录已删除
