SAPUI5/SAP FIORI snippets and information: 2017

Wednesday 29 November 2017

Controller Binding of Pie Chart With JSON

Click here and follow my SAP UI5/FIORI snippets and information Page

I have made Pie Chart example in controller with JSON Data and below I have shown Application Structure,View Part,Controller Part,JSON Data and index part.Go through it and please let me know in case of any issue/doubt.

Application Structure

View Part

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

xmlns="sap.m" controllerName="piechartdy.S1" xmlns:html="http://www.w3.org/1999/xhtml"

xmlns:viz="sap.viz.ui5.controls">

</content>

</Page>

</core:View>

Controller Part

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

// Initialization of application

onInit:function(){

// Local JSON Data

var data=

[{

"Country": "Canada",

"population": 34789000

}, {

"Country": "China",

"population": 1339724852

}, {

"Country": "France",

"population": 65350000

}, {

"Country": "Russia",

"population": 817944333

}, {

"Country": "India",

"population": 1210193422

}, {

"Country": "Nepal",

"population": 31349

}];

//Calling method

this.pieChartbinding(data);

// Called method

pieChartbinding:function(chartData){

var json = sap.ui.model.json.JSONModel(chartData),

pageId = this.byId("PageId"),

flatDataSet=sap.viz.ui5.data.FlattenedDataset({

dimensions:[{

axis:1,

name:"country",

value:"{Country}"

}

measures:[{

name:"Population",

value:"{population}"

}],

data:{

path:"/"

}

});

var pie=sap.viz.ui5.Pie({

width:"100%",

height:"100%",

title:{

visible:true,

text:"Revenue By Country"

legend:{

title:{

visible:false,

}

dataset:flatDataSet

});

// Setting model to pie chart

pie.setModel(json);

// Adding pie chart to page

pageId.addContent(pie);

}

});

index.html

<!DOCTYPE HTML>

<html>

<head>

data-sap-ui-libs="sap.m,sap.viz" data-sap-ui-theme="sap_bluecrystal">

</script>

sap.ui.localResources("piechartdy");

var app = new sap.m.App({initialPage:"idS11"});

var page = sap.ui.view({id:"idS11", viewName:"piechartdy.S1", type:sap.ui.core.mvc.ViewType.XML});

app.addPage(page);

app.placeAt("content");

</script>

</head>

</body>

</html>

Result

Monday 27 November 2017

View Binding of Pie Chart With JSON

Click here and follow my SAP UI5/FIORI snippets and information Page
I have made Pie Chart example in view with JSON Data and below I have shown Application Structure,View Part,Controller Part and JSON Data.Go through it and please let me know in case of any issue/doubt.

Application Structure

View Part

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

xmlns="sap.m" controllerName="piechartex.S1" xmlns:html="http://www.w3.org/1999/xhtml"

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

xmlns:viz.data="sap.viz.ui5.data" xmlns:vtypes="sap.viz.ui5.types">

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

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

<viz:dataset>

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

<viz.data:dimensions>

<viz.data:DimensionDefinition name="Country"

value="{Country}" />

</viz.data:dimensions>

<viz.data:measures>

<viz.data:MeasureDefinition name="population"

value="{population}" />

</viz.data:measures>

</viz.data:FlattenedDataset>

</viz:dataset>

<viz:feeds>

<viz.feeds:FeedItem uid="size" type="Measure"

values="population" />

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

values="Country" />

</viz:feeds>

</viz:VizFrame>

</content>

</Page>

</core:View>

Controller Part

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

// Initialization of application

onInit:function(){

oChart=this.byId("pieid");

oChart.setVizProperties({

legend:{

title:{visible:false}

title: {

text: "Population By Country"

}

});

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

// Loading data to model

json.loadData("model/data.json",null,false);

// Setting model to current view

this.getView().setModel(json);

// Setting model to pie chart

oChart.setModel(json);

}

});

JSON Data

[{

"Country": "Canada",

"population": 34789000

}, {

"Country": "China",

"population": 1339724852

}, {

"Country": "France",

"population": 65350000

}, {

"Country": "Russia",

"population": 817944333

}, {

"Country": "India",

"population": 1210193422

}, {

"Country": "Nepal",

"population": 31349

}]

Result

Saturday 18 November 2017

Example of Multi-Input

Click here and follow my SAP UI5/FIORI snippets and information Page
I have taken Multi-Input control and below created a table with hard coded data .When users press table's line item then ID of that line item will be displayed in Multi-Input field.User can't pushed duplicate ID in Multi-Input field.User can delete particular ID from Multi-Input field.Go through it and please let me know in case of any issue/doubt.

Application Structure

View Part

<mvc:View controllerName="multiInputWithTokenEG.controller.S1" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"

displayBlock="true" xmlns="sap.m">

<App>

<pages>

<Page title="{i18n>title}">

</MultiInput>

</Column>

</Column>

</Column>

</columns>

<cells>

</cells>

</ColumnListItem>

<cells>

</cells>

</ColumnListItem>

<cells>

</cells>

</ColumnListItem>

<cells>

</cells>

</ColumnListItem>

<cells>

</cells>

</ColumnListItem>

</Table>

</content>

</Page>

</pages>

</App>

</mvc:View>

Controller Part

sap.ui.define([

"sap/ui/core/mvc/Controller"

], function(Controller) {

"use strict";

return Controller.extend("multiInputWithTokenEG.controller.S1", {

onInit: function() {

// Creating custom array at the time of initialization of application.

this.ArrTok = [];

// When user press table's line item then this method will call.

handleMethodPress:function(oEvent){

var that=this;

var id=oEvent.getParameter("listItem").getCells()[0].getText();

var flag;

if(this.ArrTok.length===0){

this.ArrTok.push({"ID":id});

}else{

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

flag = 0;

if(id===this.ArrTok[i].ID){

flag = 1;

sap.m.MessageToast.show("Already exist");

break;

}

if(flag===0){

this.ArrTok.push({"ID":id});

}

// Passing array to model .

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

var multiInput = this.byId("multiId");

multiInput.unbindAggregation();

// "Vikas" is just a alias name here.

this.getView().setModel(json,"Vikas");

var tem = new sap.m.Token({

text:"{Vikas>ID}",

// When user delete ID from Multi-Input then this method will call.

"delete" : function(oEvent){

var id = oEvent.getParameter("token").getText();

oEvent.getParameter("token").destroy();

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

if(id===that.ArrTok[i].ID){

that.ArrTok.splice(i,1);

break;

}

});

// Binding tokens to Multi-Input field.

multiInput.bindAggregation("tokens","Vikas>/",tem);

});

Result

When user press on table's line item then ID will be set in Multi-Input field.

User selected first line item of table.

User selected last line item of table.

User can delete particular item from Multi-Input field .

After deleting there is only one item in Multi-Input field.

User can't push same ID in Multi-Input field.

Monday 6 February 2017

Reusability of Fragment

Click here and follow my SAP UI5/FIORI snippets and information Page

I have taken three inputs fields in a view.If user click on input field(F4) then fragment would open with data.I have created only one fragment and calling same fragment for all inputs fields.Go through it and please let me know in case of any issue/doubt.

Application Structure

View Part

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m" controllerName="fragmentreuse.fragmentreuse" xmlns:html="http://www.w3.org/1999/xhtml"
xmlns:f="sap.ui.layout.form">
<Page title="Reusability of Fragment" id="page_id" class="sapUiSizeCompact">
<content>
<f:SimpleForm editable="false" layout="ResponsiveGridLayout"
labelSpanL="4" labelSpanM="4" emptySpanL="4" emptySpanM="4"
columnsL="1" columnsM="1">
<Label text="Id" design="Bold" />
<Input showValueHelp="true" valueHelpRequest="Open_Fragment_Handle1"
id="Stid" valueHelpOnly="true" placeholder="Enter id" />
<Label text="Name" design="Bold" />
<Input showValueHelp="true" valueHelpRequest="Open_Fragment_Handle2"
id="nameId" valueHelpOnly="true" placeholder="Enter Name" />
<Label text="Course" design="Bold" />
<Input showValueHelp="true" valueHelpRequest="Open_Fragment_Handle3"
id="courseId" valueHelpOnly="true" placeholder="Enter course" />
</f:SimpleForm>
</content>
</Page>
</core:View>

genericFrag.fragment.xml

<vikas:FragmentDefinition xmlns="sap.m"
xmlns:vikas="sap.ui.core">
<SelectDialog noDataText="No Data Found" confirm="handleConfirm">
</SelectDialog>
</vikas:FragmentDefinition>

Controller Part

sap.ui.controller("fragmentreuse.fragmentreuse", {

onInit : function() {
this.json = new sap.ui.model.json.JSONModel();

// Loading the data from model....
this.json.loadData("model/data.json", null, false);
this.getView().setModel(this.json);
},

// If user click on first F4 then this will call....
Open_Fragment_Handle1:function(evt){
this.inputId=this.byId("Stid");
this.click="IdPress";
var propertName="{id}";
var title="Ids";
// Calling method....
this.genericMethod(title,propertName);
},

// If user click on second F4 then this will call....
Open_Fragment_Handle2:function(){
this.inputId=this.byId("nameId");
var propertName="{name}";
var title="Names";
this.click="NamesPress";
// Calling method....
this.genericMethod(title,propertName);

},

// If user click on third F4 then this will call....
Open_Fragment_Handle3:function(){
this.inputId=this.byId("courseId");
var propertName="{course}";
var title="Courses";
this.click="CoursesPress";
// Calling method....
this.genericMethod(title,propertName);
},

// Generic method for opening fragment with respective data (called method)....
genericMethod:function(titleVal,propertName){
var template=new sap.m.StandardListItem({
title:propertName
});
if(!this.frag) {
this.frag=new sap.ui.xmlfragment("fragmentreuse.genericFrag",this);
}
this.frag.setTitle(titleVal);
this.frag.bindAggregation("items","/Records",template);
//Setting model to fragment....
this.frag.setModel(this.json);
this.frag.open();
},

// When user click on item of fragment then this will fire....
handleConfirm:function(evt){
property=evt.getParameter("selectedItem").getBindingContext().getObject();
var conditionVal=this.click;
switch(conditionVal){
case "IdPress":
this.inputId.setValue(property.id);
break;
case "NamesPress":
this.inputId.setValue(property.name);
break;
case "CoursesPress":
this.inputId.setValue(property.course);
break;
}
},

// This will fire when user close the application....
onExit:function()
{
if(this.frag!==undefined)
{
this.frag.destroy();
}}
});

data.json

{ "Records":[
{
"id":"01",
"name":"Ganesh",
"course":"SAP Development"
},
{
"id":"02",
"name":"Chotu",
"course":"Web Development"
},
{
"id":"03",
"name":"Rani",
"course":"Java Development"
},
{
"id":"04",
"name":"Raj",
"course":"SQL Development"
}
]
}

Result

When user click on first F4 field then fragment will open

When user click on second F4 field then fragment will open

When user click on third F4 field then fragment will open

When user click on item of fragment then particular line item will set in input field

Extending Button with Custom Events

Click here and follow my SAP UI5/FIORI snippets and information Page

I have created custom button i.e "vikas.m.customButton" by extending "sap.m.Button".I have added new event(custom event) to button i.e "newHover".If user hover on button then newHover event will be executed.Go through it and please let me know in case of any issue/doubt.

Application Structure

View Part

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="extdbtnnswithadditionalevtcustomcontrol.S1" xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="Extending Buttons with Additional Events" id="pageId">
<content>
</content>
</Page>
</core:View>

Controller Part

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

onInit:function()
{
//Call the new Control "vikas.m.customButton"....
sap.m.Button.extend("vikas.m.customButton",{
metadata:{
events:{
"newHover":{} // newHover event....
}
},

// The newHover event handler....
onmouseover : function(evt) { // Is called when the Button is hovered - no event registration required....
this.fireNewHover();
},
renderer: {}
});
var myControlButton = new vikas.m.customButton({
text: "Hover the Button",
newHover:[this.buttonOver,this]

});

// Adding "myControlButton" to page....
this.byId("pageId").addContent(myControlButton);

},

// When user hover on button then this method will call....
buttonOver:function(evt) {
alert("Button "+ evt.getSource().getText() + " was hovered.");
}
});

Result

When user hover on button then custom event will fire....

Saturday 4 February 2017

Container New Custom Control

Click here and follow my SAP UI5/FIORI snippets and information Page

I have created container new custom control i.e "simpleContainerCustom.container" by extending sap.ui.core.Control. I have added two controls in container i.e sap.m.Button and sap.m.Input.Go through it and please let me know in case of any issue/doubt.

Application Structure

View Part

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m" controllerName="simplecontainercustomcontrol.S1"
xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="Creating a Simple Container Control" id="PID">
<html:style>
.p1{
border:3px solid;
display:inline-block;
color:red;
margin-left:550px;
margin-top:20px;
}
</html:style>
<content>
</content>
</Page>
</core:View>

Controller Part

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

onInit:function(){
//Call the new Control "simpleContainerCustom.container"....
sap.ui.core.Control.extend("simpleContainerCustom.container",{
// The Control API:
metadata : {
properties : {
},
aggregations: {
content: {singularName: "content"} // Here defined aggregation....
}
},

// The part creating the HTML....
renderer : function(oRm, oControl) {
oRm.write("<div");
oRm.addClass("p1"); //Added class p1 in parent div....
oRm.writeClasses();
oRm.write(">");
var aChildren = oControl.getContent();
for (var i = 0; i < aChildren.length; i++) { // Loop over all child Controls,
oRm.write("<div>");
oRm.renderControl(aChildren[i]); // Render the child Control
oRm.write("</div>"); // End of the box around the respective child
}
oRm.write("</div>"); // End of the complete Control
}});
var button = new sap.m.Button({text:'Hello World'});
var input = new sap.m.Input({value:'Enter your name'});
var container = new simpleContainerCustom.container({
content:[button,input
]});
// Added container to page....
this.byId("PID").addContent(container);
},
});

Result

Wednesday 25 January 2017

Square New Custom Control

Click here and follow my SAP UI5/FIORI snippets and information Page
I have created square new custom control i.e "squarecustomcontrol.Square" by extending sap.ui.core.Control.Go through it and please let me know in case of any issue/doubt.

Application Structure

View Part

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m" controllerName="squarecustomcontrol.S1" xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="Simple Square Control" id="pageId">
<html:style>
.mySquare {
border: 5px solid red;
background-color: #ddd;
text-align: center;
}
</html:style>
<content>
</content>
</Page>
</core:View>

Controller Part

sap.ui.controller("squarecustomcontrol.S1", {
onInit : function() {
//Taking page id....
var page = this.byId("pageId");
//Call the new Control "squarecustomcontrol.Square"....
sap.ui.core.Control.extend("squarecustomcontrol.Square", {
metadata : {
properties : {
"text" : "string", //Setter and Getter are created behind the scene....
"size" : {
type : "sap.ui.core.CSSSize",
defaultValue : "100px"
}
}
},

renderer : function(oRm, oControl) { //The part creating the HTML....
oRm.write("<div");
oRm.writeControlData(oControl); // Writes the Control ID and enables event handling - important!....
oRm.addStyle("width", oControl.getSize()); //Write the Control property size; the Control has validated it....
//to be a CSS size....
oRm.addStyle("height", oControl.getSize());
oRm.writeStyles();
oRm.addClass("mySquare"); //Add a CSS class for styles common to all Control instances....
oRm.writeClasses(); //This call writes the above class plus enables support
// for Square.addStyleClass()....

oRm.write(">");
oRm.writeEscaped(oControl.getText()); //Write another Control property, with protection
//against cross-site-scripting....
oRm.write("</div>");

},
onclick : function(evt) {
//Is called when the Control's area is clicked - no event registration required....
alert("Text of the Control is:\n" + this.getText());
}

});
var square = new squarecustomcontrol.Square({
text : "Vikas Singh",
size : "300px"
});
//Adding square to page....
page.addContent(square);

}
});

Result

When user click on DIV then popup will come.

Tuesday 24 January 2017

New Custom Control

Click here and follow my SAP UI5/FIORI snippets and information Page
I have created new custom control i.e "customcontroll.First" by extending sap.ui.core.Control. Go through it and please let me know in case of any issue/doubt.

Application Structure

View Part

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

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

</content>

</Page>

</core:View>

Controller Part

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

onInit:function(){

//Taking page id....

var pageId=this.byId("pId");

//Call the new Control "customcontroll.First"....

sap.ui.core.Control.extend("customcontroll.First",{

metadata:{

properties:{

"name1":"string" //Setter and Getter are created behind the scene....

}

renderer:function(oRm,oControll){ //The part creating the HTML....

oRm.write("<span>Hello ");

oRm.writeEscaped(oControll.getName1());//Write the Control property 'name1', with XSS protection....

oRm.write("</span>");

}

});

var control=new customcontroll.First({name1:"First Custom Control"});

control.setName1("Custom Control");

//Adding control to page....

pageId.addContent(control);

}

});

Search This Blog

There are no secrets to success. It is the result of preparation, hard work, and learning from failure.

Wednesday 29 November 2017

Application Structure

View Part

Controller Part

index.html

Result

Monday 27 November 2017

Application Structure

View Part

Controller Part

JSON Data

Result

Saturday 18 November 2017

Monday 6 February 2017

Application Structure

View Part

genericFrag.fragment.xml

Controller Part

data.json

Result

Application Structure

View Part

Controller Part

Result

Saturday 4 February 2017

Application Structure

View Part

Controller Part

Result

Wednesday 25 January 2017

Application Structure

View Part

Controller Part

Result

Tuesday 24 January 2017

Application Structure

View Part

Controller Part

Result

Contact Form

Total Pageviews