Adding a Side Panel to ObjectPageLayout in SAPUI5

To add an additional side panel to an ObjectPageLayout that can be opened and closed via a button click, you can follow these steps:

1. Basic Implementation

<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.uxap" xmlns:m="sap.m">
    <ObjectPageLayout id="objectPageLayout">
        <!-- Your existing ObjectPageLayout content -->

        <!-- Add a button to toggle the panel -->
        <headerContent>
            <m:Button 
                icon="sap-icon://menu2"
                press=".onToggleSidePanel"
                tooltip="Toggle Side Panel"/>
        </headerContent>

        <!-- Side Panel -->
        <m:Panel 
            id="sidePanel"
            width="300px"
            expandable="false"
            expanded="false"
            headerText="Additional Information"
            class="sapUiResponsiveMargin"
            visible="false">
            <!-- Your panel content here -->
            <m:Text text="This is the additional side panel content"/>
        </m:Panel>
    </ObjectPageLayout>
</mvc:View>

2. Controller Implementation

sap.ui.define([
    "sap/ui/core/mvc/Controller"
], function(Controller) {
    "use strict";

    return Controller.extend("your.namespace.controller.YourController", {
        onToggleSidePanel: function() {
            var oPanel = this.byId("sidePanel");
            var bVisible = oPanel.getVisible();

            // Toggle visibility
            oPanel.setVisible(!bVisible);

            // If you want animation, you could use slide effects
            // this._togglePanelWithAnimation(oPanel, !bVisible);
        },

        // Optional: Animation version
        _togglePanelWithAnimation: function(oPanel, bShow) {
            if (bShow) {
                oPanel.setVisible(true);
                oPanel.$().css("margin-right", "-300px")
                    .animate({"margin-right": "0px"}, 300);
            } else {
                oPanel.$().animate({"margin-right": "-300px"}, 300, function() {
                    oPanel.setVisible(false);
                });
            }
        }
    });
});

3. CSS Styling (Optional)

Add this to your CSS to position the panel correctly:

#sidePanel {
    position: fixed;
    right: 0;
    top: 50px; /* Adjust based on your header height */
    bottom: 0;
    z-index: 100;
    margin: 0 !important;
    border-radius: 0;
}

Alternative Approach Using sap.tnt.SideNavigation

For a more polished side navigation panel:

<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.uxap" xmlns:m="sap.m" xmlns:tnt="sap.tnt">
    <ObjectPageLayout id="objectPageLayout">
        <!-- Your content -->

        <headerContent>
            <m:Button icon="sap-icon://menu2" press=".onToggleSideNavigation"/>
        </headerContent>
    </ObjectPageLayout>

    <tnt:SideNavigation id="sideNav" expanded="false" class="sideNavigationCustom">
        <tnt:NavigationList>
            <!-- Your navigation items -->
        </tnt:NavigationList>
    </tnt:SideNavigation>
</mvc:View>

Controller:

onToggleSideNavigation: function() {
    var oSideNav = this.byId("sideNav");
    oSideNav.setExpanded(!oSideNav.getExpanded());
}

CSS:

.sideNavigationCustom {
    position: fixed;
    right: 0;
    top: 50px;
    bottom: 0;
    z-index: 100;
}

Choose the approach that best fits your requirements. The first solution is simpler, while the second provides more built-in navigation features.