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>
Related
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>
I'm currently working on a page that is made with openui5, what I need to do is to insert a captcha, but as far as I know there is no captcha in openui5, what I was trying is to insert HTML content into this.
The problem is, my views are in XML and I did try to insert directly using tags and changing the content, but wasn't possible, it says incorrect xml parsing.
Part of my code of where I want to input my html div:
<Page id="page1" class="marginBoxContent" showHeader="false" showFooter="false" enableScrolling="true">
<content>
<Image src="../../image/logo.svg" />
<l:Grid
defaultSpan="L12 M12 S12"
width="100%">
<l:content>
<f:Form id="FormChange354"
minWidth="1024"
maxContainerCols="2"
editable="true">
<f:layout>
<f:ResponsiveGridLayout
labelSpanL="3"
labelSpanM="3"
emptySpanL="4"
emptySpanM="4"
columnsL="1"
columnsM="1" />
</f:layout>
<f:formContainers>
<f:FormContainer>
<f:formElements>
<f:FormElement label="{i18n>Language}">
<f:fields>
<Select id="animationSelect" selectedKey="en" change="languageChange">
<core:Item text="English" key="en" />
<core:Item text="Português" key="pt" />
<core:Item text="Español" key="es" />
<layoutData>
<FlexItemData growFactor="1" />
</layoutData>
</Select>
</f:fields>
</f:FormElement>
</f:formElements>
<f:formElements>
<f:FormElement label="{i18n>User}">
<f:fields>
<Input id="username" value="" type="Email" />
</f:fields>
</f:FormElement>
</f:formElements>
<f:formElements>
<f:FormElement label="{i18n>Password}">
<f:fields>
<Input id="password" type="Password" placeholder="" value="" />
</f:fields>
</f:FormElement>
</f:formElements>
<f:formElements>
<f:FormElement label="">
<f:fields>
<Button id="btnLogin" text="{i18n>Sigin}" type="Emphasized" press="login" />
</f:fields>
</f:FormElement>
</f:formElements>
</f:FormContainer>
</f:formContainers>
</f:Form>
<l:VerticalLayout>
<Link text="{i18n>CreateUser}" press="navCreateUser" />
<Link text="{i18n>RecoverPass}" press="navRecoverPass" />
<Link text="{i18n>ChangePass}" press="navChangePass" />
</l:VerticalLayout>
</l:content>
</l:Grid>
</content>
I want to insert exaclty here:
<f:formElements>
<f:FormElement label="">
<f:fields>
<Button id="btnLogin" text="{i18n>Sigin}" type="Emphasized" press="login" />
</f:fields>
</f:FormElement>
</f:formElements>
Inside the fields xml or before, because the captcha will appear above the login button.
The content of the div I want to insert is from google captcha:
<div id='recaptcha' class="g-recaptcha"
data-sitekey="your_site_key"
data-callback="onSubmit"
data-size="invisible"></div>
Couldn't have success yet, anybody can help me with that?
Maybe is something about the namespace, I don't know, here is my namespace config:
<mvc:View
height="100%"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
xmlns:l="sap.ui.layout"
xmlns:f="sap.ui.layout.form"
xmlns:core="sap.ui.core"
controllerName="hiddenName.app.login.view.Login">
Thanks a lot for your time!
thank you for every help. I got some help from all comments, what I did was declare the namespace to html:
<mvc:View
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
xmlns:l="sap.ui.layout"
xmlns:f="sap.ui.layout.form"
xmlns:core="sap.ui.core"
xmlns:html="http://www.w3.org/1999/xhtml"
height="100%"
controllerName="hiddenName.app.login.view.Login"
>
And simply added the tag as I show down here:
<html:div id="recaptchaGoogle" class="g-recaptcha" data-sitekey="yourKey"></html:div>
Also remember to declare the import of the google js(added it on my index):
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
I'm still trying to figure out how to get this captcha answer and pass or not to the login.
With that, the captcha appears and is generated.
Thank you!
To insert HTML in a XML view you could use the HTML control from the sap.ui.core library. You will have to escape the HTML text before using it in XML.
<core:HTML content='<div id="recaptcha" class="g-recaptcha" data-sitekey="your_site_key" data-callback="onSubmit" data-size="invisible"></div>' />
I already create view : header, content, and footer but footer and content not display and not getting an error. the directory in form1.view.xml is correct because no error when I load the form1 view. when I command the header code and I refresh, the content show and footer still not show. when I command the header and content, the footer show. how to fix this problem?
Form1.view.xml
<App id="navCon"
class="footer-height footer-color header-color background-home background-color
footer-size-color panel-header">
<!-- Header -->
<mvc:XMLView viewName="sap.ui.taspen.taspen.Header" />
<App>
<pages>
<Page>
<Panel id="panelModule" headerText="Header form" class="panelForm">
<content>
<Label text="Ini form 1" />
</content>
</Panel>
</Page>
</pages>
</App>
<!-- Footer -->
<mvc:XMLView viewName="sap.ui.taspen.taspen.Footer" />
</App>
Header:
<mvc:View xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m" xmlns:t="sap.ui.table" xmlns:l="sap.ui.layout" xmlns:tnt="sap.tnt"
controllerName="sap.ui.taspen.taspen.Header" xmlns:html="http://www.w3.org/1999/xhtml">
<App>
<pages>
<Page showHeader="false">
<tnt:ToolHeader>
<html:img src="icon/logo_taspen.png" class="header-logo-taspen" />
<html:p class="text-header">NEW APPLICATION CORE BUSINESS</html:p>
<ToolbarSpacer width="20px" />
<tnt:ToolHeaderUtilitySeparator />
<ToolbarSpacer>
<layoutData>
<OverflowToolbarLayoutData priority="NeverOverflow"
minWidth="20px" />
</layoutData>
</ToolbarSpacer>
<Text text="Selasa, 21/4/2017 / 11:07 AM" class="text-white" />
<Text text="Hello, Jhon Doe" class="text-white">
<layoutData>
<OverflowToolbarLayoutData priority="NeverOverflow" />
</layoutData>
</Text>
<Button icon="sap-icon://log" type="Reject" press="logoutPress"
class="button-logout button-logout-icon margin-logout">
<layoutData>
<OverflowToolbarLayoutData priority="NeverOverflow" />
</layoutData>
</Button>
</tnt:ToolHeader>
</Page>
</pages>
</App>
</mvc:View>
Footer:
<mvc:View xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m" xmlns:t="sap.ui.table" xmlns:l="sap.ui.layout" xmlns:tnt="sap.tnt"
controllerName="sap.ui.taspen.taspen.Footer" xmlns:html="http://www.w3.org/1999/xhtml">
<App>
<Page showHeader="false">
<footer>
<OverflowToolbar id="otbFooter">
<Button type="Transparent" text="Kebijakan dan Privasi"
press="kebdanprivPress" />
<Button type="Transparent" text="Bantuan" press="bantuanPress" />
<ToolbarSpacer />
<Label text="All Rights Reserved PT. Taspen Persero" />
<html:img src="icon/copyright-symbol.png" class="footer-logo-copyright" />
<Label text="2018" />
</OverflowToolbar>
</footer>
</Page>
</App>
</mvc:View>
To Display custome header instead of page header you have to use
<customHeader></customHeader>
tag.and remaining you have to place in <content></content>tag. can see you are missing content tag.
I've started with my first SAPUI5 application and I wanna use the Tool Header item like in the Demo Kit.
(I'm using an XML-View.)
I've included it into my view but now I get the error:
UIComponent.js:6 Uncaught Error: failed to load 'sap/tnt/ToolHeader.js' from resources/sap/tnt/ToolHeader.js: 404 - Not Found
Do I have embed a special script in my application? (Which one?)
page.view.xml
<mvc:View
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
xmlns:tnt="sap.tnt"
xmlns:html="http://www.w3.org/1999/xhtml"
controllerName="zdemo.controller.MachDetail">
<tnt:ToolHeader>
<Button icon="sap-icon://menu2" type="Transparent">
<layoutData>
<OverflowToolbarLayoutData priority="NeverOverflow" />
</layoutData>
</Button>
<ToolbarSpacer width="20px" />
<Button text="File" type="Transparent">
<layoutData>
<OverflowToolbarLayoutData priority="Low" />
</layoutData>
</Button>
<Button text="Edit" type="Transparent">
<layoutData>
<OverflowToolbarLayoutData priority="Low" />
</layoutData>
</Button>
<Button text="View" type="Transparent">
<layoutData>
<OverflowToolbarLayoutData priority="Low" />
</layoutData>
</Button>
<Button text="Navigate" type="Transparent">
<layoutData>
<OverflowToolbarLayoutData priority="Low" />
</layoutData>
</Button>
<Button text="Code" type="Transparent">
<layoutData>
<OverflowToolbarLayoutData priority="Low" />
</layoutData>
</Button>
<Button text="Refactor" type="Transparent">
<layoutData>
<OverflowToolbarLayoutData priority="Low" />
</layoutData>
</Button>
<Button text="Run" type="Transparent">
<layoutData>
<OverflowToolbarLayoutData priority="Low" />
</layoutData>
</Button>
<Button text="Tools" type="Transparent">
<layoutData>
<OverflowToolbarLayoutData priority="Low" />
</layoutData>
</Button>
<tnt:ToolHeaderUtilitySeparator />
<ToolbarSpacer>
<layoutData>
<OverflowToolbarLayoutData priority="NeverOverflow" minWidth="20px" />
</layoutData>
</ToolbarSpacer>
<Button text="Alan Smith" type="Transparent" press="handleUserNamePress">
<layoutData>
<OverflowToolbarLayoutData priority="NeverOverflow" />
</layoutData>
</Button>
</tnt:ToolHeader>
</mvc:View>
the only one script in my index.html
<script src="resources/sap-ui-core.js"
data-sap-ui-xx-bindingSyntax="complex" id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m" data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-resourceroots='{ "zdemo":"./"
}'>
Your code is correct, but according to the comments, you are using an older version which does not yet include the ToolHeader control.
By upgrading to SAPUI5 1.34+ you will be able to use the ToolHeader with the same code.
The documentation for the control includes the information when the control was added.
You need import module dependency "sap.tnt" to your project. You can do it this way:
1. install dependency via bower
bower install openui5/packaged-sap.tnt
if you need another dependency, you can find here: https://github.com/openui5
2. add reference lib to index.html
<script .... data-sap-ui-libs="sap.m, sap.tnt"></script>
3. if you use grunt serve, expose dependency resources by openui5_connect
on file Gruntfile.js, find openui5_connect key and add
openui5_connect: {
options: {
resources: [
...
'bower_components/openui5-sap.tnt/resources',
],
testresources: [
...
'bower_components/openui5-sap.tnt/test-resources'
]
}
}
4. To finish, add dependency entry to manifest.json
"sap.ui5": {
"dependencies": {
"libs": {
...
"sap.tnt": {}
}
}
}
And run your app
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>