Be inspired by SAP Fiori | SAP FIORI Online Training

Since SAPUI5 is the leading user interface strategy for SAP, all the new developments focus on UI5. SAP is developing a lot of business apps for their ERP System named SAP Fiori.

SAP Fiori – meaning ‘flowers’ in Italian – represents SAP’s intent to deliver consumer-grade user experience to our most broadly and frequently used business transactions. Delivered with a fresh and modern user interface, SAP Fiori apps adhere to a consistent and responsive design that allows users to seamlessly experience the apps across various interaction channels – desktop, tablet, and mobile. The apps follow a simple and intuitive interaction pattern that enables users to accomplish their tasks quickly and effortlessly.

Good too know, that all innovative features will mostly be influenced by SAP Fiori Apps and sometimes will find their way into the core of the SAPUI5 and also into OPENUI5.

If you are looking for additional information concerning a good design guide than have a look at the

For SAP Fiori Online Training contact 9000056459

SAP Fiori Design Guidelines

This is a great place to be influenced by a state-of-the-art-mobile-first web experience.

You will find a deep look into the internally used design patterns and how they should be used.

There is a special section called Prototyping Kit where you can download a Microsoft Power Point file containing all the used patterns for creating UIMockUps. Everything is editable inside PowerPoint. If you additionally install the SAP-Icon-Font "SAP-icons.ttf" located in the UI5SDK "resources/sap/ui/core/themes/base/fonts" you can also customize the icons.

Maybe you will also be a little bit inspired by this nicely designed guidelines.

Factory Function Example using SAP FIORI

This is another example of factory function in which heterogeneous controls are added in same row.With the help of  factory function you can bind same row with heterogeneous property names.This is beauty of factory function.it plays very important role in table binding,list binding...etc.

Application Structure

View Part

core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"

  controllerName="view.S1" xmlns:html="http://www.w3.org/1999/xhtml">

 <Page title="Factory Function">

  <content>

 <Table id="tabId">

    <columns>

     <Column>

      <Text text="Name" />

     </Column>

     <Column>

      <Text text="Mobile" />

     </Column>

     <Column>

      <Text text="E-mail" />

     </Column>

    </columns>

          </Table>

  </content>

 </Page>

</core:View>

Controller Part

sap.ui.controller("view.S1", {

 onInit : function() {

  //calling method...........

  this.tableBindMethod();

 },

 // called method.................

 tableBindMethod : function() {

  var that = this;

  var json = new sap.ui.model.json.JSONModel("model/record.json")

  var tabId = this.byId("tabId");

  tabId.setModel(json);

  tabId.bindItems("/Records", function(Id, path) {

   return new sap.m.ColumnListItem({

    cells : [ new sap.m.Text({

     text : "{name}"

    }),

    // calling method..............

    that.factoryfunction(Id, path),

    new sap.m.Text({

     text : "{email}"

    }) ]

   })

  });

 },

  // called method.......

 factoryfunction : function(Id, Cpath) {

  var key = Cpath.getProperty("key");

  if (key === "L") {

   return new sap.m.Link({

    text : "{mobile}"

   })

  }

    else if (key === "C") {

   return new sap.m.CheckBox({

    selected : true,

   })

  } else if (key === "I") {

   return new sap.m.Input({

    value : "{mobile}"

   })

  } else {

   return new sap.m.Text({

    text : "{mobile}"

   })

  }

 }

});

record.json

 {"Records":[

 {

"name":"vikas Kumar",

"mobile":123,

"email":"v@gmail.com",

"key":"L"

},

{

"name":"Nikhil Kumar",

"mobile":111,

"email":"nik@gmail.com",

"key":""

},

{

"name":"Bhaskar Kumar",

"mobile":444,

"email":"Bhasker@gmail.com",

"key":""

},

{

"name":"Rohit Kumar",

"mobile":2222,

"email":"Rohit@gmail.com",

"key":"C"

},

{

"name":"Ram Kumar",

"mobile":133323,

"email":"Ram@gmail.com",

"key":""

},

{

"name":"Vishal Kumar",

"mobile":123123123,

"email":"vishal@gmail.com",

"key":""

},

{

"name":"raju Kumar",

"mobile":656566,

"email":"raju@gmail.com",

"key":"I"

}

]}