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.

/wp-content/uploads/2014/06/1_474020.png

/wp-content/uploads/2014/06/2_474021.png

/wp-content/uploads/2014/06/3_474023.png

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

Capture3.JPG

A sample Fragment code is as shown below

Capture4.JPG

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” />

Capture5.JPG

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

http://scn.sap.com/thread/3536791

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

Hovering Effect and Tile Container

/wp-content/uploads/2014/06/4_474039.png

Animated Icons using plain Jpeg pictures

/wp-content/uploads/2014/06/5_474040.png

Malayalam Language

Capture9.JPG

Hindi Language

Capture8.JPG

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

Capture10.JPG

Hope this topic was helpful.

Regards,

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

To report this post you need to login first.

3 Comments

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

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

    Regards,

    Priiya

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

      (0) 

Leave a Reply