Skip to Content

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

/wp-content/uploads/2013/06/1_225307.png

2. Select ‘SAPUI5 Application project’ and click ‘Next’

/wp-content/uploads/2013/06/2_225344.png

3. Give name of the project as ‘FirstApp’, select ‘Target Device’ as ‘Desktop’ and click ‘Next’

/wp-content/uploads/2013/06/3_225345.png

4. Give View name as ‘FirstView’, select ‘Development Paradigm’ as ’JavaScript’ and click ‘Next’

/wp-content/uploads/2013/06/4_225346.png

5. Click on ‘Finish’

/wp-content/uploads/2013/06/5_225347.png

6. Project will be created with the below structure

/wp-content/uploads/2013/06/6_225348.png

7. Open ‘Index.html’ by double clicking on index.html and add sap.ui.ux3 library

  /wp-content/uploads/2013/06/7_225349.png
 

8. Open ‘FirstView’ by double clicking FirstView.view.js in Project Explorer

/wp-content/uploads/2013/06/8_225350.png

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

/wp-content/uploads/2013/06/10_225351.png

11.  Application will open within NWDS

/wp-content/uploads/2013/06/11_225352.png

12.  You can also open application in the browser by clicking on button on right top.

/wp-content/uploads/2013/06/12_225353.png

/wp-content/uploads/2013/06/12_a_225354.png

To report this post you need to login first.

1 Comment

You must be Logged on to comment or reply to a post.

Leave a Reply