sapui5 - SAPUI5 Fiori 智能表和同一页面中的其他控件
问题描述
我想知道,我是否可以在同一页面中拥有一个智能表(带智能过滤栏)以及其他 Fiori 控件,例如计划日历、授予图表或另一个响应表。
由于包含 Smart Table 的 Page 必须在页面默认模型中包含 table 的 oData 服务,我们是否可以为其他控件提供自定义 UI 代码和模型。
示例屏幕
解决方案
我不明白为什么这可能是个问题。我用sap.ui.comp.smarttable.SmartTable和sap.m.PlanningCalendar创建了一个快速的 UI5 应用程序。
顺便说一句,我从第一个 Smart Table 示例开始。
希望这可以帮助。
看法
<mvc:View xmlns:core="sap.ui.core" xmlns="sap.m" xmlns:smartFilterBar="sap.ui.comp.smartfilterbar" xmlns:smartTable="sap.ui.comp.smarttable"
xmlns:mvc="sap.ui.core.mvc" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:unified="sap.ui.unified"
xmlns:app="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1" controllerName="sap.ui.comp.sample.smarttable.SmartTable"
height="100%">
<App>
<pages>
<Page title="Title">
<content>
<VBox fitContainer="false">
<smartFilterBar:SmartFilterBar id="smartFilterBar" entitySet="LineItemsSet" persistencyKey="SmartFilter_Explored"
basicSearchFieldName="Bukrs" enableBasicSearch="true">
<smartFilterBar:controlConfiguration>
<smartFilterBar:ControlConfiguration key="Bukrs">
<smartFilterBar:defaultFilterValues>
<smartFilterBar:SelectOption low="0001"></smartFilterBar:SelectOption>
</smartFilterBar:defaultFilterValues>
</smartFilterBar:ControlConfiguration>
<smartFilterBar:ControlConfiguration key="Gjahr">
<smartFilterBar:defaultFilterValues>
<smartFilterBar:SelectOption low="2014"></smartFilterBar:SelectOption>
</smartFilterBar:defaultFilterValues>
</smartFilterBar:ControlConfiguration>
</smartFilterBar:controlConfiguration>
<!-- layout data used to make the table growing but the filter bar fixed -->
<smartFilterBar:layoutData>
<FlexItemData shrinkFactor="0"/>
</smartFilterBar:layoutData>
</smartFilterBar:SmartFilterBar>
<smartTable:SmartTable id="LineItemsSmartTable" entitySet="LineItemsSet" smartFilterId="smartFilterBar" tableType="Table"
useExportToExcel="true" beforeExport="onBeforeExport" useVariantManagement="false" useTablePersonalisation="true" header="Line Items"
showRowCount="true" persistencyKey="SmartTableAnalytical_Explored" enableAutoBinding="true" app:useSmartField="true"
class="sapUiResponsiveContentPadding">
<!-- layout data used to make the table growing but the filter bar fixed -->
<smartTable:layoutData>
<FlexItemData growFactor="1" baseSize="0%"/>
</smartTable:layoutData>
</smartTable:SmartTable>
</VBox>
<PlanningCalendar id="PC1" rows="{path: '/people'}" appointmentsVisualization="Filled" groupAppointmentsMode="expanded"
appointmentsReducedHeight="true" appointmentSelect="onClickAssignment" showEmptyIntervalHeaders="false" viewChange="onStartDateChange"
startDateChange="onStartDateChange" rowSelectionChange="onResourceSelectedInCalendar" rowHeaderClick="onRowHeaderClick"
intervalSelect="onIntervalSelect" class="calendarMarginBottom">
<toolbarContent>
<Title text="Calendar" titleStyle="H4"/>
<ToolbarSpacer/>
</toolbarContent>
<rows>
<PlanningCalendarRow id="PCR1" icon="{pic}" title="{name}" text="{role}" key="{key}"
appointments="{path : 'appointments', templateShareable: 'true'}" intervalHeaders="{path: 'headers', templateShareable: 'true'}">
<appointments>
<unified:CalendarAppointment id="MCA1" startDate="{start}" endDate="{end}" icon="{icon}" title="{title}" text="{info}" type="{type}"
tentative="{tentative}" hover="onAppointmentHover"/>
</appointments>
<intervalHeaders>
<unified:CalendarAppointment startDate="{start}" endDate="{end}" icon="{icon}" title="{title}" type="{type}"></unified:CalendarAppointment>
</intervalHeaders>
</PlanningCalendarRow>
</rows>
</PlanningCalendar>
</content>
</Page>
</pages>
</App>
控制器
sap.ui.controller("sap.ui.comp.sample.smarttable.SmartTable", {
onInit: function() {
this.fillSmartTable();
this.fillCalendar();
},
//
// CALENDAR
//
fillCalendar: function() {
// create model
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({
startDate: new Date("2017", "0", "15", "8", "0"),
people: [{
pic: "sap-icon://employee",
name: "Max Mustermann",
role: "team member",
appointments: [{
start: new Date("2018", "6", "26", "08", "30"),
end: new Date("2018", "6", "26", "09", "30"),
title: "Meet John Miller",
type: "Type02",
tentative: false
},{
start: new Date("2018", "6", "26", "11", "30"),
end: new Date("2018", "6", "26", "13", "30"),
title: "New quarter",
type: "Type10",
tentative: false
}],
headers: [{
start: new Date("2018", "6", "26", "14", "30"),
end: new Date("2018", "6", "26", "16", "30"),
title: "Private",
type: "Type05"
}]
}]
});
this.byId("PC1").setModel(oModel);
},
handleAppointmentSelect: function(oEvent) {
var oAppointment = oEvent.getParameter("appointment"),
sSelected;
if (oAppointment) {
sSelected = oAppointment.getSelected() ? "selected" : "deselected";
sap.m.MessageBox.show("'" + oAppointment.getTitle() + "' " + sSelected + ". \n Selected appointments: " + this.byId("PC1").getSelectedAppointments()
.length);
} else {
var aAppointments = oEvent.getParameter("appointments");
var sValue = aAppointments.length + " Appointments selected";
sap.m.MessageBox.show(sValue);
}
},
handleSelectionFinish: function(oEvent) {
var aSelectedKeys = oEvent.getSource().getSelectedKeys();
this.byId("PC1").setBuiltInViews(aSelectedKeys);
},
//
// SMART TABLE
//
fillSmartTable: function() {
var oModel, oView;
jQuery.sap.require("sap.ui.core.util.MockServer");
var oMockServer = new sap.ui.core.util.MockServer({
rootUri: "sapuicompsmarttable/"
});
this._oMockServer = oMockServer;
oMockServer.simulate("https://sapui5.hana.ondemand.com/test-resources/sap/ui/comp/demokit/sample/smarttable/mockserver/metadata.xml",
"https://sapui5.hana.ondemand.com/test-resources/sap/ui/comp/demokit/sample/smarttable/mockserver/");
oMockServer.start();
oModel = new sap.ui.model.odata.ODataModel("sapuicompsmarttable", true);
oModel.setCountSupported(false);
oView = this.getView();
oView.setModel(oModel);
},
onBeforeExport: function(oEvt) {
var mExcelSettings = oEvt.getParameter("exportSettings");
// GW export
if (mExcelSettings.url) {
return;
}
// For UI5 Client Export --> The settings contains sap.ui.export.SpreadSheet relevant settings that be used to modify the output of excel
// Disable Worker as Mockserver is used in explored --> Do not use this for real applications!
mExcelSettings.worker = false;
},
onExit: function() {
this._oMockServer.stop();
}
});
推荐阅读
- javascript - 未处理的拒绝(TypeError):已解析未定义并且在控制台中“未捕获(在承诺中)TypeError:已解析未定义”
- javascript - 列出本地存储数据
- python - 使用 ngrok 进行 Python 套接字服务器端口转发
- java - 一个场景的Java系统设计
- reflection - 为什么我在java中通过反射改变字符串s1常量,其他s2,s3也改变了?
- kubernetes - azure中的visual studio kubernetes项目503错误
- python - Python:无法将套接字数据作为邮件发送
- javascript - 将 javascript 模块导入 ASP.NET MVC 项目的问题
- python - python中两个值之间的差异
- google-apps-script - 如何使用网络应用程序谷歌脚本编辑器在电子表格中获取或显示地址和地理编码地理定位?