Day 5

Custom Fiori Application

Development
 Create Fiori Application in Business Application Studio

Class Content

DAY 5 ©https://zapyard.com/ P A G E
|1
 Create Fiori Application in Business Application Studio

Source Code
View

<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns:viz="sap.viz.ui5.controls"

xmlns:viz.feeds="sap.viz.ui5.controls.common.feeds"

xmlns:viz.data="sap.viz.ui5.data" xmlns="sap.m" xmlns:l="sap.ui.layout" xmlns:core="sap.ui.core"

xmlns:f="sap.ui.layout.form" controllerName="com.sap.zfioritraining.controller.Home"
displayBlock="true">

<Shell id="shell">

<App id="app">

<pages>

<Page id="page" title="{i18n>title}" class="page PageHeaderCSS">

<content>

<f:SimpleForm id="SimpleFormToolbar" editable="true" layout="ResponsiveGridLayout"

labelSpanXL="4" labelSpanL="3" labelSpanM="4" labelSpanS="12" adjustLabelSpan="false"
emptySpanXL="0" emptySpanL="4" emptySpanM="0" emptySpanS="0" columnsXL="2" columnsL="1"
columnsM="1" singleContainerFullSize="false" ariaLabelledBy="Title1">

<f:toolbar>

<Toolbar id="TB1">

<Title text="{i18n>formTitle}"/>

<ToolbarSpacer/>

<Button type="Emphasized" press="fnAdd" text="{i18n>Add}" icon="sap-

icon://add"/>

<Button type="Emphasized" press="fnEdit" text="{i18n>Edit}" icon="sap-

icon://edit"/>

<Button type="Accept" id="Save" press="fnSave" class="SubmitBtn"

text="{i18n>Save}" icon="sap-icon://save"/>

DAY 5 ©https://zapyard.com/ P A G E
|2
 Create Fiori Application in Business Application Studio
</Toolbar>

</f:toolbar>

<f:content>

<Label text="{i18n>Name}" class="FormLabel" required="true"/>

<Input id="Name" liveChange="fnLiveChnage" showValueHelp="true"

valueHelpRequest="fnNameF4" change="fnChange" value=""/>

<Label text="{i18n>Id}" class="FormLabel" required="true"/>

<Input id="Id" value="" maxLength="10" placeholder="{i18n>Id_Placeholder}"/>

<Label text="{i18n>Email}" class="FormLabel"/>

<Input id="Email" value="{Street}"/>

<Label text="{i18n>Gender}" class="FormLabel"/>

<ComboBox id="Gender" items="">

<core:Item key="F" text="Female" />

<core:Item key="M" text="Male" />

<core:Item key="O" text="Others" />

</ComboBox>

<Label text="{i18n>Purpose_Of_Coming}" required="true" class="FormLabel"/>

<TextArea id="Purpose"></TextArea>

</f:content>

</f:SimpleForm>

<!-- <List noDataText="Drop list items here" growing="true" growingThreshold="5"

id="list0" items="{MyOrderList>/}">

<items>

<ObjectListItem title="{MyOrderList>ShipName}" type="Active" icon="sap-

icon://employee" press="onListItemPress" number="{MyOrderList>OrderID}">

DAY 5 ©https://zapyard.com/ P A G E
|3
 Create Fiori Application in Business Application Studio
<ObjectAttribute text="{MyOrderList>ShipAddress} {MyOrderList>ShipCity}
{MyOrderList>ShipCountry} {MyOrderList>ShipPostalCode}"/>

<ObjectAttribute text="{MyOrderList>OrderDate}"/>

</ObjectListItem>

</items>

</List> -->

<viz:VizFrame id="idVizFrame" uiConfig="{applicationSet:'fiori'}"

height='100%' width="100%" vizType='line'>

<viz:dataset>

<viz.data:FlattenedDataset data="{oGraphModel>/}">

<viz.data:dimensions>

<viz.data:DimensionDefinition name="Year"

value="{oGraphModel>Year}" />

</viz.data:dimensions>

<viz.data:measures>

<viz.data:MeasureDefinition name="Target"

value="{oGraphModel>Target}" />

<viz.data:MeasureDefinition name="Ach"

value="{oGraphModel>Ach}" />

</viz.data:measures>

</viz.data:FlattenedDataset>

</viz:dataset>

DAY 5 ©https://zapyard.com/ P A G E
|4
 Create Fiori Application in Business Application Studio
<viz:feeds>

<viz.feeds:FeedItem id='valueAxisFeed' uid="valueAxis" type="Measure"

values="Target" />

<viz.feeds:FeedItem id='valueAxisFeed1' uid="valueAxis" type="Measure"

values="Ach" />

<viz.feeds:FeedItem id='categoryAxisFeed' uid="categoryAxis" type="Dimension"

values="Year" />

</viz:feeds>

</viz:VizFrame>

<viz:VizFrame id="idVizFrame1" uiConfig="{applicationSet:'fiori'}"

height='100%' width="100%" vizType='pie'>

<viz:dataset>

<viz.data:FlattenedDataset data="{oGraphModel>/}">

<viz.data:dimensions>

<viz.data:DimensionDefinition name="Year"

value="{oGraphModel>Year}" />

</viz.data:dimensions>

<viz.data:measures>

<viz.data:MeasureDefinition name="Ach"

value="{oGraphModel>Ach}" />

</viz.data:measures>

</viz.data:FlattenedDataset>

</viz:dataset>

<viz:feeds>

DAY 5 ©https://zapyard.com/ P A G E
|5
 Create Fiori Application in Business Application Studio
<viz.feeds:FeedItem uid="size" type="Measure"

values="Ach" />

<viz.feeds:FeedItem uid="color" type="Dimension"

values="Year" />

</viz:feeds>

</viz:VizFrame>

</content>

</Page>

</pages>

</App>

</Shell>

</mvc:View>

DAY 5 ©https://zapyard.com/ P A G E
|6
 Create Fiori Application in Business Application Studio

Controller

sap.ui.define([

"sap/ui/core/mvc/Controller",

"com/sap/zfioritraining/util/formatter",

"sap/m/MessageBox",

"sap/m/MessageToast",

],

function (Controller,formatter,MessageBox,MessageToast) {

"use strict";

return Controller.extend("com.sap.zfioritraining.controller.Home", {

formatter: formatter,

onInit:function(){

var aGraph=[

"Year":"1990",

"Target":"1781991",

"Ach":"20020020"

},

DAY 5 ©https://zapyard.com/ P A G E
|7
 Create Fiori Application in Business Application Studio
"Year":"1995",

"Target":"3781991",

"Ach":"30020020"

},

"Year":"2000",

"Target":"4781991",

"Ach":"40020020"

},

"Year":"2005",

"Target":"5781991",

"Ach":"30020020"

},

"Year":"2010",

"Target":"6781991",

"Ach":"70020020"

},{

"Year":"2015",

"Target":"7781991",

"Ach":"80020020"

},

"Year":"2020",

"Target":"9781991",

DAY 5 ©https://zapyard.com/ P A G E
|8
 Create Fiori Application in Business Application Studio
"Ach":"100020020"

];

var oGraphModel=new sap.ui.model.json.JSONModel();

oGraphModel.setData(aGraph);

this.getView().setModel(oGraphModel,"oGraphModel");

this.getOwnerComponent().getModel("SubModel").read("/Orders",{

success:function(OData){

var aData=OData.results;

for(var i=0;i<aData.length;i++){

var sOrderDate=aData[i].OrderDate;

var monthArray = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul",

"Aug", "Sep", "Oct", "Nov", "Dec"

];

if (sOrderDate !== null && sOrderDate !== "" && sOrderDate !== undefined) {

var date = new Date(sOrderDate.getTime() + sOrderDate.getTimezoneOffset() *

60000);

DAY 5 ©https://zapyard.com/ P A G E
|9
 Create Fiori Application in Business Application Studio
aData[i].OrderDate= parseInt(date.getDate()) + " " +
monthArray[date.getMonth()] + ", " + parseInt(date.getYear() + 1900);

var oOrderModel=new sap.ui.model.json.JSONModel();

oOrderModel.setData(aData);

this.getView().setModel(oOrderModel,"MyOrderList");

}.bind(this),

error:function(oError){

})

},

// var a;

//this.a;

fnNameF4:function(){

if(!this.NameF4){

this.NameF4=sap.ui.xmlfragment("com.sap.zfioritraining.fragments.EmployeeF4",this);

this.getView().addDependent(this.NameF4);

DAY 5 ©https://zapyard.com/ P A G E
| 10
 Create Fiori Application in Business Application Studio
}

this.NameF4.open();

},

fnAdd:function(){

if(!this.EmployeeDialog){

this.EmployeeDialog=sap.ui.xmlfragment("com.sap.zfioritraining.fragments.Employee",this);

this.getView().addDependent(this.EmployeeDialog);

this.EmployeeDialog.open();

},

fnEmployeeDialogClose:function(){

this.EmployeeDialog.close();

},

fnEdit:function(){

MessageBox.success("The quantity you have reported exceeds the quantity planed.");

MessageToast.show("How are you?")

// new sap.m.MessageBox().warning("The quantity you have reported exceeds the quantity

planed.");

},

fnSave: function(){

var sName=this.getView().byId("Name").getValue();

DAY 5 ©https://zapyard.com/ P A G E
| 11
 Create Fiori Application in Business Application Studio
var sId=this.getView().byId("Id").getValue();

var sPurpose=this.getView().byId("Purpose").getValue();

// if(sName !== "" && sName.trim()!=="" && sId !== "" && sId.trim()!==""

// && sPurpose !== "" && sPurpose.trim()!==""){

// alert("Ok to go!!!!")

// }else{

// alert("Fill the mandatory fields.")

// }

var Flag="";

if(sPurpose !== "" && sPurpose.trim()!==""){

Flag="";

this.getView().byId("Purpose").setValueState("None");

}else{

Flag="Warning";

this.getView().byId("Purpose").setValueState("Warning");

if(sName !== "" && sName.trim()!==""){

Flag="";

this.getView().byId("Name").setValueState("None");

}else{

Flag="Warning";

this.getView().byId("Name").setValueState("Warning");

DAY 5 ©https://zapyard.com/ P A G E
| 12
 Create Fiori Application in Business Application Studio
if(sId !== "" && sId.trim()!==""){

Flag="";

this.getView().byId("Id").setValueState("None");

}else{

Flag="Warning";

this.getView().byId("Id").setValueState("Warning");

// this.getView().byId("Save").setEnabled(true); //Enable

// this.getView().byId("Save").setEnabled(false);

},

fnLiveChnage:function(a){

//alert(a.getSource().getValue());

},

fnOpenFragment: function(oEvent) {

if (!this._Dialog) {

this._Dialog = sap.ui.xmlfragment("com.sap.zfioritraining.fragments.Employee", this);

this.getView().addDependent(this._Dialog);

DAY 5 ©https://zapyard.com/ P A G E
| 13
 Create Fiori Application in Business Application Studio

this._Dialog.open();

},

onClose:function(){

this._Dialog.close();

});

});

DAY 5 ©https://zapyard.com/ P A G E
| 14
 Create Fiori Application in Business Application Studio

CSS

.PageHeaderCSS .sapMBarPH {

height: 2.75rem;

line-height: 2.75rem;

background: #1e981e;

.PageHeaderCSS .sapMIBar-CTX .sapMTitle {

color: #f9f9f9;

text-shadow: none;

.SubmitBtn span.sapMBtnInner.sapMBtnAccept {

background-image: none;

background-color: #1e9c50;

border-color: #107e3e;

color: #f7faf8;

.SubmitBtn:not(.sapMBtnDisabled):not(.sapMSBActive)>span.sapMBtnInner.sapMBtnAccept:not(.sapM
BtnActive):not(.sapMToggleBtnPressed)>.sapMBtnIcon {

color: #ffffff;

.FormLabel{

color:#3f3f3f;

font-weight: 700;

DAY 5 ©https://zapyard.com/ P A G E
| 15
 Create Fiori Application in Business Application Studio

.page{

background-color: antiquewhite;

DAY 5 ©https://zapyard.com/ P A G E
| 16
 Create Fiori Application in Business Application Studio

Employee Fragment

<core:FragmentDefinition xmlns="sap.m" xmlns:l="sap.ui.layout"

xmlns:f="sap.ui.layout.form" xmlns:core="sap.ui.core">

<Dialog showHeader="true" title="{i18n>My Dialog}" verticalScrolling="false"

horizontalScrolling="false"

contentHeight="auto" initialFocus="idButtonClose"
class="ehsIncReportincidentCustomDialog">

<content>

<VBox class="sapUiSmallMargin">

<f:SimpleForm id="SimpleFormToolbar"

editable="true"

layout="ResponsiveGridLayout"

labelSpanXL="4"

labelSpanL="3"

labelSpanM="4"

labelSpanS="12"

adjustLabelSpan="false"

emptySpanXL="0"

emptySpanL="4"

emptySpanM="0"

emptySpanS="0"

columnsXL="2"

columnsL="1"

columnsM="1"

DAY 5 ©https://zapyard.com/ P A G E
| 17
 Create Fiori Application in Business Application Studio
singleContainerFullSize="false"

ariaLabelledBy="Title1" >

<f:content>

<Label text="Name" />

<Input value="{SupplierName}" />

<Label text="Street/No." />

<Input value="{Street}">

</Input>

<Input value="{HouseNumber}">

<layoutData>

<l:GridData span="XL2 L1 M3 S4" />

</layoutData>

</Input>

<Label text="ZIP Code/City" />

<Input value="{ZIPCode}">

<layoutData>

<l:GridData span="XL2 L1 M3 S4" />

</layoutData>

</Input>

<Input value="{City}" />

<Label text="Country" />

<Select id="country" selectedKey="{Country}">

<items>

<core:Item text="England" key="England"/>

DAY 5 ©https://zapyard.com/ P A G E
| 18
 Create Fiori Application in Business Application Studio
<core:Item text="Germany" key="Germany"/>

<core:Item text="USA" key="USA"/>

</items>

</Select>

</f:content>

</f:SimpleForm>

</VBox>

</content>

<buttons>

<Button id="idButtonClose" text="{i18n>Submit}"

press="fnEmployeeDialogClose" type="Default"></Button>

</buttons>

</Dialog>

</core:FragmentDefinition>

DAY 5 ©https://zapyard.com/ P A G E
| 19
 Create Fiori Application in Business Application Studio

Employee F4
<core:FragmentDefinition

xmlns="sap.m"

xmlns:core="sap.ui.core">

<SelectDialog

noDataText="{i18n>No_Text}"

title="{i18n>Orders}"

search=".onSearch"

growing="true"

growingThreshold="4"

confirm=".onValueHelpDialogClose"

cancel=".onValueHelpDialogClose"

showClearButton="true"

items="{MyOrderList>/}">

<ObjectListItem title="{MyOrderList>ShipName}" type="Active" icon="sap-

icon://employee" press="onListItemPress" number="{MyOrderList>OrderID}">

<ObjectAttribute text="{MyOrderList>ShipAddress} {MyOrderList>ShipCity}

{MyOrderList>ShipCountry} {MyOrderList>ShipPostalCode}"/>

<ObjectAttribute text="{MyOrderList>OrderDate}"/>

</ObjectListItem>

</SelectDialog>

</core:FragmentDefinition>

DAY 5 ©https://zapyard.com/ P A G E
| 20