对于本博客,我们使用SAP Fiori演示云版。
我们将首先定位"我的请假"应用程序并在浏览器中启动SAP Web IDE。
我们将扩展S1视图的控制器挂钩,并使用布局扩展替换的视图(第2部分)并将其部署到我们的Fiori启动板(FLP)(第3部分)。
第1部分:打开SAP Fiori演示Cloud Edition,扩展S1视图
第2部分:使用布局编辑器添加控件
第3部分:部署到SAP Fiori启动板
对于这部分练习,您将访问SAP Fiori Demo Cloud Edition提供的Fiori应用程序库,以便选择要扩展的应用程序(自定义)。
打开SAP Fiori DemoCloud Edition
点击"See Demo In Action"体验SAP提供的Fiori应用程序
点击启动应用程序的相关互动程序,您可以体验各种应用程序。我们试试"我的请假"。这是我们要扩展的应用程序。
继续上一章,数据库大数据,我们找到了"我的请假"应用程序。点击"扩展"按钮
点击"开始"按钮。如果您是SAP员工,请跳过步骤3-5.
如果您未注册,请单击"注册"。如果您有帐户,请输入您的用户凭据,然后单击"登录"(跳过步骤4和5)
要注册,云服务器试用,行业云,请输入您的姓名、电子邮件和密码,接受条件并单击"注册"
您将收到一封电子邮件,然后单击"激活"按钮。返回Fiori登录(见第3步)并使用新凭据登录。
等待几秒钟以生成帐户
单击"扩展"图标,大数据都学什么,然后选择"开发应用程序"选项
在搜索字段键入"离开"以轻松找到要扩展的"我的离开请求"应用
启动"SAP Web IDE",建议使用哪个工具直接从Fiori云演示中开发和扩展Fiori和SAPUI5应用程序
单击"确定"确认扩展项目生成
提供您的凭据
您可以更改扩展项目的名称。单击"确定"继续。
SAP Web IDE与生成的扩展项目一起启动
对于这部分练习,您将修改应用程序的逻辑。每当用户单击日期或范围时,屏幕底部会出现一个带有所选内容的"toast"。
图形扩展性窗格("工具>扩展性窗格")是预览和扩展应用程序的最简单方法。如果扩展性窗格是灰色的,请检查您是否选择了您的项目!
提供您的HCP凭据(如果需要)
并预览应用程序
首先,我们需要找到用户选择日期的扩展点。
在"大纲"窗格筛选"显示可扩展元素",向下钻取"控制器>S1"
选择"extHookTapOnDate",右键单击它并选择"扩展UI控制器挂钩"。extHookTabOnDate是当我们选择一个日期或一个日期范围时使用的控制器
我们将收到一个扩展代码存根被创建的通知。我们将直接从通知中打开扩展代码。单击"转到扩展代码"
在编辑器窗格中提供扩展代码
用以下蓝色标记的代码替换钩子实现注释。代码片段检查我们是选择了一天还是一系列日期。结果显示在一个叫做"toast"的小弹出窗口中。
sap.ui.controller("hcm.emp.myleave请求.hcmempmyle文件averequestsExtension.view视图.s1自定义",云服务器怎么样,{
extHookTapOnDate:函数(){
var arr=此.cale.getSelectedDates();
如果(排列长度===1) {
sap.m。消息toast.show(arr[0]);
}否则如果(排列长度>1){
var指数=排列长度–1;
var ORDEDARR=[];
for(arr中的var日期){
订单驱动(日期.parse(arr[日期]);
}
orderedArr.sort排序();
sap.m。消息toast.show(新日期(orderedArr[0]).toDateString()+"–"+新日期(orderedArr[index]).toDateString());
}
}
};
美化(编辑>美化)
别忘了保存!
点击"运行"图标测试应用程序。选择索引.html在弹出窗口中
打开一个新的浏览器选项卡,应用程序在其中运行
选择一个日期进行测试
选择一个日期范围进行测试
关闭预览选项卡