Skip to Content
Author's profile photo Vijay Kumar Kalluri

Fragments Example application using XML View Code.

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

1.JPG

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

2.JPG

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

3.JPG

Best Regards

Vijay Kalluri

Assigned tags

      13 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Christopher Solomon
      Christopher Solomon

      The official (and VERY useful!) walk-through has a section devoted to "Fragments" (and another for fragment callbacks.

      SAPUI5 SDK - Demo Kit

      Just curious (and might be useful to note in your blog for others).....why do you make a separate folder for "fragment views" and why not at least make it a subfolder in views directory? Just your preference or what?

      Author's profile photo Rohit Singh
      Rohit Singh

      Hi,

      I followed this tutorial, and added code in the controller

      _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("fragmentViews.filter", this);

                                                                  //debugger;

                                                                  this.getView().addDependent(this.dialog);

                                                      }

                                                      //debugger;

                                                      return this.dialog;

                                          },

                                        

                                          onFilter: function() {

                                                      this._getDialog().open();

                                          },

      Uncaught Error: resource fragmentViews/filter.fragment.xml could not be loaded from ../../resources/fragmentViews/filter.fragment.xml. Check for 'file not found' or parse errors. Reason: Not Found

      This above error i am getting.

      my fragment file is present under frangmentViews folder which is already under webapp folder of my SAP WEB IDE. Please tell me what to do here.

      Author's profile photo Vijay Kumar Kalluri
      Vijay Kumar Kalluri
      Blog Post Author

      Rohit,

      Did you added this line under index.html

      data-sap-ui-resourceroots = '{"fragmentViews": "fragmentViews"}'> 


      Using this line code fragmentViews folder is called..

      Author's profile photo Rohit Singh
      Rohit Singh

      Yes I forgot that line & was going nuts 😀

      Thank you Vijay for your prompt reply anyways.

      Author's profile photo Vijay Kumar Kalluri
      Vijay Kumar Kalluri
      Blog Post Author

      welcome 🙂

      Author's profile photo Vijay Kumar Kalluri
      Vijay Kumar Kalluri
      Blog Post Author

      Thanks Solomon,

      Simply for understand purpose i  created separate folder for fragment Views 🙂

      Author's profile photo Deep Agrawal
      Deep Agrawal

      Hi Vijay,

      Could you pls tell me why

      data-sap-ui-resourceroots = ‘{“fragmentViews”: “fragmentViews”}’

      is needed?

      I am not able to understand the modularizing folder structures concepts...

       

      Thanks,

      Deep

       

      Author's profile photo Former Member
      Former Member

       

      function getFragment(tableID, fragmentPath, tabID, that) {
      var oView = that.getView();
      var oTable = oView.byId(tableID);
      if (!oTable) {
      oTable = sap.ui.xmlfragment(oView.getId(), fragmentPath, that);
      oView.addDependent(oTable);
      }
      that.getView().byId(tabID).addContent(oTable);
      }
      
      if (key == "one") {
      var that = this;
      getFragment("GenelMudurlukFragmentTable", "path.bolgemapZHVL_HR_MAP.view.fragment.GenelMudurluk", "tab1", that);
      } else if (key == "two") {
      var that = this;
      getFragment("GenelIsyerleriFragmentTable", "path.bolgemapZHVL_HR_MAP.view.fragment.GenelIsyerleri", "tab2", that);
      } else if (key == "three") {
      var that = this;
      getFragment("FabrikalarFragmentTable", "path.bolgemapZHVL_HR_MAP.view.fragment.Fabrikalar", "tab3", that);
      } else if (key == "four") {
      var that = this;
      getFragment("LimanlarFragmentTable", "path.bolgemapZHVL_HR_MAP.view.fragment.Limanlar", "tab4", that);
      } else if (key == "five") {
      var that = this;
      getFragment("TeskillerFragmentTable", "path.bolgemapZHVL_HR_MAP.view.fragment.Teskiller", "tab5", that);
      } else {
      console.log("İdari Ünitelerdeki seçim bulunamadı");
      }
      Author's profile photo Gautam Malla
      Gautam Malla

      Where is model.json?

      Author's profile photo Alain More Maceda
      Alain More Maceda

      Hi Vijay,

      Just wanted to let you know that I was stuck in my requirement, but your blog helped me a lot and I was able to complete it.

      Thank you!

      Author's profile photo Vijay Kumar Kalluri
      Vijay Kumar Kalluri
      Blog Post Author

      Thanks Alain 🙂

      Author's profile photo venkatesh venky
      venkatesh venky

      Hi Vijay,

      I added this line  data-sap-ui-resourceroots = ‘{“fragmentViews”: “fragmentViews”}’ in index.html,but its showing undefined.

      And its showing error in console while clicking update button.

      Uncaught Error: resource fragmentViews/getEmpDetails.fragment.xml could not be loaded from resources/fragmentViews/getEmpDetails.fragment.xml. Check for ‘file not found’ or parse errors”

      Please help me.

       

      Thanks,

      Venkatesh

      Author's profile photo K R Manjunath
      K R Manjunath

      Really Nice Blog , Thank you............