In this tutorial, we will learn what are fragments and how they are defined, used in the Fiori app development.

What are Fragments ?

Fragments are reusable UI parts like views. Fragments should only contains UI elements. It do not have controllers like views.

Event handling methods for UI elements which are defined in Fragment can be implemented in the respective view controllers in which they are used.

Lets take an example to understand them better, If an application having dialog box and this dialog box is used in many views by declaring it separately in every view.

By following this approach we are declaring same UI control in many places which leads to development overhead. To avoid this we use fragments. Declare the dialog control in a fragments and use the fragment where ever you need to use the dialog control.

They are 3 types of fragments in SAPUI5.

• JS fragments
• XML fragments
• HTML fragments.

Every fragment file declaration should end with “.fragment.xml“. For eg: DialogBox.fragment.xml

Let us create a sample application and understand it better.

1. Create a SAPUI5 application project in Eclipse.

2. Enter the view name and click on Next or Finish.

3. Create a new folder “fragments” under WebContent folder to store all fragments files. Right click on WebContent folder  and choose New → Folder.

4. Now create a new fragment file which contains reusable dialog control. To create fragment file Right click on newly created fragments folder → New → File. In this example we are going to create a new XML fragment.

5. Double click on the file to write the code. We start writing the code by declaring the Fragment definition and include the UI libraries which are needed to declare the UI elements in the fragments. In the code below i have declared Dialog in the fragment.

Dialog.fragment.xml

<core:FragmentDefinition xmlns="sap.m" xmlns:l="sap.ui.layout" xmlns:core="sap.ui.core">
	<Dialog title="My Dialog">
		<content>
			<Text text="This dialog is from XML fragment" />
		</content>
		<endButton>
			<Button text="Close" press="onClose" />
		</endButton>
	</Dialog>
</core:FragmentDefinition>

6. This completes our reusable fragment declaration. Next step will be call to this fragment and open the dialog in a view. To do this go to the view in the SAPUI5 application project and write the below code inside it.

MainView.view.xml

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
       controllerName="demofragments.MainView" xmlns:html="http://www.w3.org/1999/xhtml">
	<Page title="Demo on Fragments">
		<content>
			<Button text="Open Dialog" press="onPress">
			</Button>
		</content>
	</Page>
</core:View>

In the view we added a button and declared a press event. The press event handler will be implemented in view controller. When you click on the button we need to open the dialog.

7. Go to view controller and implement the “onPress” event of the button. Inside this event handler method we will get the instance of the fragment by providing the full path and by using the same instance we can call the dialog.

MainView.controller.js

sap.ui.controller("demofragments.MainView", {

    onPress : function() {
	this._Dialog = sap.ui.xmlfragment("demofragments.fragments.Dialog",
		this);
	this._Dialog.open();
    },
    
});

8. Now we ready to test the application. What we should expect is, by clicking on the button a dialog should be opened.

9. Now we need to implement the event handler of the button Close on the popup dialog which we declared in the fragments.

As mentioned earlier all the event handler implementations of the fragments are performed in respective view controllers where they are used. So  go to the view controller and write the below code to close the popup dialog.

MainView.controller.js

sap.ui.controller("demofragments.MainView", {

    onPress : function() {
	this._Dialog = sap.ui.xmlfragment("demofragments.fragments.Dialog",
		this);
	this._Dialog.open();
    },
    
    // onClose event handler of the fragment
    onClose : function() {
	this._Dialog.close();
    }
});

 10. Now save the code changes and test the application again, we should be able to close the popup dialog.

By this we have successfully learned the concept of fragments in SAPUI5 application development.

Stay tuned to us for more SAPUI5 tutorials 🙂

Please feel free to comment and let us know your feedback. Subscribe for more updates.

If you liked it, please share it! Thanks!