Smart Controls in Flexible Column Layout Using Nor...

nuthansingam · ‎12-11-2023

Hello SAP/ SAP Community,

Objective: This blog post provides insights about the Smart controls in Flexible Column Layout using Northwind Service and how to implement in SAP Business Application Studio environment.

SAPUI5 smart controls are a special category of controls that help to boost application development and are part of the SAP Fiori Elements offering. Specific feature of the smart controls is that they can interpret the OData protocol and be adaptive depending on the protocol’s annotations.

In this blog post, I’ll demo about Smart List in Flexible Column Layout using Northwind Service and Displaying Northwind Service Entity containing Images.

Flexible Column Layout: The Flexible Column Layout (FCL) is a layout control that allows developers to create responsive applications with a flexible column structure. It is particularly useful for building applications that adapt well to different device sizes and orientations. The FCL supports multi-column layouts, enabling the display of different views or content in multiple columns, which can be collapsed or expanded based on the available screen space.

For more information, please refer to this below links

https://sapui5.hana.ondemand.com/sdk/#/topic/c4de2df385174e58a689d9847c7553bd.html

https://experience.sap.com/fiori-design-web/flexible-column-layout/

Smart List: a smart list is typically associated with the Smart Controls framework. The Smart List is one such control that simplifies the creation of a list-based UI by dynamically generating the list structure based on the underlying data model.

For more information, please refer to this below link

https://sapui5.hana.ondemand.com/#/api/sap.ui.comp.smartlist.SmartList

So, let’s get started!

Steps Followed,

Step1: Creating an Application in Projects Folder

Click on File, “New Project from Template” option.

Select “SAP Fiori application” Template and click on Start Button.

Select “Basic” Template and click on Next Button.

Select: In Data source- “Connect to System”.

In System- “Northwind” Destination.

Give Service Path of Northwind Service- “/V2/Northwind/Northwind.svc/”

Give Project Attributes and click on Finish Button as shown in the below image:

Application is Created Successfully.

In View1 XML just give:

Name Space Library for Flexible Column Layout Control- xmlns:f=”sap.f”

Give Flexible Column Layout Control with aggregation “BeginColumnPages” as shown in below Image:

OUTPUT SCREEN:

Now Give Smart List Control in Begin Column Pages of Flexible Column Layout.

Give Name Space Library- xmlns:smartList=”sap.ui.comp.smartlist”

Give the Smart List Control with properties as shown in the Below Image.

Taken Employees Entity set.

For Smart List I am taking JSON Model- (I.e. SmartListModel ).

If we use JSON Model for Smart List, we need to use “listBindingPath” property for Model Binding.

In listBindingPath property I binded SmartListModel with Employees Entity.

If we are using Model Binding Path for smart controls, we need to use Native Parent Control aggregations of Smart Controls.

In Controller, given Read Call for Employees Entity set for reading the Data in Employees Entity set.

Declared Read Function - (that.EmployeesReadCall) in onInit.

Below Image showing Read service call of Employees Entity Set of Northwind service

OUTPUT SCREEN:

Output screen showing Smart List with Employees Data in Begin Column Pages of Flexible Column Layout.

FORMATTER FOR DISPLAYING IMAGES IN PHOTO PROPERTY OF EMPLOYEES ENTITY

Using icon property to display the Images of Employees in Employees Entity Photo Property.

Photo should be converted From String to Sub-string with Base64 format to display the Images from that property, for that I am using Formatter.

Here, below image showing the Formatter function for converting the Photo.

Controller.js

<mvc:View controllerName="com.flexiblecolapp.controller.View1"

    xmlns:mvc="sap.ui.core.mvc" displayBlock="true"

    xmlns="sap.m"

    xmlns:f="sap.f"

    xmlns:smartList="sap.ui.comp.smartlist">

    <Page id="page" title="{i18n>title}" titleAlignment="Center">

        <content>

            <f:FlexibleColumnLayout id="FlexibleColumnID" backgroundDesign="Transparent" initialBeginColumnPage="FirstPage" layout="ThreeColumnsBeginExpandedEndHidden">

                <f:beginColumnPages>

                    <Page title="BeginColumnPage with Smart List">

                        <content>

                            <smartList:SmartList id="ItemsST" entitySet="Employees" listBindingPath="SmartListModel>/Employees" header="Employees List" showRowCount="true" showFullScreenButton="true" enableAutoBinding="true" selectFields="EmployeeID,FirstName,LastName,City,Region,Country">

                                <smartList:listItemTemplate>

                                    <StandardListItem title="{SmartListModel>FirstName} {SmartListModel>LastName}" info="{SmartListModel>City}-{SmartListModel>Country}" description="{SmartListModel>Country}" icon="{path:'SmartListModel>Photo', formatter: '.formatPhoto'}" type="Navigation" press="onPressToSec" />

                                </smartList:listItemTemplate>

                            </smartList:SmartList>

                        </content>

                    </Page>

                </f:beginColumnPages>

                <f:midColumnPages>



                </f:midColumnPages>

            </f:FlexibleColumnLayout>

        </content>

    </Page>

</mvc:View>

xml code

sap.ui.define([

    "sap/ui/core/mvc/Controller",

    "sap/ui/model/json/JSONModel",

    "sap/m/MessageBox"

],

    /**

     * @param {typeof sap.ui.core.mvc.Controller} Controller

     */

    function (Controller, JSONModel, MessageBox) {

        "use strict";



        return Controller.extend("com.flexiblecolapp.controller.View1", {

            onInit: function () {

                var that = this;

                // Enabling the Begin Column Page to Occupy Full screen Display //

                var oFlexibleColumnLayout = this.getView().byId("FlexibleColumnID");

                oFlexibleColumnLayout.setLayout(sap.f.LayoutType.OneColumn);



                // Read Call Function for Employees Entity Set //

                that.EmployeesReadCall();

            },

            EmployeesReadCall: function () {

                var that = this;

                //Model for Smart List//

                var oModel = new sap.ui.model.json.JSONModel();

                that.getView().setModel(oModel, "SmartListModel");

                var oData = this.getOwnerComponent().getModel();

                oData.read("/Employees", {

                    success: function (data, res) {

                        that.getView().getModel("SmartListModel").setData({

                            "Employees": data.results

                        });

                    },

                    error: function () {

                        alert("Could not load ODATA service!");

                    }

                });

            },



            // Formatter for Displaying Images in Smart List Icon of Employees Photo property Conversion //

            formatPhoto: function (sVal) {

                var sTrimmed;

                if (typeof sVal === "string") {

                    sTrimmed = sVal.substr(104);

                    return "data:image/bmp;base64," + sTrimmed;

                }

            },

        });

    });

Controller.js

OUTPUT SCREEN:

Smart List showing Employee images in the icons.

For showing Begin Column Pages to Full Screen Display Occupancy, Give the Below code as shown in the image:

OUTPUT SCREEN:

Begin Column Page occupied Full Screen Display.

RESPONSIVENESS:

Responsiveness

In this blog post we have learnt about Smart List in Flexible Column Layout using Northwind Service and Displaying Northwind Images in Business Application Studio(BAS).

In the next blog post we will see Continuation of this Blog--" Implementation of Smart Filter Bar, Smart Table and Object Page Layout in Mid Column Pages and End Column Pages of Flexible Column Layout and Expand Entity's in BAS".

Note: All the images are shown in this blog are related to Northwind service Entity’s.



Regards,

Singampalli Nuthan Kanth Brahmana