Creating first SAPUI5 application with ExactBrowser control. The ExactBrowser control represents the browse section where the lists of filter attributes (left-most) and the attribute-value lists of the selected attributes are displayed. In the browse area the user sets the filters that then determine the resulting data set
1. Click on File -> new -> Project
2. Select ‘SAPUI5 Application project’ and click ‘Next’
3. Give name of the project as ‘FirstApp’, select ‘Target Device’ as ‘Desktop’ and click ‘Next’
4. Give View name as ‘FirstView’, select ‘Development Paradigm’ as ’JavaScript’ and click ‘Next’
5. Click on ‘Finish’
6. Project will be created with the below structure
7. Open ‘Index.html’ by double clicking on index.html and add sap.ui.ux3 library
8. Open ‘FirstView’ by double clicking FirstView.view.js in Project Explorer
9. Add Below code inside ‘createContent’ function
//Create some test data
var oTestData = {attributes: [
{name: "Country", selected: true, attributes: [
{name: "India", width: 210, attributes: [{name: "Bangalore"}, {name: "Pune"}, {name: "mangalore"}, {name: "Chennai"}, {name: "Hyderabad"},
{name: "Jaipur"}, {name: "Chandigarh"}]},
{name: "USA", attributes: [{name: "Alabama"}, {name: "Alaska"}, {name: "Arizona"}, {name: "Arkansas"}, {name: "California"},
{name: "Colorado"}, {name: "Connecticut"}, {name: "Delaware"}, {name: "Florida"}, {name: "Georgia"},
{name: "Hawaii"}, {name: "Idaho"}, {name: "Illinois"}, {name: "Indiana"}, {name: "Iowa"},
{name: "Kansas"}, {name: "Kentucky"}, {name: "Louisiana"}, {name: "Maine"}, {name: "Maryland"},
{name: "Massachusetts"}, {name: "Michigan"}, {name: "Minnesota"}, {name: "Mississippi"}, {name: "Missouri"},
{name: "Montana"}, {name: "Nebraska"}, {name: "Nevada"}, {name: "New Hampshire"}, {name: "New Jersey"},
{name: "New Mexico"}, {name: "New York"}, {name: "North Carolina"}, {name: "North Dakota"}, {name: "Ohio"},
{name: "Oklahoma"}, {name: "Oregon"}, {name: "Pennsylvania"}, {name: "Rhode Island"}, {name: "South Carolina"},
{name: "South Dakota"}, {name: "Tennessee"}, {name: "Texas"}, {name: "Utah"}, {name: "Vermont"},
{name: "Virginia/DC"}, {name: "Washington"}, {name: "West Virginia"}, {name: "Wisconsin"}, {name: "Wyoming"}]},
{name: "France", selected: true}, {name: "Italy"}, {name: "Sweden"}, {name: "Spain"}, {name: "Canada"}, {name: "India"}, {name: "Japan"}, {name: "Russia"},
{name: "Australia"}, {name: "Austria"}, {name: "Switzerland"}]
},
{name: "Year", attributes: []},
{name: "Sales Orders", attributes: []}
]};
for(var i=0; i<100; i++){
oTestData.attributes[1].attributes.push({name: ""+(1950+i), subVals: false});
if(i<20){
oTestData.attributes[2].attributes.push({name: "SO-003530"+i, subVals: false});
}
}
//helper function to create ExactAttributes
function createAttributes(oAttData, oParent){
var oAtt = new sap.ui.ux3.ExactAttribute({text: oAttData.name, selected: !!oAttData.selected, showSubAttributesIndicator: !!oAttData.subVals});
if(oAttData.width){
oAtt.setWidth(oAttData.width);
}
oParent.addAttribute(oAtt);
if(!oAttData.attributes) {
return;
}
for(var idx in oAttData.attributes){
createAttributes(oAttData.attributes[idx], oAtt);
}
};
function getSelectionMessage(oEvent){
var aSelectedAttributes = oEvent.getParameter("allAttributes");
var sText;
if(aSelectedAttributes.length == 0) {
sText = "No selected attributes";
}else{
sText = "The following attributes are selected: ";
if(aSelectedAttributes.length > 1) {
for(var idx=0; idx<aSelectedAttributes.length-1; idx++){
sText = sText + aSelectedAttributes[idx].getText() + ", ";
}
}
sText = sText + aSelectedAttributes[aSelectedAttributes.length-1].getText();
}
return sText;
};
var oOutput1 = new sap.ui.commons.TextView();
var oExactBrowser1 = new sap.ui.ux3.ExactBrowser({
showHeader: true,
optionsMenu : new sap.ui.commons.Menu({
ariaDescription: "Menu",
items:[
new sap.ui.commons.MenuItem({text:"Help", tooltip: "Help"}),
new sap.ui.commons.MenuItem({text:"Refresh", tooltip: "Refresh"})
]
}),
attributeSelected: function(oEvent) {
oOutput1.setText(getSelectionMessage(oEvent));
}
});
for(var i=0; i<oTestData.attributes.length; i++){
createAttributes(oTestData.attributes[i], oExactBrowser1);
}
oExactBrowser1.placeAt("content");
oOutput1.placeAt("content");
10. Save Project and run Index.html by right clicking -> run as -> Web App Preview
11. Application will open within NWDS
12. You can also open application in the browser by clicking on button on right top.
- SAP Managed Tags:
1 Comment
