Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
vijay_kumar49
Active Contributor

Hello Friends,



Fragments are light-weight UI parts which can be reused, defined similar to views, but Fragment does not have any controller or other behavior code involved.

Whenever we need to use some similar UI parts many times in our application/views we create Fragments of those UI parts because Fragments are reusable and are light weight compared to Views and Controls. Fragments are stored with in the application itself and can be used by that application only.

SAPUI5 provides different types of fragments:Ref:Fragments

        • XML fragments
        • HTML fragments
        • JS fragments

It should not possible to create JSON Fragment.

Every Fragment file declaration should follow below syntax is <View-name>.fragment.<view-type>

                                Ex:  empDetails.fragment.xml

Create Simple UI5 application and create a new folder “fragmentViews” under WebContent folder to store all fragment views under the created folder

index.html


<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
        <script src="resources/sap-ui-core.js"
                id="sap-ui-bootstrap"
                data-sap-ui-libs="sap.m"
                data-sap-ui-theme="sap_bluecrystal"
                data-sap-ui-resourceroots = '{"fragmentViews": "fragmentViews"}'>
                <!-- Initialize the fragmentViews under index -->
        </script>
        <!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
        <script>
                sap.ui.localResources("sapui5_fragment_xml");
                var app = new sap.m.App({initialPage:"idempDetails1"});
                var page = sap.ui.view({id:"idempDetails1", viewName:"sapui5_fragment_xml.empDetails", type:sap.ui.core.mvc.ViewType.XML});
                app.addPage(page);
                app.placeAt("content");
        </script>
    </head>
    <body class="sapUiBody" role="application">
        <div id="content"></div>
    </body>
</html>

empDetails.view.xml


<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m" controllerName="sapui5_fragment_xml.empDetails"
    xmlns:html="http://www.w3.org/1999/xhtml">
    <Page title="Fragment Example">
        <content>
            <Table id="idTable" mode="SingleSelectLeft" backgroundDesign="Solid">
                <columns>
                    <Column><Text text="Personnel No." /></Column>
                    <Column><Text text="FIRSTNAME" /></Column>
                    <Column><Text text="LASTNAME" /></Column>
                    <Column><Text text="DEPARTMENT" /></Column>
                    <Column><Text text="E-Mail" /></Column>
                </columns>
            </Table>
            <Button text="GETDATA" press="onPress" />
            <Button text="UPDATE" press="onUpdate" />
            <Button text="CREATE" press="onCREATE" />
            <Button text="DELETE" press="onDelete" />
        </content>
    </Page>
</core:View>

empDetails.controller.js


sap.ui.controller("sapui5_fragment_xml.empDetails",
        {
            /**
             * Called when a controller is instantiated and its View controls
             * (if available) are already created. Can be used to modify the
             * View before it is displayed, to bind event handlers and do other
             * one-time initialization.
             *
             * @memberOf sapui5_fragment_xml.empDetails
             */
            onInit : function() {
                // instantiating the model of type json
                var oModel = new sap.ui.model.json.JSONModel();
                // load data into model
                oModel.loadData("model/employeeData.json");
                // Set the model to Table
                var oTable = this.getView().byId("idTable");
                oTable.setModel(oModel);
                // Template
                var oTemplate = new sap.m.ColumnListItem({
                    cells : [ new sap.m.Text({
                        text : "{PersNo}"
                    }), new sap.m.Text({
                        text : "{FirstName}"
                    }), new sap.m.Text({
                        text : "{LastName}"
                    }), new sap.m.Text({
                        text : "{Department}"
                    }), new sap.m.Text({
                        text : "{EMail}"
                    })
                    ]
                });
                oTable.bindAggregation("items", {
                    path : "/d/results",
                    template : oTemplate
                })
            },
            onUpdate : function() {
                // get selected data from table (reference of table)
                var oTable = this.getView().byId("idTable");
                var persnoVal = oTable.getSelectedItem().getBindingContext().getProperty("PersNo");
                var firstnameVal = oTable.getSelectedItem().getBindingContext().getProperty("FirstName");
                var lastnameVal = oTable.getSelectedItem().getBindingContext().getProperty("LastName");
                var deptVal = oTable.getSelectedItem().getBindingContext().getProperty("Department");   
                var eMail = oTable.getSelectedItem().getBindingContext().getProperty("EMail");
                // get the fragment
                this._getDialog().open()
             
                // get the reference of input fields of fragment and set the values
                sap.ui.getCore().byId("idFragment--idPersNo").setValue(persnoVal);
                sap.ui.getCore().byId("idFragment--idFirstName").setValue(firstnameVal);
                sap.ui.getCore().byId("idFragment--idLastName").setValue(lastnameVal);
                sap.ui.getCore().byId("idFragment--idDepartment").setValue(deptVal);               
                sap.ui.getCore().byId("idFragment--idEMail").setValue(eMail);
            },
            _getDialog : function() {
                // create a fragment with dialog, and pass the selected data
                if (!this.dialog) {
                    // This fragment can be instantiated from a controller as follows:
                    this.dialog = sap.ui.xmlfragment("idFragment","fragmentViews.getEmpDetails", this);
                    //debugger;
                }
                //debugger;
                return this.dialog;
            },
            closeDialog : function() {
                this._getDialog().close()
            },
            onSave : function() {
                //debugger;
             
                var oPersonInfo = sap.ui.getCore().byId("idFragment--idPersNo").getValue();
                var oFirstName = sap.ui.getCore().byId("idFragment--idFirstName").getValue();
                var oLastName = sap.ui.getCore().byId("idFragment--idLastName").getValue();
                var oDept = sap.ui.getCore().byId("idFragment--idDepartment").getValue();
                var oEmail = sap.ui.getCore().byId("idFragment--idEMail").getValue();
             
                var finalData ={
                        "PersNo": oPersonInfo,
                        "FirstName": oFirstName,
                        "LastName": oLastName,
                        "Department": oDept,
                        "EMail": oEmail
                }           
             
            },
     
        });

getEmpDetails.fragment.xml


<core:FragmentDefinition
    xmlns="sap.m"
    xmlns:l="sap.ui.layout"
    xmlns:f="sap.ui.layout.form"
    xmlns:core="sap.ui.core">
 
    <Dialog title = "INFORMATION">
    <l:Grid defaultSpan = "L12 M12 S12" width = "auto" id = "idGrid">
    <l:content>
        <f:SimpleForm id="SimpleFormDisplay354"
            minWidth="1024"
            maxContainerCols="2"
            editable="false"
            layout="ResponsiveGridLayout"
            title="Address"
            labelSpanL="3"
            labelSpanM="3"
            emptySpanL="4"
            emptySpanM="4"
            columnsL="2"
            columnsM="2">
            <f:content>
                <Label text="Person No." />
                <Input id = "idPersNo"/>
             
                <Label text="FirstName" />
                <Input id = "idFirstName"/>
             
                <Label text="LastName" />
                <Input id = "idLastName"/>
             
                <Label text="Department" />
                <Input id = "idDepartment"/>
             
                <Label text="E-Mail" />
                <Input id = "idEMail"/>
            </f:content>
        </f:SimpleForm>
    </l:content>
    </l:Grid>
    <buttons>
    <Button text = "CLOSE" press = "closeDialog" type = "Reject"/>
    <Button text = "SAVE" press = "onSave" type = "Accept"/>
    </buttons>
    </Dialog>
</core:FragmentDefinition>

Output Screen

when we select any record and  click on "Update" Button Fragment is View is Open.


Best Regards

Vijay Kalluri

13 Comments
Labels in this area