Fragments in SAP Fiori Application

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

1.What are Fragments ?

Fragments are reusable UI parts like views and can be used in any other app if they fits in.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”. For eg: XXXX.fragment.

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

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

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

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

 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

最后编辑：2019-08-27

作者：yangsen

本站为个人博客网站，全由我个人维护，我从事SAP开发13年，其它ERP开发7年，基本都是零售行业。本站记录工作学习的过程， 有SAP相关询问专、兼职工作可随时联系我。 有网站相关的问题可直接在文章下方留言，或者联系我。 邮件：yan252@163.com给我。 QQ:415402519

站内专栏 站点