SAPUI5 Fiori Smart Table and Other Controls in Same Page - sapui5

Question

I would like to know that, can I have a Smart Table (With Smart Filter Bar) along with other Fiori controls such as Planning Calendar, Grant Chart or Another Responsive Table within the same page.
Since Page which contains a Smart Table must contain the table's oData service in the page default model, can we have custom UI codes & models for other controls .
Sample Screen

Answer 1

I don't see why that could be a problem. I created a quick UI5 application with both a sap.ui.comp.smarttable.SmartTable and a sap.m.PlanningCalendar.
Btw, I started off with the first Smart Table sample.
Hope this helps.
View
<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>
Controller
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();
}
});