I want place two buttons in one layout for SAPUI5 mobile application

StackOverflow https://stackoverflow.com/questions/23486652

  •  16-07-2023
  •  | 
  •  

Question

I am new to SAPUI5. I'm able to create controls in my SAPUI5 mobile application.But I'm not able to set them in a layout. I'm writing my view as HTML page and adding my controls to that. I have tried placing them in a division but I don't know what is the attribute to specify layout.Please guide about the layouts.

Thanks

<template data-controller-name="sample.controllers.index">
<div data-sap-ui-type="sap.m.Page" data-title="Title">
    <div data-sap-ui-aggregation="content">
    <div data-sap-ui-type="sap.m.Layout" data-type="vertical">
        <div data-sap-ui-type="sap.m.Input"  data-width="20%"
id="Textfield" data-placeholder="User" data-max-length="10"></div><br>
        <div data-sap-ui-type="sap.m.Input"  data-width="20%" id="Textfield2" data-placeholder="Password" data-type="Password"></div><br>
        <div data-sap-ui-type="sap.m.TextArea" data-width="30%" id="textarea" data-placeholder="Text for information..."></div>
    </div>
        <div data-sap-ui-type="sap.m.Button" id="btn1" data-text="My Button1" data-press="doIt"></div>
        <div data-sap-ui-type="sap.m.Button" id="btn2" data-text="My Button2" data-press="doIt"></div>
        <div data-sap-ui-type="sap.m.Label" data-text="I'm Label" data-width="100px" data-height="100px" data-background-colour="orange"></div>
    </div>
</div>

This is my sample code and when i run this on browser it shows me a error message that

Uncaught Error: failed to load 'sap/m/Layout.js' from resources/sap/m/Layout.js: 404 - Not Found

here is my index.html

`

<!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="resources/sap-ui-core.js"
                id="sap-ui-bootstrap"
                data-sap-ui-libs="sap.m"
                data-sap-ui-theme="sap_bluecrystal">
        </script>
        <!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->

        <script>
                sap.ui.localResources("sample");
                var app = new sap.m.App({initialPage:"idindex1"});
                var page = sap.ui.view({id:"idindex1", viewName:"sample.views.index", type:sap.ui.core.mvc.ViewType.HTML});
                app.addPage(page);
                app.placeAt("content");
        </script>

    </head>
    <body class="sapUiBody" role="application">
            <div id="content"></div>
    </body>
</html>`
Was it helpful?

Solution 

 <div data-sap-ui-type="sap.m.Layout" data-type="vertical">

There is no such a control like sap.m.Layout. For layout, you can choose any from the sap.ui.layout controls, for example, sap.ui.layout.Grid

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top