I'm using sap.m to build a simple mobile app. I've made a VBox to hold a few check boxes and embedded it in a Page.
The width of the box is neatly the width of the screen (320px in the iPhone 5 device mode on Chrome). The labels of the checkboxes do not adhere to this width and simply grow beyond.
var oTicks = new sap.m.VBox();
oTicks.addItem(new sap.m.CheckBox({
name: 'name',
text: 'Are the tools and equipment I am going to use in safe working order?'
}));
As you can see in the screenshot here, the label of the third check box is > 320px (it's 454 to be exact).
Is there any way I can "wrap" the label so that it pushes the other items down, and fits the text inside the box?
As of version 1.54, sap.m.CheckBox supports the property wrapping with which the control can determine whether the label's text should wrap or not. Default value is false (no wrapping).
Demo
sap.ui.require([
"sap/ui/core/Core",
], Core => Core.attachInit(() => sap.ui.require([
"sap/ui/core/mvc/XMLView",
"sap/ui/model/json/JSONModel",
], (XMLView, JSONModel) => XMLView.create({
definition: `<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" height="100%">
<App>
<Page title="Checkbox Wrapping">
<headerContent>
<Switch state="{/wrapping}"
customTextOff=" "
customTextOn=" "
/>
</headerContent>
<VBox width="320px" backgroundDesign="Solid">
<CheckBox
text="Are the tools and equipment I'm going to use in safe working order?"
wrapping="{/wrapping}"
/>
</VBox>
</Page>
</App>
</mvc:View>`,
models: new JSONModel({ wrapping: false }),
}).then(view => view.placeAt("content")))));
<script id="sap-ui-bootstrap"
src="https://openui5nightly.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.core, sap.m"
data-sap-ui-async="true"
data-sap-ui-theme="sap_fiori_3_dark"
data-sap-ui-compatversion="edge"
data-sap-ui-xx-waitfortheme="init"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>
You can add a StyleClass to the CheckBox and use white-space: normal. SAPUI5 automatically put white-space: to no-wrap.
Edited to Jorgs final solution!
Example:
oTicks.addStyleClass('YourClassName');
In CSS:
.YourClassName label {
white-space: normal;
line-height: normal;
vertical-align: middle;
}
Related
This might be an opinionated question, but I'd like to ask it because capabilities of UI5 are quite broad. I need to have these elements as
To which I am planning to introduce a custom font. Do you think it's a good solution or is there any better way to do that with some out of the box solutions?
What you're looking for is sap.m.RatingIndicator.
<RatingIndicator
editable="false"
maxValue="6"
value="4"
iconSelected="imageOrIconURI1"
iconUnselected="imageOrIconURI2"
/>
API reference
Samples
In your case, you'll need two images: one for the cash / currency symbol, and one greyed-out version of it. Both URIs should be assigned to iconSelected and iconUnselected accordingly.
Here is my attempt:
sap.ui.require([
"sap/ui/core/Core"
], Core => Core.attachInit(() => sap.ui.require([
"sap/ui/core/Fragment",
"sap/ui/model/json/JSONModel",
"sap/ui/core/theming/Parameters",
], async (Fragment, JSONModel, ThemeParameters) => {
"use strict";
const control = await Fragment.load({
definition: `<form:SimpleForm xmlns:form="sap.ui.layout.form" xmlns="sap.m">
<Label text="Cost A" />
<RatingIndicator
displayOnly="true"
editable="false"
maxValue="6"
value="4"
iconSelected="{myCurrency>/filled}"
iconUnselected="{myCurrency>/unfilled}"
/>
<Label text="Cost B" />
<RatingIndicator
displayOnly="true"
editable="false"
maxValue="6"
value="2"
iconSelected="{myCurrency>/filled}"
iconUnselected="{myCurrency>/unfilled}"
/>
</form:SimpleForm>`,
});
//==================================================================
//============= Sample rating indicator icons ======================
const currencyCode = "€";
// determine theme-dependent color values for font colors:
const colorFilled = ThemeParameters.get("sapUiContentForegroundTextColor").replace("#", "%23");
const colorUnfilled = ThemeParameters.get("sapUiContentImagePlaceholderBackground").replace("#", "%23");
const model = new JSONModel({ // assign the icon URIs, e.g. data-URI with SVG content:
filled: `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 14 14'>
<text x='50%' y='66%'
fill='${colorFilled}'
dominant-baseline='middle'
text-anchor='middle'>
${currencyCode}
</text>
</svg>`,
unfilled: `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'>
<text x='50%' y='66%'
fill='${colorUnfilled}'
dominant-baseline='middle'
text-anchor='middle'>
${currencyCode}
</text>
</svg>`,
});
control.setModel(model, "myCurrency").placeAt("content");
})));
<script id="sap-ui-bootstrap"
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.core, sap.m, sap.ui.layout"
data-sap-ui-async="true"
data-sap-ui-theme="sap_fiori_3"
data-sap-ui-compatversion="edge"
data-sap-ui-xx-waitfortheme="init"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>
Since I put a plain text character to the SVG, the "image" is zoomable without losing quality and the color can be also made theme-dependent as shown above. But of course, you can also just use two raster images instead.
Either way, I believe the RatingIndicator is a good candidate which could be used instead of creating and maintaining a custom control or custom font.
In my UI5 app, I have a sap.m.DatePicker object and I want to let user to pick today's date in one click.
I can add a button outside the sap.m.DatePicker but it looks ugly because I have about 15 sap.m.DatePicker objects on the same screen and it will be a poor UI/UX.
Is there any way to show a "Today" button in sap.m.DatePicker?
yes, currently the easiest ways is as already suggested to extend the DatePicker. Anyways the DatePicker is an input with a button and calendar in a popover. So if you want to go the hard way you could assemble your own control.
As of UI5 1.95 (commit dd3aeaa), controls displaying a calendar can set showCurrentDateButton with true in order to display a Today-icon in the navigation header area.
Here is a sample with sap.m.DatePicker:
globalThis.onUI5Init = () => sap.ui.require([
"sap/ui/core/mvc/XMLView"
], async XMLView => (await XMLView.create({
definition: document.getElementById("myxmlview").textContent,
height: "100%",
})).placeAt("content"));
<script defer id="sap-ui-bootstrap"
src="https://openui5nightly.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.core,sap.m,sap.ui.unified"
data-sap-ui-oninit="onUI5Init"
data-sap-ui-async="true"
data-sap-ui-theme="sap_fiori_3"
data-sap-ui-excludejquerycompat="true"
data-sap-ui-compatversion="edge"
data-sap-ui-xx-waitfortheme="init"
></script>
<script id="myxmlview" type="text/xml">
<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" displayBlock="true">
<App>
<Page showHeader="false" class="sapUiResponsiveContentPadding">
<DatePicker showCurrentDateButton="true" value="1972-04-01" width="8rem"/>
</Page>
</App>
</mvc:View>
</script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>
Once clicked, the calendar will navigate to and focus today's date.
Press Enter, Space, or click the focused date to select today.
I am trying to achive something like this in SapUi5:
First row
Second row
Third row
Fourth row
and actually all I can do is:
First Row:
Second row:
Third row:
Fourth row:
when I used:
<f:FormElement label="First Row"/>
<f:FormElement label="Second row"/>
<f:FormElement label="Third row"/>
<f:FormElement label="Fourth row"/>
Is there any chance to remove :? Should I use something other than label?
Option 1:
You can use a sap.ui.layout.VerticalLayout. As for the actual elements, a Label is normally more used as a caption to another element, like a form field or a table column. So for general text, you want to use sap.m.Text.
Sample (ignore the boilerplate of the XMLview creation):
sap.ui.require(["sap/ui/core/mvc/XMLView"], function(XMLView) {
XMLView.create({
definition: $('#myView').html()
}).then(function(oView) {
oView.placeAt('content');
});
});
<html>
<head>
<meta charset="utf-8">
<script id='sap-ui-bootstrap' src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js' data-sap-ui-libs='sap.m,sap.ui.layout'></script>
<script id="myView" type="sapui5/xmlview">
<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:l="sap.ui.layout">
<Panel headerText="My Panel">
<l:VerticalLayout>
<Text text="First row" />
<Text text="Second row" />
<Text text="Third row" />
<Text text="Fourth row" />
</l:VerticalLayout>
</Panel>
</mvc:View>
</script>
</head>
<body class='sapUiBody'><div id='content'></div></body>
</html>
Option 2:
Put the text inside a proper Text instead of the label, eg:
<f:FormElement><Text text="First row" /></f:FormElement>
Option 3:
Hide the colon with CSS, but in this case you should prefer the other options since label is not meant to just display some independent text.
Using CSS
.sapUiForm.sapUiFormLblColon .sapUiFormElementLbl>.sapMLabel {
content: "" !important;
}
If you don't want to override the default CSS for all the form, you can give custom class to the form(like testForm) so that you can use the CSS to override only for the specific form.
.testForm.sapUiForm.sapUiFormLblColon .sapUiFormElementLbl>.sapMLabel {
content: "" !important;
}
Simply put, how can you change the border color of a Chosen jQuery select box? I am assuming you can do it with CSS but I can't quite figure out how.
$(".pnChosen").chosen({
search_contains: true
});
<select required class="pnChosen"></select>
I can use this to change the border color of all of them, but I only want to change ones that I mark as required.
.chosen-container{
border: 1px solid red;
}
And I also want to change the background color when they are disabled if that is possible.
You can use chosen's option inherit_select_classes.
Give required class on select element, and set css for this selector .required>chosen-single
$(".pnChosen").chosen({
search_contains: true,
inherit_select_classes: true
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.css" rel="stylesheet" />
<style>
.required>.chosen-single {
border: 1px solid #EE0000;
}
</style>
<select required class="pnChosen required">
<option>Option 1</option>
<option>Option 2</option>
</select>
Another option is to use the adjacent sibling combinator (+) selector in CSS to achieve the desired styling.
For example:
HTML
<select id="myselect" required="required">
...
</select>
<div id="myselect_chosen" class="chosen-container chosen-container-single">
<a class="chosen-single">
...
</a>
</div>
CSS
select:required + div.chosen-container a { ... }
This would apply the desired style(s) to your div.chosen-container a DOM element immediately following select:required. Just be aware that you may still have to establish CSS priority if you're attempting to override an existing Chosen style so your definitions can supersede any existing chosen styles.
Reference: Adjacent Sibling Combinator
I have an sap.m.Select control for a list of countries and I need to put flag near everyone. How can I do it? In XML, if it's possible.
Here is my XML code:
<m:Label text="{i18n>COUNTRY}" />
<m:Select width="100px"
fieldWidth="60%"
class="xcuiInputNoMargin"
enabled="{Edit>/EditOn}"
items="{countryList>/}"
>
<core:Item
key="{countryList>Country}"
text="{countryList>Country} - {countryList>Name}"
/>
</m:Select>
The sap.m.Select Object is restricted to display text (or Like #Jasper_07 said) icon only.
I think that the best solution for your problem is to use another object instead of your select. You can use Select Dialog and put inside whatever you want, like listItem with image.
This is an example:
<SelectDialog
noDataText="No Products Found"
title="Select Product"
search="handleSearch"
confirm="handleClose"
close="handleClose"
items="{
path: '/ProductCollection'
}" >
<StandardListItem
title="{Name}"
description="{ProductId}"
icon="{ProductPicUrl}"
iconDensityAware="false"
iconInset="false"
type="Active" />
</SelectDialog>
see link bellow
As of UI5 version 1.62, the following controls support displaying the icon on the left side.
sap.m.Select
sap.m.SelectList
And other controls based on the above mentioned ones, such as sap.m.ComboBox.
Here is an example:
sap.ui.getCore().attachInit(() => sap.ui.require([
"sap/ui/core/mvc/XMLView",
], XMLView => XMLView.create({
definition: `<mvc:View xmlns:mvc="sap.ui.core.mvc" height="100%">
<Select xmlns="sap.m" xmlns:core="sap.ui.core" class="sapUiTinyMargin">
<core:ListItem text="Paper plane" icon="sap-icon://paper-plane" />
<core:ListItem text="Stop Watch" icon="sap-icon://fob-watch" />
<core:ListItem text="Umbrella" icon="sap-icon://umbrella" />
</Select>
</mvc:View>`
}).then(view => view.placeAt("content"))));
<script id="sap-ui-bootstrap"
src="https://openui5nightly.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.core, sap.m"
data-sap-ui-preload="async"
data-sap-ui-async="true"
data-sap-ui-theme="sap_belize"
data-sap-ui-compatversion="edge"
data-sap-ui-xx-waitfortheme="true"
data-sap-ui-xx-xml-processing="sequential"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>
Keep in mind to use sap.ui.ListItem as an aggregation child in this case, instead of sap.ui.core.Item.
Limitation
Currently, the icon property only allows resource paths from "sap-icon://*". I.e. images, that are not icons such as country flags, are not possible. A possible workaround would be to make use of emoji flags as additionalText.
Otherwise, I'd recommend to look for alternative controls as shmoolki suggested.
from the documentation of sap.m.Select
The URI to the icon that will be displayed only when using the
IconOnly type
seems limiting, but try
<m:Select
type="sap.m.SelectType.IconOnly"
icon="sap-icon://cart">
</m:Select>