Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I have following SAPUI5 app:
[Codepen](https://codepen.io/bifunctor/project/editor/XaOapY#)
I would like to indent the query button on the same like from input.
How to accomplish that?
This is kind of a hack. Just add an empty label association to the
button.
<Label text="Payers"></Label>
<Input id="payerFrom" showSuggestion="true" placeholder="From"
required="true">
</Input>
<Input id="payerTo" showSuggestion="true" placeholder="To"
required="true">
</Input>
<Label text=""></Label>
<Button text="Query" type="Emphasized" press="queryData">
<layoutData>
<layout:GridData span="XL6 L6 M6 S12"/>
</layoutData>
</Button>
You can use the indent property of GridData.
Try this out:
<Label text="Payers"></Label>
<Input id="payerFrom" showSuggestion="true" placeholder="From"
required="true">
</Input>
<Input id="payerTo" showSuggestion="true" placeholder="To"
required="true">
</Input>
<Button text="Query" type="Emphasized" press="queryData">
<layoutData>
<layout:GridData span="XL6 L6 M6 S12" indent="L1 M1 S0"/>
</layoutData>
</Button>
Related
I'm doing FreeCodeCamp's survey project but keep failing 9. If I enter numbers outside the range of the number input, I will see an HTML5 validation error.'
I don't understand because I though all I would have to do is add a min="10" max="100" thing. Here's what I have so far:
<label for="number" id="number-label" min="10" max="100"> Age </label>
<input type="number" id="number" placeholder="Enter Your Age" required>
min, max are attributes applied to numeric input elements. reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
So you need the following changes to your code.
<label for="number" id="number-label" > Age </label>
<input type="number" min="10" max="100" id="number" placeholder="Enter Your Age" required>
I have a simple form, that looks as follows:
On the large screen, it looks pretty small. I would like to increase the size and width.
This is the code:
<Page title="{i18n>authorization}">
<content>
<VBox alignItems="Center">
<f:SimpleForm id="registration" editable="true" layout="ResponsiveGridLayout" labelSpanXL="3" labelSpanL="3" labelSpanM="3" labelSpanS="12"
adjustLabelSpan="true" emptySpanXL="3" emptySpanL="3" emptySpanM="3" emptySpanS="0" columnsXL="1" columnsL="1" columnsM="1"
singleContainerFullSize="true">
<f:content>
<Label text=""/>
<Text text="{i18n>userAuthorize}"/>
<Label text=""/>
<Input placeholder="Enter your email address" id="email" type="Email" value="{confirm>/email}" liveChange="onHandleLiveChangeEmail"/>
<Label text=""/>
<Button type="Accept" enabled="{confirm>/enable}" text="{i18n>confirm}" press="handlePressAuthorization"
ariaDescribedBy="acceptButtonDescription genericButtonDescription">
<layoutData>
<FlexItemData growFactor="1"/>
</layoutData>
</Button>
</f:content>
</f:SimpleForm>
</VBox>
</content>
</Page>
Update
I have removed simple form and placed the controls in VBOX.
<Page title="{i18n>authorization}">
<content>
<VBox alignItems="Center">
<Label text=""/>
<Text text="{i18n>userAuthorize}"/>
<Label text=""/>
<Input placeholder="Enter your email address" id="email" type="Email" value="{confirm>/email}" liveChange="onHandleLiveChangeEmail"/>
<Label text=""/>
<Button type="Accept" enabled="{confirm>/enable}" text="{i18n>confirm}" press="handlePressAuthorization"
ariaDescribedBy="acceptButtonDescription genericButtonDescription">
<layoutData>
<FlexItemData growFactor="1"/>
</layoutData>
</Button>
</VBox>
</content>
</Page>
The controls still looks very small:
How can I increase the size of controls?
The properties labelSpan<ScreenSize> and emptySpan<ScreenSize> are the one which control the width of the actual elements within a "row" of the form.
More info here: https://sapui5.hana.ondemand.com/#/api/sap.ui.layout.form.SimpleForm
For example, for M you have label span of 3 and empty span of 3 => leaving 6 out of total 12 for the actual elements. Try reducing labelSpanM and emptySpanM to increase the width taken by the element Text, Button and Input
That being said, I don't think the choice of simple Form was a wise choice here - why don't you put the three elements directly into the VBox?
That also being said, in case you are implementing an authentication screen inside an application, you should rethink this and let authentication layers take care of that (wherever your app is running)
Update after Question update: depending on what you want to achieve, you could simply add a css class to the control and add some css. that is the "manual" way. you could add a custom theme and style the buttons there. you could add custom extensions of the standard controls, e.g. a custom button as extension of standard button. and completely change the rendering there. I think, this are more or less the possibilities
I have 2 images and 5 buttons in between those 2 images in header of UI5 application. On using Overflowtoolbar, the overflow (...) is shown at the extreme right, how can I make it appear in between exactly considering I will adjust the overflow priority as "Never overflow" for both the images and they will never overflow.
Another way: Is it possible to introduce an action sheet/ breadcrumb menu in the header and make it visible only if certain screen breakpoint is reached and at that time make all the other buttons disappear. In a way - to make certain controls visible/hide based on breakpoint level.
Goal is to have both the images visible till the point its possible and rest everythig in ... preferably in between those images. Else I am not seeing those ..., only 2 images are shown in small screen.
XML.view
<OverflowToolbar design="Transparent">
<Image src="images/abc.png" height="3.5rem">
<layoutData>
<OverflowToolbarLayoutData priority="High"/>
</layoutData>
</Image>
<Button id="1">
<layoutData>
<OverflowToolbarLayoutData priority="Low"/>
</layoutData>
</Button>
<Button id="2">
<layoutData>
<OverflowToolbarLayoutData priority="Low"/>
</layoutData>
</Button>
<Button id="3">
<layoutData>
<OverflowToolbarLayoutData priority="Low"/>
</layoutData>
</Button>
<Button id="4">
<layoutData>
<OverflowToolbarLayoutData priority="Low"/>
</layoutData>
</Button>
<Button id="5">
<layoutData>
<OverflowToolbarLayoutData priority="Low"/>
</layoutData>
</Button>
<ToolbarSpacer></ToolbarSpacer>
<Image src="images/logo.png" height="2rem">
<OverflowToolbarLayoutData priority="NeverOverflow"/>
</layoutData>
</Image>
<ToolbarSeparator></ToolbarSeparator>
<core:Icon id="loginInfo" src="sap-icon://customer" size="2rem"/>
</OverflowToolbar>
Here is an example of two images with an action sheet / breadcrumb menu in between:
<OverflowToolbar asyncMode="true">
<Image src="..." />
<Breadcrumbs currentLocationText="Laptop">
<layoutData>
<ToolbarLayoutData shrinkable="true" /><!-- if UI5 version < 1.103. -->
<!-- Note: sap.m.Breadcrumbs is shrinkable by default since UI5 1.103. -->
</layoutData>
<links>
<!-- ... -->
</links>
</Breadcrumbs>
<Image src="..." />
</OverflowToolbar>
From https://jsbin.com/humuxew/edit?js,output
In order to make breadcrumbs shrinkable in the toolbar, <ToolbarLayoutData shrinkable="true"/> needs to be added to the layoutData aggregation.*
* Update: unless the SAPUI5/OpenUI5 version ≥ 1.103 (See commit: 512d3dd).
You won't be able to solve your task with an OverflowToolbar since the ... are always rendered as last element (see Renderer: Line 23).
You could use the Event API for screen width changes, modify a view model in the event handler and bind the visible property to that view model as described in Device Adaptation.
This question already has answers here:
sap.m.Input's value binding with type="Number" clears the input field
(2 answers)
Closed 12 days ago.
This simple form clears out the input field when a number >1000 is entered. I've tried to add formatOptions but it does not make any difference.
This is the relevant part of the code.
<Input
description="Quantity"
placeholder="Float"
width="100%"
type="Number"
value="{path:'/classified',
type: 'sap.ui.model.type.Float',
constraints: {minimum: 1, maximum: 1001},
formatOptions: {pattern: '#,##0.###'} }">
<layoutData>
<l:GridData span="L2 M2 S2"/>
</layoutData>
</Input>
For clarity 1001, which is allowed by the validation, is also cleared out.
Here is a jsbin showing this.
Any help is greatly appreciated.
The OpenUI5/SapUI5 team has given me the solution. type="Number" should not be used. It works fine if this is removed.
I would like to read some values from my vm. Here's an example of what I've done so far
<div forEach="${vm.activityData.activityList}">
<label
value="#load(c:cat3('vm.activitiData.', each, '.organizer' ))" />
</div>
But it seems like it is unable to read the each inside the cat3. My objective is to get the organizer for each activity. Any idea how to achieve this ?
Update
For example, I want to simplify from this codes :
<div>
<label value="#load(vm.activityData.A.name)" />
<label value="#load(vm.activityData.ASponsor)" />
<label value="#load(vm.activityData.AOrganizer)" />
<separator/>
<label value="#load(vm.activityData.B.name)" />
<label value="#load(vm.activityData.BSponsor)" />
<label value="#load(vm.activityData.BOrganizer)" />
<separator/>
</div>
into
<div forEach="${vm.activityData.activityList}">
<label value="#load(c:cat3('vm.activityData.', each, '.name'))" />
<label value="#load(c:cat3('vm.activityData.', each, 'Sponsor'))" />
<label value="#load(c:cat3('vm.activityData.', each, 'Organizer'))" />
<separator/>
</div>
Basically what I want to do is to dynamically combine part of strings into one string. And then use #load(string).
Today I had the time to test it and I prepared a fiddle for you.
Your ZK version is good but I did forget to add one more thing.
You have to make use of the custom-attributes otherwise it wouldn't work.
Solution :
<div forEach="${vm.activityData.activityList}">
<custom-attributes field="${each}"/>
<label value="#load(vm.activityData[field].name)" />
<label value="#load(vm.activityData[c:cat(field, 'Sponsor')]" />
<label value="#load(vm.activityData[c:cat(field, 'Organizer')]" />
<separator/>
</div>
I created fast a working fiddle where you can test or look how it works.