Author: Rudramani Pandey

Introduction

In modern web applications, ensuring that users understand and navigate through the interface efficiently is paramount. This becomes especially vital in comprehensive platforms like SAP UI5, where complex functionalities and data-driven interfaces are the norms. “How to create introduction guides in SAP UI5” serves as a comprehensive guide to set up intuitive step-by-step onboarding instructions for your SAP UI5 application. From header bars, filters, tables, to footer buttons, this guide elucidates how to create a guided tour, ensuring that users have a clear understanding of each interface element. Dive in to provide your users with a smooth introduction to your UI5 application’s functionalities.

How to create introduction guides in SAP UI5

To implement the introduction guide along with the described page, you can leverage the sap.m library of SAP UI5 and the sap.ui.core.delegate.ItemNavigation class for the guided introduction. Let’s go step-by-step:

1. Initial Setup

Include the required libraries in your XML view:

xmlns:m="sap.m"
xmlns:core="sap.ui.core"

2. Setup View with hardcoded data

<mvc:View controllerName="IntroductionGuides.IntroductionGuides.controller.View1" xmlns:mvc="sap.ui.core.mvc" displayBlock="true"
    xmlns="sap.m" xmlns:core="sap.ui.core">
    <Shell id="shell">
        <App id="app">
            <pages>
                <Page title="My Page">
                    <customHeader>
                        <Bar>
                            <contentRight>
                                <Button text="Profile" id="profileBtn"/>
                                <Button text="Logout" id="logoutBtn"/>
                            </contentRight>
                        </Bar>
                    </customHeader>
                    <content>
                        <VBox>
                            <!-- Filter Section -->
                            <HBox>
                                <Input placeholder="Search..." id="searchFilter"/>
                                <ComboBox>
                                    <core:Item key="1" text="Item 1"/>
                                    <core:Item key="2" text="Item 2"/>
                                </ComboBox>
                            </HBox>
                            <!-- Table Section -->
                            <Table id="dataTable">
                                <columns>
                                    <Column width="12em">
                                        <Text text="Product"/>
                                    </Column>
                                    <Column minScreenWidth="Tablet" demandPopin="true">
                                        <Text text="Supplier"/>
                                    </Column>
                                </columns>
                                <items>
                                    <ColumnListItem>
                                        <cells>
                                            <Text text="Product 1"/>
                                            <Text text="SupplierName 1"/>
                                        </cells>
                                    </ColumnListItem>
                                </items>
                            </Table>
                        </VBox>
                    </content>
                    <footer>
                        <Bar id="footerBar">
                            <contentRight>
                                <Button text="Button 1"/>
                                <Button text="Button 2"/>
                            </contentRight>
                        </Bar>
                    </footer>
                </Page>
            </pages>
        </App>
    </Shell>
</mvc:View>

3. Build the Page Layout

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

    return Controller.extend("IntroductionGuides.IntroductionGuides.controller.View1", {

        onAfterRendering: function () {
            this.getView().setModel(new sap.ui.model.json.JSONModel({
                hardcodedData: [ /* your data here */ ],
                hardcodedFilters: [ /* your filter data here */ ]
            }));

            // Start the introduction guide once the UI is rendered
            this.startIntroduction();
        },

        startIntroduction: function () {
            var aSteps = [{
                id: "profileBtn",
                text: "This is the profile button."
            }, {
                id: "logoutBtn",
                text: "Click here to log out."
            }, {
                id: "searchFilter",
                text: "Search using this filter."
            }, {
                id: "comboFilter",
                text: "Choose filters from this dropdown."
            }, {
                id: "dataTable",
                text: "This is your main data table."
            }, {
                id: "footerBar",
                text: "Footer contains various operations."
            }];

            var iCurrentStep = 0;

            var fnShowStep = function () {
                if (iCurrentStep >= aSteps.length) {
                    // Completed the introduction
                    return;
                }

                var oControl = this.getView().byId(aSteps[iCurrentStep].id);
                if (!oControl) {
                    iCurrentStep++;
                    fnShowStep.call(this);
                    return;
                }

                var oPopover = new Popover({
                    title: "Step " + (iCurrentStep + 1),
                    content: new sap.m.Text({
                        text: aSteps[iCurrentStep].text
                    }),
                    contentWidth: "350px", // set the desired width here
                    placement: sap.m.PlacementType.Bottom, // initially set to show below the control
                    footer: new sap.m.Toolbar({
                        content: [
                            new sap.m.ToolbarSpacer(),
                            new sap.m.Button({
                                text: "Next",
                                press: function () {
                                    oPopover.close();
                                    iCurrentStep++;
                                    fnShowStep.call(this);
                                }.bind(this)
                            })
                        ]
                    })
                });

                var oControlPosition = oControl.getDomRef().getBoundingClientRect();
                if (oControlPosition.top > window.innerHeight / 2) {
                    oPopover.setPlacement(sap.m.PlacementType.Top); // if control is in the bottom half of the screen, show popover above it
                }

                oPopover.openBy(oControl);
            };

            fnShowStep.call(this);
        }

    });
});

The startIntroduction method will contain the logic for showcasing different sections. This logic can use modals, popovers, or tooltips to display guidance text. For brevity, I’ve not implemented the detailed logic in the example, but you can use libraries like Intro.js or write custom logic to guide users through the different sections.

The general idea is to highlight and provide information for each section, making the UI interactive and user-friendly for new users.

Introduction

Learn the straightforward approach to displaying a GDPR-compliant disclaimer page in SAP UI5. In this guide, we walk you through the steps to create a popup that appears as your application starts, ensuring users read and acknowledge the disclaimer before proceeding. This method, leveraging the sap.m.Dialog and sap.m.VBox controls, is crucial for applications needing to meet GDPR requirements. Follow along to integrate this solution into your SAP UI5 application.

How to Display Disclaimer Page for GDPR in SAP UI5?

To achieve this in SAP UI5, you can use a Dialog control with a CheckBox inside. Here’s a step-by-step guide to create this functionality:

1. Add necessary libraries: Ensure you’ve added the following libraries to your SAP UI5 project’s index.html or as per your application structure:

<script src="resources/sap/m/library.js" id="sap-ui-bootstrap"></script>
<script src="resources/sap/ui/layout/library.js"></script>

 

2. Create the Disclaimer Dialog: You can add this in your Component.js or App.controller.js‘s onInit function or any initial function that loads as soon as the app starts.

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/m/Dialog",
    "sap/m/Text",
    "sap/m/CheckBox",
    "sap/m/Button"
], function(Controller, Dialog, Text, CheckBox, Button) {
    "use strict";

    return Controller.extend("your.controller.path", {
        onInit: function() {
            this._showDisclaimer();
        },

        _showDisclaimer: function() {
    var oVBox = new sap.m.VBox({
        items: [
            new sap.m.Text({ 
                text: 'Your GDPR compliance related content here. By continuing to use this application, you accept the data terms and conditions.' 
            }),
            new sap.m.CheckBox({ 
                text: 'I have read and understood the disclaimer', 
                selected: false 
            })
        ]
    });

    var oDisclaimerDialog = new sap.m.Dialog({
        title: 'Disclaimer',
        content: [oVBox],
        beginButton: new sap.m.Button({
            text: 'Continue',
            enabled: false,  // Disabled initially
            press: function() {
                oDisclaimerDialog.close();
                
                // Logic to save acceptance in the database would be here.
                
                // Display the success message
                sap.m.MessageToast.show("Your acceptance is saved in the database, you will not be asked again!");
            }
        }),
        afterClose: function() {
            oDisclaimerDialog.destroy();
        }
    });

    oDisclaimerDialog.open();

    // Enabling the continue button only when the checkbox is selected
    oVBox.getItems()[1].attachSelect(function(oEvent) {
        var bSelected = oEvent.getParameter("selected");
        oDisclaimerDialog.getBeginButton().setEnabled(bSelected);
    });
}

    });
});

Introduction

Learn how to print a full screen in SAP UI5 using this straightforward guide. Using HTML and JavaScript, we’ll walk you through the steps to integrate efficient printing capabilities in your SAP UI5 application. Whether it’s an entire page or specific sections, this tutorial ensures you capture the details you need. Enhance your SAP UI5 user experience by adding this practical feature. Thus, you will learn How to print UI5 page.

Print in SAP UI5 using Windows Function

To perform a print in SAP UI5 using HTML and JavaScript, you can utilize the `window.print()` method. This method prompts the user to print the current page. You can just use CTRL + P in your keyboard to trigger print in Windows laptops.

Here’s a simple way to do it:

1. Create a Button in your XML View:

<Button text="Print" press="onPrint"/>

2. Define the onPrint function in your Controller:

onPrint: function() {
    window.print();
}

When the button is pressed, the `onPrint` function will be executed, and the user will be prompted to print the current page.

Print in SAP UI5 after converting to Image

HTML Code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.3/html2canvas.min.js"></script>

View Code:

<Button text="Print after converting to Image" press="onPrinCapturet"/>

Controller Code:

onPrinCapturet: function () {
            var oPage = this.getView().byId("page"); // Assuming "page" is the id of your main Page or container in the XML view

            if (oPage && oPage.getDomRef()) {
                var oDomElement = oPage.getDomRef();

                html2canvas(oDomElement).then(canvas => {
                    var oImgData = canvas.toDataURL("image/png");

                    // Open a new window or iframe and load the image data to print
                    var oPrintWindow = window.open('', '_blank');
                    oPrintWindow.document.write('<img src="' + oImgData + '" onload="window.print();"/>');
                });
            }
        },

Print specific content in SAP UI5

However, if you want to print specific content (not the entire page), you can utilize a hidden `iframe`:

1. Create a Hidden iFrame in your HTML:

<iframe id="printFrame" style="display:none;"></iframe>

2. Add the Print Button in the View:

Add id as “idFrame” to the view.

<Button text="PrintFrame" press="onPrint"/>

3. JavaScript to load content and print:

onPrintFrame: function () {
    var oFrame = document.getElementById("printFrame");
    var oContentWindow = oFrame.contentWindow;
    var oDoc = oContentWindow.document;
    // var oViewContent = this.getView().getContent()[0]; // get content of the whole view
    var oViewContent = this.getView().byId("idFrame");  // get content of the vbox view
    var sHtml = oViewContent.getDomRef().outerHTML;
    oDoc.open();
    oDoc.write("<html><head><title>Print Content</title></head><body>");
    // oDoc.write("<h1>This is the content to print</h1>"); // Replace this with the content you want to print
    oDoc.write(sHtml);  // passing the content of the UI5 view
    oDoc.write("</body></html>");
    oDoc.close();
    oContentWindow.print();
}

In the example above, the content to print is loaded into the hidden iFrame and then printed. This way, only the specific content (and not the entire UI5 application) gets printed.

Please note: Printing from a web application can vary based on the browser, so always test your printing function on different browsers to ensure compatibility.

 

Full Code

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>My Project Ideas</title>
        <link rel="icon" type="image/x-icon" href="https://myprojectideas.com/wp-content/uploads/2021/08/cropped-Screenshot-2021-07-26-at-1.39.04-PM.png"/>
        <script id="sap-ui-bootstrap"
            src="resources/sap-ui-core.js"
            data-sap-ui-theme="sap_fiori_3"
            data-sap-ui-resourceroots='{"PrintPage.PrintPage": "./"}'
            data-sap-ui-compatVersion="edge"
            data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
            data-sap-ui-async="true"
            data-sap-ui-frameOptions="trusted">
        </script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.3/html2canvas.min.js"></script>
    </head>
    <body class="sapUiBody">
        <iframe id="printFrame" style="display:none;"></iframe>
        <div data-sap-ui-component data-name="PrintPage.PrintPage" data-id="container" data-settings='{"id" : "PrintPage"}'></div>
    </body>
</html>

 

View

<mvc:View controllerName="PrintPage.PrintPage.controller.View1" xmlns:core="sap.ui.core" xmlns:layout="sap.ui.layout"
    xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m">
    <Shell id="shell">
        <App id="app">
            <pages>
                <Page id="page">
                    <content>
                        <VBox id="idFrame" justifyContent="Center" alignItems="Center" class="sapUiMediumMargin">
                            <!-- Invoice Heading -->
                            <Title text="Invoice" level="H1" class="sapUiSmallMarginBottom"/>
                            <!-- Invoice Date -->
                            <HBox justifyContent="Center" class="sapUiSmallMarginBottom">
                                <Label text="Invoice Date:" class="sapUiSmallMarginEnd"/>
                                <Text text="20.09.2023"/>
                            </HBox>
                            <!-- Company Name -->
                            <HBox justifyContent="Center" class="sapUiSmallMarginBottom">
                                <Label text="Company Name:" class="sapUiSmallMarginEnd"/>
                                <Text text="RUDE LABS Pvt Ltd"/>
                            </HBox>
                            <!-- Address -->
                            <HBox justifyContent="Center" class="sapUiSmallMarginBottom">
                                <Label text="Address:" class="sapUiSmallMarginEnd"/>
                                <Text text="123, Web Street, Noida, 45678"/>
                            </HBox>
                            <!-- Service Details -->
                            <Title text="Service Details" level="H2" class="sapUiSmallMarginBottom"/>
                            <Table class="sapUiMediumMarginBottom">
                                <columns>
                                    <Column><Text text="Service Name"/></Column>
                                    <Column><Text text="Description"/></Column>
                                    <Column><Text text="Amount"/></Column>
                                </columns>
                                <items>
                                    <ColumnListItem>
                                        <cells>
                                            <Text text="Website Development "/>
                                            <Text text="First Installment"/>
                                            <Text text="1000 USD"/>
                                        </cells>
                                    </ColumnListItem>
                                </items>
                            </Table>
                            <!-- Total Amount -->
                            <HBox justifyContent="End" class="sapUiSmallMarginBottom">
                                <Label text="Total Amount:" class="sapUiSmallMarginEnd"/>
                                <Text text="1000 USD"/>
                            </HBox>
                            <!-- Footer Note -->
                            <Text text="Thank you for doing business with us!" class="sapUiSmallMarginTop"/>
                        </VBox>
                        <Button text="Default Print" press="onPressPrint"/>
                        <Button text="Print after converting to Image" press="onPrinCapturet"/>
                        <Button text="PrintFrame" press="onPrintFrame"/>
                    </content>
                </Page>
            </pages>
        </App>
    </Shell>
</mvc:View>

 

Controller

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

    return Controller.extend("PrintPage.PrintPage.controller.View1", {
        onInit: function () {

        },

        onPrinCapturet: function () {
            var oPage = this.getView().byId("page"); // Assuming "page" is the id of your main Page or container in the XML view

            if (oPage && oPage.getDomRef()) {
                var oDomElement = oPage.getDomRef();

                html2canvas(oDomElement).then(canvas => {
                    var oImgData = canvas.toDataURL("image/png");

                    // Open a new window or iframe and load the image data to print
                    var oPrintWindow = window.open('', '_blank');
                    oPrintWindow.document.write('<img src="' + oImgData + '" onload="window.print();"/>');
                });
            }
        },

        onPressPrint: function (oEvent) {
            window.print();
        },

        onPrintFrame: function () {
            var oFrame = document.getElementById("printFrame");
            var oContentWindow = oFrame.contentWindow;
            var oDoc = oContentWindow.document;
            // var oViewContent = this.getView().getContent()[0]; // get content of the whole view
            var oViewContent = this.getView().byId("idFrame");  // get content of the vbox view
            // var sHtml = oViewContent.getDomRef().outerHTML;
            oDoc.open();
            oDoc.write("<html><head><title>Print Content</title></head><body>");
            // oDoc.write("<h1>This is the content to print</h1>"); // Replace this with the content you want to print
            oDoc.write(sHtml);  // passing the content of the UI5 view
            oDoc.write("</body></html>");
            oDoc.close();
            oContentWindow.print();
        }

    });
});