How to create introduction guides in SAP UI5

by | Sep 20, 2023 | SAP, UI5, UI5 Programs

Home » SAP » UI5 » UI5 Programs » How to create introduction guides in SAP UI5

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

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.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Author