Click here and follow my SAP UI5/FIORI snippets and information Page
I have taken example of table with json data and given type="Navigation"(You can move one view to another view).If item has child then you can navigate otherwise you can't.If item has child then navigation sign would come over it and multi-mode(You can select more than one items at a time) would not come.If item does not have child then multi-mode would come and navigation sign would not come.It shows hierarchy of roots and leafs above the table.If you are in leaf then directly you can go to root, once you click on root element.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="breadcrumbexample.S1" xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="BreadCrumb" class="sapUiSizeCompact" showHeader="false">
<html:style>
.sapMTB-Transparent-CTX .sapMLabel.crumbArrow {
margin-right: 0;
}
.sapMTB-Transparent-CTX .sapMText.crumbLast {
font-size: 0.875rem;
text-shadow: none;
}
</html:style>
<content>
<Table id="tabId" itemPress="handleItemPress">
<headerToolbar>
<Toolbar id="breadCrumbId" />
</headerToolbar>
<columns>
<Column>
<Text text="Name" />
</Column>
<Column visible="false" id="weightID">
<Text text="Weight" />
</Column>
<Column>
<Text text="Price" />
</Column>
</columns>
</Table>
</content>
</Page>
</core:View>
Cell.fragment.xml
<core:FragmentDefinition xmlns:core="sap.ui.core"
xmlns="sap.m">
<ColumnListItem id="cListItem">
<ObjectIdentifier title="{Name}" text="{ProductId}" />
<ObjectNumber number="{WeightMeasure}" unit="{WeightUnit}">
</ObjectNumber>
<ObjectNumber number="{Price}" unit="{CurrencyCode}"></ObjectNumber>
</ColumnListItem>
</core:FragmentDefinition>
Controller Part
sap.ui.controller("breadcrumbexample.S1", {
// Setup crumb info, the collection root
// and an initial product selection / order state
sCollection : "/hierarchy",
aCrumbs : [ "Suppliers", "Categories", "Products" ],
// Application initialization....
onInit : function() {
this.tableMethod();
},
// Table binding method....
tableMethod : function() {
if (!this.frag) {
this.frag = new sap.ui.xmlfragment("breadcrumbexample.Cell", this);
}
var path = this.getInitialPath();
this.setAggregation(path);
},
// Called method....
setAggregation : function(sPath) {
var Id = this.byId("tabId");
var Id1 = sap.ui.getCore().byId("cListItem");
var json = new sap.ui.model.json.JSONModel();
json.loadData("model/Data.json", null, false);
Id.setModel(json);
// If we're at the leaf end, turn off navigation
var sPathEnd = sPath.split("/").reverse()[0];
if (sPathEnd === this.aCrumbs[this.aCrumbs.length - 1]) {
Id.setMode("MultiSelect");
Id1.setType("Inactive");
this.byId("weightID").setVisible(true);
} else {
Id.setMode("SingleSelectMaster");
Id1.setType("Navigation");
this.byId("weightID").setVisible(false);
}
// Set the new aggregation
Id.bindAggregation("items", sPath, this.frag);
this.maintainCrumbLinks(sPath);
},
// Called method....
maintainCrumbLinks : function(sPath) {
// Determine trail parts
var aPaths = [];
var aParts = sPath.split("/");
while (aParts.length > 1) {
aPaths.unshift(aParts.join("/"));
aParts = aParts.slice(0, aParts.length - 2);
}
// Re-build crumb toolbar based on trail parts
var oCrumbToolbar = this.byId("breadCrumbId");
oCrumbToolbar.destroyContent();
aPaths.forEach(jQuery.proxy(function(sPath, iPathIndex) {
var bIsFirst = iPathIndex === 0;
var bIsLast = iPathIndex === aPaths.length - 1;
// Special case for 1st crumb: fixed text
var sText = bIsFirst ? this.aCrumbs[0] : "{Name}";
// Context is one level up in path
var sContext = this.stripItemBinding(sPath);
var oCrumb = bIsLast ? new sap.m.Text({
text : sText
}).addStyleClass("crumbLast") : new sap.m.Link({
text : sText,
target : sPath,
press : [ this.handleLinkPress, this ]
});
oCrumb.bindElement(sContext);
oCrumbToolbar.addContent(oCrumb);
if (!bIsLast) {
var oArrow = new sap.m.Label({
textAlign : "Center",
text : ">"
}).addStyleClass("crumbArrow");
oCrumbToolbar.addContent(oArrow);
}
}, this));
},
// Called method....
stripItemBinding : function(sPath) {
var aParts = sPath.split("/");
return aParts.slice(0, aParts.length - 1).join("/");
},
// Initial path....
getInitialPath : function() {
return [ this.sCollection, this.aCrumbs[0] ].join("/");
},
// When you go for navigation then this will fire....
handleItemPress : function(oEvent) {
var sPath = oEvent.getParameter("listItem").getBindingContext().getPath();
var aPath = sPath.split("/");
var sCurrentCrumb = aPath[aPath.length - 2];
if (sCurrentCrumb !== this.aCrumbs[this.aCrumbs.length - 1]) {
var sNewPath = [ sPath, this.nextCrumb(sCurrentCrumb) ].join("/");
this.setAggregation(sNewPath);
}
},
// When you click on link then this will fire....
handleLinkPress : function(oEvent) {
this.setAggregation(oEvent.getSource().getTarget());
},
// Find the next crumb that follows the given crumb
nextCrumb : function(sCrumb) {
for (var i = 0, ii = this.aCrumbs.length; i < ii; i++) {
if (this.aCrumbs[i] === sCrumb) {
return this.aCrumbs[i + 1];
}
}
},
});
Data.json
{
"hierarchy":{
"Suppliers":[
{
"Name":"Titanium",
"Price":1884.49,
"CurrencyCode":"INR",
"Categories":[
{
"Name":"Projector",
"Price":856.49,
"CurrencyCode":"INR",
"Products":[
{
"ProductId":"1239102",
"Name":"Power Projector 4713",
"Category":"Projector",
"SupplierName":"Titanium",
"Description":"A very powerful projector with special features for Internet usability, USB",
"WeightMeasure":1467,
"WeightUnit":"g",
"Price":856.49,
"CurrencyCode":"INR",
"Quantity":3,
"UoM":"PC"
}
]
},
{
"Name":"Laptop",
"Price":939,
"CurrencyCode":"INR",
"Products":[
{
"ProductId":"OP-38800002",
"Name":"High End Laptop 2b",
"Category":"Laptop",
"SupplierName":"Titanium",
"Description":"Notebook Professional 17 with 2,3GHz - 17 inches XGA - 2048MB DDR2 SDRAM - 40GB Hard Disc - DVD-Writer (DVD-R/+R/-RW/-RAM)",
"WeightMeasure":1190,
"WeightUnit":"g",
"Price":939,
"CurrencyCode":"INR",
"Quantity":18,
"UoM":"PC"
}
]
}
]
},
{
"Name":"Technocom",
"Price":154.19,
"CurrencyCode":"INR",
"Categories":[
{
"Name":"Graphics Card",
"Price":81.7,
"CurrencyCode":"INR",
"Products":[
{
"ProductId":"2212-121-828",
"Name":"Gladiator MX",
"Category":"Graphics Card",
"SupplierName":"Technocom",
"Description":"Gladiator MX: DDR2 RoHS 128MB Supporting 512MB Clock rate: 350 MHz Memory Clock: 533 MHz, Bus Type: PCI-Express, Memory Type: DDR2 Memory Bus: 32-bit Highlighted Features: DVI Out, TV Out , HDTV",
"WeightMeasure":321,
"WeightUnit":"g",
"Price":81.7,
"CurrencyCode":"INR",
"Quantity":10,
"UoM":"PC"
}
]
},
{
"Name":"Accessory",
"Price":72.49,
"CurrencyCode":"INR",
"Products":[
{
"ProductId":"22134T",
"Name":"Webcam",
"Category":"Accessory",
"SupplierName":"Technocom",
"Description":"Web camera, color, High-Speed USB",
"WeightMeasure":700,
"WeightUnit":"g",
"Price":59,
"CurrencyCode":"INR",
"Quantity":22,
"UoM":"PC"
},
{
"ProductId":"P1239823",
"Name":"Monitor Locking Cable",
"Category":"Accessory",
"SupplierName":"Technocom",
"Description":"Lock for Monitor",
"WeightMeasure":40,
"WeightUnit":"g",
"Price":13.49,
"CurrencyCode":"INR",
"Quantity":30,
"UoM":"PC"
}
]
}
]
}
]
}
}
Result
// Clicking on second line item of table
// Clicking on second line item which is under Technocom
// After clicking on second line item which is under Technocom
// After clicking on Technocom link which is in hierarchy list
// After clicking on Suppliers link which is in hierarchy list
Check it once through sap fiori online access for more info.
ReplyDeleteOk...
Delete