CODEWITHSUNDEEP
javascriptxmlsapui5
kamikater
kamikater

Reputation: 101

Manually convert from XML view to JavaScript view in sapui5

The documentation at https://sapui5.hana.ondemand.com/#/controls provides many SAPUI5 samples. But all the views are written in XML. I can find examples written in JavaScript elsewhere but I'm asking for a general rule to apply on XML code. Here is an example List.view.xml which I need to manually convert to List.view.js

<mvc:View
height="100%"
controllerName="sap.m.sample.ListSelectionSearch.List"
xmlns:l="sap.ui.layout"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<Page
    showHeader="false" >
    <subHeader>
        <Toolbar>
            <SearchField
                liveChange="onSearch"
                width="100%" />
        </Toolbar>
    </subHeader>
    <content>
        <List
            id="idList"
            items="{/ProductCollection}"
            selectionChange="onSelectionChange"
            mode="MultiSelect"
            includeItemInSelection="true" >
            <infoToolbar>
                <Toolbar
                    visible="false"
                    id="idInfoToolbar" >
                    <Label id="idFilterLabel" />
                </Toolbar>
            </infoToolbar>
            <items>
                <StandardListItem
                    title="{Name}"
                    description="{ProductId}"
                    icon="{ProductPicUrl}"
                    iconDensityAware="false"
                    iconInset="false" />
            </items>
        </List>
    </content>
</Page>

</mvc:View>

Any help will be appreciated.

Upvotes: 0

Views: 3374

Answers (3)

jasbir
jasbir

Reputation: 216

Please see the example below

View:

sap.ui.jsview("ResourceRootName.view.ViewName", {

    getControllerName: function() {
        return "ResourceRootName.view.ViewName";
    },

    createContent : function(oController) {

        this.oList = new sap.m.List({
            showUnread: true,
            mode: sap.ui.Device.system.phone ? sap.m.ListMode.None : sap.m.ListMode.SingleSelectMaster,
            itemPress: [oController.onListSelect, oController]
        });

        this.page = new sap.m.Page({
            title: "{i18n>pageTitle}",
            navButtonText: "Home",
            showNavButton: true,
            navButtonPress: function() {
                oController.handleNavBack();
            },
            subHeader: new sap.m.Bar({
                contentMiddle: [
                    new sap.m.SearchField(oController.createId("searchFieldTasks"), {
                        width: "100%"
                    })
                ]
            }),
            content: [this.oList]
        }); 

        return this.page; //Note: if you need to return more than two controls you can do so by using array
    }
});

In controller you can bind your list as below

Controller:

this.getView().oList.bindAggregation("items", {
      path: "/EntityCollectionSet",
      template: new sap.m.StandardListItem({
                title: "{Title}",
                description: "{Description}"
            }),
      filters: []//If you want to pass any filters
    });

Upvotes: 1

O.O
O.O

Reputation: 1419

Here is the same in SAPUI5's JSView with list aggregation done in the controller:

Alternatively, have a look at this full application Example SAPUI5 JSView Application

OR

Make use of the Diagnostic tool by pressing CTRL+SHIFT+ALT+S and API References

sap.ui.define(["sap/m/Page", "sap/m/List", "sap/m/Toolbar", "sap/m/SearchField", "sap/m/Label", "sap/m/Text"], function(Page, List, Toolbar, SearchField, Label, Text) {
  "use strict";
  return sap.ui.jsview("sap.m.sample.ListSelectionSearch.View", {
    getControllerName: function() {
      return "sap.m.sample.ListSelectionSearch.List";
    },
    createContent: function(oController) {
      var oToolbar = new Toolbar({
        visible: true,
        content: [
          new SearchField({
            liveChange: function() {
              oController.onSearch();
            },
            width: "100%"
          })
        ]
      });
      var oInfoToolbar = new Toolbar({
        content: new Toolbar(this.createId("idInfoToolbar"), {
          visible: true,
          content: new Text({
            text: "Label Text"
          })
        })
      });

      var oList = new List(this.createId("idList"), {
        mode: "MultiSelect",
        includeItemInSelection: true,
        infoToolbar: oInfoToolbar
      });

      var oPage = new Page(this.createId("oPageId"), {
        height: "100%",
        title: "Page Title",
        showHeader: true,
        showSubHeader: true,
        headerContent: oToolbar,
        content: [oList]
      });
      var app = new sap.m.App();
      app.addPage(oPage);
      app.placeAt("content");
      return app;
    }

  });
});

//in Controller 
sap.ui.define(["sap/m/StandardListItem", "sap/ui/model/json/JSONModel"], function(StandardListItem, JSONModel) {
  "use strict";
  var oData = {

    "ProductCollection": [{
      "titleId": 0,
      "Name": "Olayinka Otuniyi",
      "ProductId": "001",
      "ProductPicUrl": "sap-icon://competitor"
    }, {
      "titleId": 1,
      "Name": "Maria Anders",
      "ProductId": "002",
      "ProductPicUrl": "sap-icon://badge"
    }, {
      "titleId": 2,
      "Name": "Ana Trujillo",
      "ProductId": "003",
      "ProductPicUrl": "sap-icon://broken-link"
    }, {
      "titleId": 3,
      "Name": "Thomas Hardy",
      "ProductId": "004",
      "ProductPicUrl": "sap-icon://create"
    }, {
      "titleId": 4,
      "Name": "Christina Berglund",
      "ProductId": "005",
      "ProductPicUrl": "sap-icon://pending"
    }, {
      "titleId": 5,
      "Name": "Hanna Moos",
      "ProductId": "006",
      "ProductPicUrl": "sap-icon://decision"
    }, {
      "titleId": 6,
      "Name": "Martín Sommer",
      "ProductId": "007",
      "ProductPicUrl": "sap-icon://process"
    }, {
      "titleId": 7,
      "Name": "Laurence Lebihans",
      "ProductId": "008",
      "ProductPicUrl": "sap-icon://accept"
    }, {
      "titleId": 8,
      "Name": "Elizabeth Lincoln",
      "ProductId": "009",
      "ProductPicUrl": "sap-icon://alert"
    }]

  };
  return sap.ui.controller("sap.m.sample.ListSelectionSearch.List", {

    //		onInit: function() {
    //		},		
    onAfterRendering: function() {
      var oModel = new JSONModel(oData);
      this.getView().setModel(oModel, "products");

      var oTemplate = new StandardListItem({
        title: "{products>Name}",
        description: "{products>ProductId}",
        icon: "{products>ProductPicUrl}",
        iconDensityAware: false,
        iconInset: false,
        type: "Active"
      });
      oTemplate.attachPress(this.onSelectionChange, this);
      this.getView().byId("idList").bindItems({
        path: "/ProductCollection",
        template: oTemplate,
        model: "products"
      });
    },
    onSearch: function() {
      console.log("Searching");
    },
    onSelectionChange: function() {
      console.log("changing Selection");
    }
  });
});

Upvotes: 4

Skay
Skay

Reputation: 9493

Should not be that difficult:

new sap.m.Page({
    showHeader: false,
    subHeader: new sap.m.Toolbar({
        content: [ // (**)
            new sap.m.SearchField({
                liveChange: onSearch, // event handler
                width: "100%"
            })
        ]
    }),
    content: [
        new sap.m.List({
            //...
        })
    ]
});

OR you can keep writing XML and then create JS instances from it using API:

(**) here is probably the trickiest part. How could you know that this should be wrapped inside "content" property? Very easy! If you see one control inside another directly (without any tags around it), it means inner control is in default aggregation of parent control. So, all you need to do is check what is the name of the default aggregation of the parent control. In case of sap.m.Toolbar it's a content.

UPDATE: however, it might be difficult to understand which aggregation is default, because in our docs we do not show this information. I will contact responsible team on this matter. As a work around it's possible to get this information from the source code, e.g. sap.m.Page - see defaultAggregation definition in metadata description.

Upvotes: 1

Related Questions