Vijay Kumar Kalluri

May 29, 2016 13 minute read

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

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

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

Christopher Solomon

May 29, 2016 at 3:58 pm

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?

Rohit Singh

June 3, 2016 at 6:18 am

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.

Vijay Kumar Kalluri

Blog Post Author

June 3, 2016 at 7:06 am

Rohit,

Did you added this line under index.html

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

Using this line code fragmentViews folder is called..

Rohit Singh

June 3, 2016 at 7:20 am

Yes I forgot that line & was going nuts 😀

Thank you Vijay for your prompt reply anyways.

Vijay Kumar Kalluri

Blog Post Author

June 3, 2016 at 7:25 am

welcome 🙂

Vijay Kumar Kalluri

Blog Post Author

June 3, 2016 at 7:03 am

Thanks Solomon,

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

Deep Agrawal

August 15, 2017 at 5:22 am

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

Fatih Demir

January 26, 2018 at 11:57 am

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ı");
}

Gautam Malla

April 9, 2018 at 1:23 pm

Where is model.json?

Alain More Maceda

February 19, 2019 at 6:44 pm

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!

Vijay Kumar Kalluri

Blog Post Author

March 13, 2019 at 12:27 pm

Thanks Alain 🙂

venkatesh venky

August 8, 2019 at 11:09 am

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

K R Manjunath

December 12, 2019 at 10:43 am

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

Fragments Example application using XML View Code.

Assigned Tags