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>
Related
As the title states, I would like to make out of an input a clickable hyperlink.
Code:
<Label text="Stackoverflow" />
<Input enabled="true" editable="false" name="Stackoverflow" value="Example" />
Issue: I want to display Example in the input as value, however, when clicking on the Example - to take you to stackoverflow.com.
Question: How to make it possible?
Without knowing what the use of the links are, generally, sap.m.InputBase controls can contain links within the value state message (Since 1.78).
sap.ui.getCore().attachInit(() => sap.ui.require([
"sap/ui/core/Fragment"
], Fragment => Fragment.load({
definition: `<Input xmlns="sap.m"
width="12rem"
valueState="Information"
placeholder="Input with links"
class="sapUiTinyMargin">
<formattedValueStateText>
<FormattedText htmlText="See %%0 and %%1.">
<controls>
<Link text="Link 1" press="alert('Link 1 clicked!')" />
<Link text="Link 2" press="alert('Link 2 clicked!')" />
</controls>
</FormattedText>
</formattedValueStateText>
</Input>`,
}).then(control => control.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"
data-sap-ui-async="true"
data-sap-ui-theme="sap_fiori_3"
data-sap-ui-compatversion="edge"
data-sap-ui-excludejquerycompat="true"
data-sap-ui-xx-waitfortheme="init"
></script>
<body id="content" class="sapUiBody"></body>
Even if a link or button would be the better solution, here is my suggestion:
XML with custom attribute "url"
<Input enabled="true" editable="false" id="idInputStack" name="Stackoverflow" value="Example">
<customData>
<core:CustomData key="url" value="https://www.stackoverflow.com" writeToDom="true" />
</customData>
</Input>
Controller:
var oInput = this.getView().byId("idInputStack");
oInput.addEventDelegate({
onclick: function() {
document.location.href = oInput.data("url"); //get custom attribute url
}
})
First we would provide an id to the Input control so that we could refer to the same from the controller.
<Input enabled="true" editable="false" name="Stackoverflow" value="Example" id="myInputLinkId"/>
Now we could add the typical user click event to the Input field by attaching a Browser event to the same and place it in the onInit() hook method so that it is always accessible.
onInit: function () {
this.getView().byId("myInputLinkId").attachBrowserEvent('click',function(){ window.open("https://stackoverflow.com/");});
}
I'm writing my first SAP app, and having gone through some of the tutorials, I understand that I need a controller for my view if I want it to do anything.
When I add the controllerName="./controller/login" (the controller's called 'login.controller.js'), it doesn't work, and I've tried variations of this.
The tutorials get me to copy code that uses the controller name, but they don't teach me anything about how to write the string for my own controller code.
How do I do this?
Controller code looks like this so far:
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(Controller) {
"use strict";
return Controller.extend("controller.Login", {
// controller logic goes here
});
});
and the view code looks like this:
<mvc:View
controllerName="controller.Login"
xmlns="sap.m"
xmlns:form="sap.ui.layout.form"
xmlns:mvc="sap.ui.core.mvc">
<Panel headerText="{/panelHeaderText}" class="sapUiResponsiveMargin" width="auto">
<form:SimpleForm editable="true" layout="ColumnLayout">
<Label text="User Name"/>
<Input value="{/firstName}" valueLiveUpdate="true" width="200px"/>
<Label text="Password"/>
<Input value="{/lastName}" valueLiveUpdate="true" width="200px"/>
<Button text="login" press=".onVisitHomePage"/>
</form:SimpleForm>
</Panel>
</mvc:View>
I'm going to add the .onVisitHomePage function to the controller but first I want to get this to work.
Like Julian Schmuckli already said you have to prefix the controller.login with your Namespace check you index.html where you initialize the sap-ui-core (see below).
<script src="resources/sap-ui-core.js" id="sap-ui-bootstrap"
data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m"
data-sap-ui-bindingSyntax="complex" data-sap-ui-compatVersion="edge"
data-sap-ui-preload="async" data-sap-ui-async="true"
data-sap-ui-frameOptions="trusted" data-sap-ui-appCacheBuster="./"
data-sap-ui-resourceroots='{
"your.namespace": "./",
"sap.ui.demo.mock": "mockdata"
}'></script>
Here you have to take the string that is in place of the "your.namespace" and combine it with the controller.login to your.namespace.controller.login .
You have to do this in both the view and the controller file.
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.
I'm using table and using this property.
<ColumnListItem type="Detail" detailPress="onShowItemEditDialog">
I want the place the icon on the left side.
Because I use responsivePopover.The popover is opening on the right side.
I think I will change the table elements in this popover.
Or is there another way to change the elements of the table?
What can be done for table edit?
Please help.
you can build your own ListItem.
<List headerText="Custom Content" mode="Delete" items="{path: '/ProductCollection'}" >
<CustomListItem>
<HBox>
<core:Icon size="2rem" src="sap-icon://attachment-photo" class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom" />
<VBox class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom" >
<Link text="{Name}" target="{ProductPicUrl}" press="handlePress"/>
<Label text="{ProductId}"/>
</VBox>
</HBox>
</CustomListItem>
</List>
This example is taken from: https://openui5.hana.ondemand.com/#/sample/sap.m.sample.CustomListItem/code
A little tweak worked for me. Use the below code appropriately.
onAfterRendering: function() {
$( "thead .sapMListTblNavCol" ).insertAfter( "thead .sapMListTblHighlightCol" );
$( "tbody .sapMListTblNavCol" ).insertAfter( "tbody .sapMListTblHighlightCell" );
},
I'm using sap.m.TextArea control inside sap.m.List where the values of each TextArea were mapped to a JSONModel. Here is the xml-view code:
<List id="otherPicList" growing="true" items="{ path : 'newRequest>/OtherPic' }" >
<items>
<CustomListItem type="Inactive">
<Image id="otherPic" src="{newRequest>pic}" width="90px" height="60px" />
<VBox>
<TextArea value="{newRequest>text}"/>
</VBox>
</CustomListItem>
</items>
</List>
When I start to type inside the sap.m.TextArea it freezes after the first character. I can only type one more character if I click outside the control and inside again. I think this bug happen because of the data binding inside a sap.m.List control.
If I set the value property without the model binding it works just fine. Is this a known bug or am I using wrong the control?
Data binding and growing list are not smart enough:
After the value of text area is changed and updated on the input event (after the key stroke), data binding is updated with the following diff:
1 item is deleted
2 item is updated
Growing List listens to data model change and does exactly the same: it deletes the changed item and creates it again.
When the text area inside of list item is deleted from DOM, focus is lost. The new text area does not get focus and any subsequent keystroke goes to nowhere.
I will report this issue to development.
It is working for my code snippet. Please run and check. Maybe there is something else causing your issue.
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m,sap.ui.commons"></script>
<!-- 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">
<List id="otherPicList" items="{/test}" >
<items>
<CustomListItem type="Inactive">
<Image id="otherPic" src="{pic}" width="90px" height="60px" />
<VBox>
<TextArea value="{text}"/>
</VBox>
</CustomListItem>
</items>
</List>
</mvc:View>
</script>
<script>
sap.ui.controller("my.own.controller", {
onInit:function() {
var data = {test:[{text:"123",pic:"https://www.gravatar.com/avatar/e25560c87abbbb90143653d98c9924dc?s=128&d=identicon&r=PG"},{text:"456",pic:"https://www.gravatar.com/avatar/e25560c87abbbb90143653d98c9924dc?s=128&d=identicon&r=PG"},{text:"789",pic:"https://www.gravatar.com/avatar/e25560c87abbbb90143653d98c9924dc?s=128&d=identicon&r=PG"},{text:"101112",pic:"https://www.gravatar.com/avatar/e25560c87abbbb90143653d98c9924dc?s=128&d=identicon&r=PG"}]};
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(data);
this.getView().setModel(oModel);
}
});
var myView = sap.ui.xmlview("myView", {viewContent:jQuery('#view1').html()}); //
myView.placeAt('content');
</script>
<body class='sapUiBody'>
<div id='content'></div>
</body>
I found out the problem, check out your code snippet including the property growing="true" inside the sap.m.List control. This property cause the strange behavior I was talking about.
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m,sap.ui.commons"></script>
<!-- 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">
<List id="otherPicList" growing="true" items="{/test}" >
<items>
<CustomListItem type="Inactive">
<Image id="otherPic" src="{pic}" width="90px" height="60px" />
<VBox>
<TextArea value="{text}"/>
</VBox>
</CustomListItem>
</items>
</List>
</mvc:View>
</script>
<script>
sap.ui.controller("my.own.controller", {
onInit:function() {
var data = {test:[{text:"123",pic:"https://www.gravatar.com/avatar/e25560c87abbbb90143653d98c9924dc?s=128&d=identicon&r=PG"},{text:"456",pic:"https://www.gravatar.com/avatar/e25560c87abbbb90143653d98c9924dc?s=128&d=identicon&r=PG"},{text:"789",pic:"https://www.gravatar.com/avatar/e25560c87abbbb90143653d98c9924dc?s=128&d=identicon&r=PG"},{text:"101112",pic:"https://www.gravatar.com/avatar/e25560c87abbbb90143653d98c9924dc?s=128&d=identicon&r=PG"}]};
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(data);
this.getView().setModel(oModel);
}
});
var myView = sap.ui.xmlview("myView", {viewContent:jQuery('#view1').html()}); //
myView.placeAt('content');
</script>
<body class='sapUiBody'>
<div id='content'></div>
</body>