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

To report this post you need to login first.

6 Comments

You must be Logged on to comment or reply to a post.

  1. 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?

    (0) 
    1. 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.

      (0) 
      1. Vijay Kumar Kalluri 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..

        (0) 

Leave a Reply