SAPUI5 Fiori Smart Table and Other Controls in Same Page

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();
    }
});