CODEWITHSUNDEEP
javascriptxmlsapui5
M.Mikuš
M.Mikuš

Reputation: 51

How to transfer XML view to JavaScript view / SAPUI5

Im trying to trasnform xml BlockLayout structured code to js. But it doesnt work properly, because it doesnt show any content on view. I checked the aggregations and I see there is cell aggregation for Row and sap.ui.Control aggregation for cell.

JavaScript:

        var oLayout = new sap.ui.layout.VerticalLayout("Layout", {
            content: [
                new sap.ui.layout.BlockLayout("Block", {
                    content: [
                        new sap.ui.layout.BlockLayoutRow("Row", {
                            content: [
                                new sap.ui.layout.BlockLayoutCell("Cell1", {
                                    content: [
                                        new sap.m.Text("sample", {text: "test"})
                                    ]
                                })
                            ]
                        })
                    ]
                })
            ]
        });

        var viewID = this.getView().sId;
        viewID = viewID + "--detailPage-cont";
        oLayout.placeAt(viewID);

When I check debugger if some content were added I see added content without cells and text.

enter image description here

Upvotes: 0

Views: 642

Answers (1)

D. Seah
D. Seah

Reputation: 4592

hope this can help https://jsbin.com/benogay/edit?html,js,output

<!DOCTYPE HTML>
<html>

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />
  <script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.m, sap.ui.table" data-sap-ui-theme="sap_bluecrystal">
  </script>
  <script>
    sap.ui.define([
      'sap/ui/core/mvc/Controller',
      'sap/ui/layout/VerticalLayout',
      'sap/ui/layout/BlockLayout',
      'sap/ui/layout/BlockLayoutRow',
      'sap/ui/layout/BlockLayoutCell',
      'sap/m/Text'
    ], function(Controller, VerticalLayout, BlockLayout, BlockLayoutRow, BlockLayoutCell, Text) {
      sap.ui.jsview("myView.Template", {
        getControllerName: function() {
          return "myView.Template";
        },
        createContent: function(oController) {
          return new VerticalLayout({
            content: new BlockLayout({
              content: new BlockLayoutRow({
                content: new BlockLayoutCell({
                  content: new Text({
                    text: "test"
                  })
                })
              })
            })
          });
        }
      });

      Controller.extend("myView.Template", {
        onInit: function(oEvent) {
        },
      });
    });


    var view = sap.ui.view({
      type: sap.ui.core.mvc.ViewType.JS,
      viewName: "myView.Template"
    });
    view.placeAt("content");
  </script>
</head>

<body class="sapUiBody sapUiSizeCompact" role="application">
  <div id="content"></div>
</body>
</html>

Upvotes: 1

Related Questions