This question already has answers here:
Page Is Blank Without Throwing Any Errors
(2 answers)
Closed 3 years ago.
I have defined a simple xml-view as follows:
<mvc:View controllerName="ui5_wt_confirm.controller.Login" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc">
<Page title="{i18n>helloPanelTitle}">
<subHeader>
<Toolbar>
</Toolbar>
</subHeader>
<content>
<Button text="{i18n>showHelloButtonText}" press="onShowHello" class="myCustomButton"/>
<Input value="{/recipient/name}" valueLiveUpdate="true" width="60%"/>
<Text text="Hello {/recipient/name}" class="sapUiSmallMargin sapThemeHighlight-asColor myCustomText"/>
</content>
<footer>
<Toolbar>
<ToolbarSpacer/>
<Button text="{i18n>showLoginButtonText}" type="Accept" press="onLogin"/>
<Button text="{i18n>showExitButtonText}" type="Reject"/>
</Toolbar>
</footer>
</Page>
But for some reason the element in the content tag will just not displayed:
enter image description here
Could you give me any tipp what is wrong in here?
Thanks and BR.
Put the Page in a sap.m.App.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>List example</title>
<script id="sap-ui-bootstrap"
type="text/javascript"
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.ui.commons, sap.m"
data-sap-ui-xx-bindingSyntax="complex">
</script>
<!-- XML-based view definition mode="SingleSelectMaster" -->
<script id="view1" type="sapui5/xmlview">
<mvc:View controllerName="ui5_wt_confirm.controller.Login" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc">
<App>
<Page title="{i18n>helloPanelTitle}">
<subHeader>
<Toolbar>
</Toolbar>
</subHeader>
<content>
<Button text="Hello" press="onShowHello" class="myCustomButton"/>
<Input value="Dummy" valueLiveUpdate="true" width="60%"/>
<Text text="Hello Dummy" class="sapUiSmallMargin sapThemeHighlight-asColor myCustomText"/>
</content>
<footer>
<Toolbar>
<ToolbarSpacer/>
<Button text="Login" type="Accept" press="onLogin"/>
<Button text="Exit" type="Reject"/>
</Toolbar>
</footer>
</Page>
</App>
</mvc:View>
</script>
<script>
// Controller definition
sap.ui.controller("ui5_wt_confirm.controller.Login", {
onInit: function() {
}
});
// Instantiate the View, assign a model
// and display
var oView = sap.ui.xmlview({
viewContent: jQuery('#view1').html()
});
oView.placeAt('content');
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
Related
I'm trying to add a footer to a page, and I'm running into some problems:
Uncaught TypeError: b.applyTagAndContextClassFor is not a function
This is how my view looks like.
App.view.xml
<mvc:View
controllerName="com.xyz.controller.App"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
displayBlock="true"
>
<App class="myCustomStyle">
<Page title="{i18n>pageTitle}">
<mvc:XMLView viewName="com.xyz.view.FirstPanel"/>
<footer>
<mvc:XMLView viewName="com.xyz.view.Footer"/>
</footer>
</Page>
</App>
</mvc:View>
Footer.view.xml
<mvc:View
controllerName="com.xyz.controller.Footer"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
>
<Toolbar>
<ToolbarSpacer/>
<Button type="Accept" text="Accept"/>
<Button type="Reject" text="Reject"/>
</Toolbar>
</mvc:View>
If I edit App.view.xml to look like this:
<!-- ... -->
<mvc:XMLView viewName="com.xyz.view.FirstPanel"/>
<footer>
<Toolbar>
<ToolbarSpacer/>
<Button type="Accept" text="Accept"/>
<Button type="Reject" text="Reject"/>
</Toolbar>
</footer>
<!-- ... -->
Everything works as intended?
Changing from XMLView to a Fragment like #I.B.N. suggested ended up fixing the problem.
#Marc explains, "The outermost element of the Footer view was a sap.ui.core.mvc.View. The aggregation footer only allows sap.m.IBar. Changing to a fragment fixed the error."
Corrections:
App.view.xml
<!-- ... -->
<footer>
<core:Fragment fragmentName="com.xyz.view.Footer" type="XML"/>
</footer>
<!-- ... -->
Footer.fragment.xml
<core:FragmentDefinition
xmlns="sap.m"
xmlns:core="sap.ui.core"
>
<Toolbar>
<ToolbarSpacer/>
<Button type="Accept" text="Accept"/>
<Button type="Reject" text="Reject"/>
</Toolbar>
</core:FragmentDefinition>
I'm trying to add 2 Input controls to my Toolbar with Title. But in OverflowToolbar they go to overflow area and in Toolbar control are not moved to the right side by ToolbarSpacer. How do I make this work as expected?
<Table
id="sfcTable"
mode="MultiSelect"
items="{path: 'sfcTable>/Rowsets/Rowset/0/Row', sorter: { path: 'Shop Order'}}">
<headerToolbar>
<OverflowToolbar>
<Title
text="Table Header Here"
level="H1" />
<ToolbarSpacer />
<Input
id="operationDelay"
maxLength="6"
type="Number"
description="ms"
fieldWidth="5rem">
<layoutData>
<OverflowToolbarLayoutData
priority="NeverOverflow" />
</layoutData>
</Input>
<Input
id="actionDelay"
maxLength="6"
type="Number"
description="ms"
fieldWidth="5rem">
<layoutData>
<OverflowToolbarLayoutData
priority="NeverOverflow" />
</layoutData>
</Input>
</OverflowToolbar>
</headerToolbar>
...
</Table>
OverflowToolbar image
Note that only one Input is shown.
Toolbar code:
<Table
id="sfcTable"
mode="MultiSelect"
items="{path: 'sfcTable>/Rowsets/Rowset/0/Row', sorter: { path: 'Shop Order'}}">
<headerToolbar>
<Toolbar>
<Title
text="Table Header Here"
level="H1" />
<ToolbarSpacer />
<Input
id="operationDelay"
maxLength="6"
type="Number"
description="ms"
fieldWidth="5rem">
</Input>
<Input
id="actionDelay"
maxLength="6"
type="Number"
description="ms"
fieldWidth="5rem">
</Input>
</Toolbar>
</headerToolbar>
Toolbar image
I also had the same problem at some point and ended up with wrapping the additional controls into a nested Toolbar. See working example in snippet below or at JSBin: http://jsbin.com/hofuvum/edit?html,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'/>
<title>JSFragment used in XmlView</title>
<!-- Load UI5, select Blue Crystal theme and the "commons" control library -->
<script id='sap-ui-bootstrap' type='text/javascript'
src='https://openui5.hana.ondemand.com/resources/sap-ui-core.js'
data-sap-ui-theme='sap_bluecrystal'
data-sap-ui-libs='sap.m, sap.ui.commons'></script>
<!-- DEFINE RE-USE COMPONENTS - NORMALLY DONE IN SEPARATE FILES -->
<!-- define an XMLView - normally done in a separate file -->
<script id="view1" type="sapui5/xmlview">
<mvc:View xmlns:core="sap.ui.core" xmlns:layout="sap.ui.commons.layout" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="my.own.controller" xmlns:html="http://www.w3.org/1999/xhtml">
<OverflowToolbar>
<Title
text="Table Header Here"
level="H1" />
<ToolbarSpacer />
<Toolbar>
<Input
id="operationDelay"
maxLength="6"
type="Number"
description="ms"
fieldWidth="5rem">
</Input>
<Input
id="actionDelay"
maxLength="6"
type="Number"
description="ms"
fieldWidth="5rem">
</Input>
</Toolbar>
</OverflowToolbar>
</mvc:View>
</script>
<script>
// define a new (simple) Controller type
sap.ui.controller("my.own.controller", {
});
/*** THIS IS THE "APPLICATION" CODE ***/
// instantiate the View
var myView = sap.ui.xmlview("myView", {viewContent:jQuery('#view1').html()}); // accessing the HTML inside the script tag above
// put the View onto the screen
myView.placeAt('content');
</script>
</head>
<body class='sapUiBody'>
<div id='content'></div>
</body>
</html>
The problem is how you apply fieldWidth...
Here is working example based on your code: https://jsbin.com/pivodos/edit?html,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SAPUI5 single file template | nabisoft</title>
<script
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-theme="sap_belize"
data-sap-ui-libs="sap.m"
data-sap-ui-compatVersion="edge"
data-sap-ui-preload="async"></script>
<!-- XMLView -->
<script id="myXmlView" type="ui5/xmlview">
<mvc:View
xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc">
<Table>
<headerToolbar>
<OverflowToolbar>
<Title text="Table with OverflowToolbar" level="H1" />
<ToolbarSpacer />
<Input
maxLength="6"
type="Number"
description="ms"
width="10rem"
fieldWidth="50%">
<layoutData>
<OverflowToolbarLayoutData priority="NeverOverflow" />
</layoutData>
</Input>
<Input
maxLength="6"
type="Number"
description="ms"
width="10rem"
fieldWidth="50%">
<layoutData>
<OverflowToolbarLayoutData priority="NeverOverflow" />
</layoutData>
</Input>
</OverflowToolbar>
</headerToolbar>
</Table>
<Table>
<headerToolbar>
<Toolbar>
<Title text="Table with Toolbar" level="H1" />
<ToolbarSpacer />
<Input
maxLength="6"
type="Number"
description="ms"
width="10rem"
fieldWidth="50%">
</Input>
<Input
maxLength="6"
type="Number"
description="ms"
width="10rem"
fieldWidth="50%">
</Input>
</Toolbar>
</headerToolbar>
</Table>
</mvc:View>
</script>
<script>
sap.ui.getCore().attachInit(function () {
"use strict";
//### THE APP: place the XMLView somewhere into DOM ###
sap.ui.xmlview({
viewContent : jQuery("#myXmlView").html()
}).placeAt("content");
});
</script>
</head>
<body class="sapUiBody">
<div id="content"></div>
</body>
</html>
I am developing an application using sapui5 and I am having a problem with the sizing of the "dropdownbox" in simple form. The items from sap.m package seem to automatically adjust to the size of the simple form content, while other items from packages like sa.ui.commons dont adjust as well.
How do I adjust the size of the dropdownbox? I tried setting the width and the height to "100%" but that did not work.
Adding the code:
<c:FragmentDefinition
xmlns:mvc="sap.ui.core.mvc"
xmlns:l="sap.ui.layout"
xmlns:f="sap.ui.layout.form"
xmlns:c="sap.ui.core"
xmlns:co="sap.ui.commons"
xmlns:col="sap.ui.commons.layout"
xmlns="sap.m">
<l:Grid
defaultSpan="L12 M12 S12"
width="auto">
<l:content>
<f:SimpleForm
minWidth="800"
maxContainerCols="2"
editable="true"
layout="ResponsiveGridLayout"
title="General Info"
labelSpanL="3"
labelSpanM="3"
emptySpanL="4"
emptySpanM="4"
columnsL="2"
columnsM="2"
class="editableForm">
<f:content>
<Label text="Employee Name" />
<co:DropdownBox width="200px" >
<c:ListItem text="Emp1"/>
<c:ListItem text="Emp2"/>
</co:DropdownBox>
<Label text="Type of Travel" />
<Select >
<c:ListItem key="B" text="Business"/>
<c:ListItem key="O" text="Other"/>
</Select>
</f:content>
</f:SimpleForm>
</l:content>
</l:Grid>
</c:FragmentDefinition>
How about just omitting the width of the commons control, just as you did with the m control? That scales the sap.ui.commons.DropdownBox just as wide as the sap.m.Select control.
On a sidenote, I would not mix m controls with common controls; you may run into CSS issues
EDIT: See this working example, both sap.ui.commons.DropdownBox and sap.m.Select are of equal size:
sap.ui.controller("view1.initial", {
onInit : function() { }
});
var app = new sap.m.App({});
var oView = sap.ui.xmlview({
viewContent: jQuery("#view1").html()
});
app.addPage(oView);
app.placeAt("uiArea");
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>SAPUI5 template</title>
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-libs="sap.m"></script>
<script id="view1" type="ui5/xmlview">
<mvc:View
controllerName="view1.initial"
xmlns:mvc="sap.ui.core.mvc"
xmlns:l="sap.ui.layout"
xmlns:f="sap.ui.layout.form"
xmlns:c="sap.ui.core"
xmlns:co="sap.ui.commons"
xmlns:col="sap.ui.commons.layout"
xmlns="sap.m">
<l:Grid
defaultSpan="L12 M12 S12"
width="auto">
<l:content>
<f:SimpleForm
minWidth="800"
maxContainerCols="2"
editable="true"
layout="ResponsiveGridLayout"
title="General Info"
labelSpanL="3"
labelSpanM="3"
emptySpanL="4"
emptySpanM="4"
columnsL="2"
columnsM="2"
class="editableForm">
<f:content>
<Label text="Employee Name" />
<co:DropdownBox>
<c:ListItem text="Emp1"/>
<c:ListItem text="Emp2"/>
</co:DropdownBox>
<Label text="Type of Travel" />
<Select>
<c:ListItem key="B" text="Business"/>
<c:ListItem key="O" text="Other"/>
</Select>
</f:content>
</f:SimpleForm>
</l:content>
</l:Grid>
</mvc:View>
</script>
</head>
<body class="sapUiBody" role="application">
<div id="uiArea"></div>
</body>
</html>
I have installed all components and am trying out the various components mentioned in the CSS section of docs (http://ui.lumapps.com/css/buttons)
but the button get the shadow on hover, but do not ripple when clicked.
Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>lumx Trial</title>
<!-- Head -->
<link rel="stylesheet" href="bower_components/lumx/dist/lumx.css">
<link rel="stylesheet" href="bower_components/mdi/materialdesignicons.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
</head>
<body>
<div class="mb">
<button class="btn btn--xs btn--blue btn--raised" lx-ripple>Button</button>
<button class="btn btn--s btn--blue btn--raised" lx-ripple>Button</button>
<button class="btn btn--m btn--blue btn--raised" lx-ripple>Button</button>
<button class="btn btn--l btn--blue btn--raised" lx-ripple>Button</button>
<button class="btn btn--xl btn--blue btn--raised" lx-ripple>Button</button>
</div>
<!-- Before body closing tag -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/velocity/velocity.js"></script>
<script src="bower_components/moment/min/moment-with-locales.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/lumx/dist/lumx.js"></script>
</body>
</html>
Sorry, My bad. I hadn't added the angular module!
I want my iFrame window to show the URL I enter from the Form Text box, To that I want the iframe src="" to be changed to the form field input. How can I do that? Here is a sample code that I intent to use.
<html>
<head>
<title>Blah.</title>
<link href="style.css"rel="stylesheet" type="text/css" />
</head>
<body>
<form>
Enter URL: <input type="text" />
<input type="submit" value="GO" />
</form>
<iframe src="" frameborder="0" marginwidth="0" scrolling="yes"></iframe>
</body>
</html>
Try this.
<html>
<head>
<title>Blah.</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function SetSrc()
{
document.getElementById("myIfreme").src = document.getElementById("txtSRC").value;
}
</script>
</head>
<body>
<form>
Enter URL:
<input type="text" id="txtSRC" />
<input type="button" value="GO" onclick="SetSrc()" />
</form>
<iframe id="myIfreme" src="" frameborder="0" marginwidth="0" scrolling="yes"></iframe>
</body>
</html>