Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
former_member182329
Participant

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

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

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.

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

3 Comments
Labels in this area