Skip to Content
Author's profile photo Bince Mathew

Creating A Fiori UI5 Application Using Fragments

Creating A Fiori UI5 Application Using Fragments


Hi All,

         In this document i will try to cover the concept of Fragments  in developing a Fiori Application.First of all what is Fragments!! Fragments is a technique used to split the codes into different files which will be dynamically called into a specified area in a UI5 page to get the final Output UI.

       Fragments files are created with the extension <fragmentname>.fragment.xml. These files will be containing the code like any other UI5 views.But when a page is having lots of codes and multiple people are working on the the same UI5 project via Team Share feature in eclipse.Then dividing the codes of a single page into multiple fragments will help multiple users to  specifically work on their code fragment without affecting the Main Codes.And these multiple fragments are dynamically called into the respective areas of the page to get the final desired output.This document is helpful mainly for consultants who are a bit familier with Fiori UI5 development.

      For the purpose of explaining fragment concept,I have developed an UI5 application for Airticket Booking.In the screenshot below i have described how i am splitting the design codes into different fragments.If you look into the picture you can see different fragment codes coming together to make the final UI5 page.




The below screenshot represents how i have put the fragment codes in my project under the “Fragments” folder.


A sample Fragment code is as shown below


Once you have defined your Fragment file.Now you have to call the Fragment into the Main view of your UI to dynamically load the codes in that Fragment file.

The fragment file is called into the view using the following syntax

<core:Fragment fragmentName=”<Your fragment file path>” type=”XML” />


On my next document i will cover the Step By Step details in making this UI5 application which will also cover Custom Style Sheets usage for hovering effect,dynamic Icons,Standard and Custom Tile Containers,Maintaining support for different languages for your UI texts via MessageBundle properties etc.

To have an idea on maintaining custom languages support in your UI5 application,Please refer the below link

Below are some screenshots of the UI5 custom features we can achieve through css customization

Hovering Effect and Tile Container


Animated Icons using plain Jpeg pictures


Malayalam Language


Hindi Language


Arabic Language(Note: RTL Languages are not officially supported by Fiori)


Hope this topic was helpful.


Bince Mathew C

Update: The details about making this UI5 application is being added in this blog of mine Creating A Fiori Like Application With Custom Style Sheets

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Sreehari V Pillai
      Sreehari V Pillai

      This doc made my day 🙂 thanks

      Author's profile photo Priya Jha
      Priya Jha

      Hi ,

      I have been trying to add a XML fragment to my icon tab filter, everytime I do, I get the error:

      Uncaught (in promise) Error: resource patient_detail/Fragments/ProgramDetail.fragment.xml could not be loaded from ../resources/patient_detail/Fragments/ProgramDetail.fragment.xml. Check for 'file not found' or parse errors. Reason: Not Found(…)

      Please guide, i am working on web ide.



      Author's profile photo Michael Appleby
      Michael Appleby

      Hi Priya,

      Please create a new Discussion marked as a Question.  Comments to a Blog (or Document) is not the right vehicle for asking questions as the results are not easily searchable.  Once your issue is solved, a Discussion with the solution (and marked with Correct Answer) makes the results visible to others experiencing a similar problem.  If a blog or document is related, put in a link.

      NOTE: Getting the link is easy enough for both the author and Blog.  Simply MouseOver the item, Right Click, and select Copy Shortcut.  Paste it into your Discussion.  You can also click on the url after pasting.  Click on the A to expand the options and select T (on the right) to Auto-Title the url.

      Thanks, Mike (Moderator)

      SAP Technology RIG