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

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