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.
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 am trying to make a custom dialog to show some text and link in the footer along with buttons. I don't know how to change the existing rendering for this, so I wrote a simple renderer to check the behavior. This is my code:
sap.m.Dialog.extend("EnhancedDialog",{
metadata:{
properties:{
footerLabelText:{type:"string",defaultValue:null},
footerLinkText:{type:"string",defaultValue:null},
footerLinkHref:{type:"string",defaultValue:null}
},
aggregations:{
_label:{type:"sap.m.Label",multiple:false,visibility:"hidden"},
_link:{type:"sap.m.Link",multiple:false,visibility:"hidden"}
},
events:{}
},
init:function(){
this.getAggregation("_label", new sap.m.Label({text:"Check"}));
this.getAggregation("_link",new sap.m.Link({text:"Link"}));
},
setFooterLabelText:function(oLabelText){
this.setProperty("footerLabelText",oLabelText,true);
this.getAggregation("_label").setText(oLabelText);
},
setFooterLinkText:function(oLinkText){
this.setProperty("footerLinkText",oLinkText,true);
this.getAggregation("_link").setText(oLinkText);
},
setFooterLinkHref:function(oLinkHref){
this.setProperty("footerLinkHref",oLinkHref,true);
this.getAggregation("_link").setHref(oLinkHref);
},
renderer:{
render:function(oRM,oControl){
oRM.write("<div");
oRM.writeControlData(oControl);
oRM.writeClasses();
oRM.write(">");
oRM.renderControl(oControl.getAggregation("_label"));
oRM.renderControl(oControl.getAggregation("_link"));
oRM.write("</div");
}
}
});
var enhancedDialog=new EnhancedDialog();
var btn=new sap.m.Button({
text:"Click Here!",
press: function(){
enhancedDialog.open();
}
});
But I am getting the error
Dialog.js:6 Uncaught TypeError: Cannot read property 'setInitialFocusId' of undefined
when I am clicking the button.
Can someone point out what I am doing wrong?
And how to change the existing renderer behavior to show text in the footer?
This is what I want to make:
The error you are seeing is because you have overwritten the init() method and not called the overwritten init() of Dialog. So the internal popup and other stuff does not get initialized. You have to call the base.init() this way:
init:function(){
sap.m.Dialog.prototype.init.apply(this,arguments);
this.getAggregation("_label", new sap.m.Label({text:"Check"}));
this.getAggregation("_link",new sap.m.Link({text:"Link"}));
},
However you will need to copy most of the DialogRenderers code to get a fully functional dialog.
Alternatively you could use the unmodified DialogRender and overwrite the Dialog._createToolbarButtons() method to add your Label and Link to the beginning:
_createToolbarButtons:function () {
Dialog.prototype._createToolbarButtons.apply(this,arguments);
var toolbar = this._getToolbar();
var toolbarContent = toolbar.getContent();
toolbar.removeAllContent();
toolbar.addContent(this.getAggregation("_label"));
toolbar.addContent(this.getAggregation("_link"));
// insertContent is not implemented correctly...
toolbarContent.forEach(function(control){toolbar.addContent(control)});
},
renderer:DialogRenderer
Full example on Plunker.
[...] show some text and link in the footer along with buttons.
Having a customizable Dialog footer is now supported since UI5 1.110. Simply define sap.m.Toolbar in the new <footer> aggregation of your sap.m.Dialog. For example:
<Dialog xmlns="sap.m" title="Title" initialFocus="okButton">
<!-- ... -->
<footer> <!-- Since UI5 1.110: -->
<Toolbar>
<Text text="Some text!" />
<ToolbarSpacer />
<Button id="okButton" text="OK" type="Emphasized" />
<Button text="Cancel" />
</Toolbar>
</footer>
</Dialog>
Sample demo:
globalThis.onUI5Init = () => sap.ui.require([
"sap/ui/core/mvc/XMLView",
], async (XMLView) => {
"use strict";
const control = await XMLView.create({
definition: `<mvc:View xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
displayBlock="true"
height="100%"
>
<App autoFocus="false">
<dependents>
<Dialog id="myDialog"
class="sapUiResponsiveContentPadding sapUiResponsivePadding--header sapUiResponsivePadding--content sapUiResponsivePadding--footer"
initialFocus="okButton"
title="Title"
draggable="true"
resizable="true"
>
<Text text="Content ..." />
<footer>
<Toolbar>
<Text text="Some text in the footer!" />
<ToolbarSpacer />
<Button id="okButton" text="OK" type="Emphasized" />
<Button text="Cancel" />
</Toolbar>
</footer>
</Dialog>
</dependents>
</App>
</mvc:View>`,
afterRendering: function () {
this.byId("myDialog").open();
}
});
control.placeAt("content");
})
<script id="sap-ui-bootstrap"
src="https://sdk.openui5.org/nightly/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.core,sap.m,sap.ui.unified,sap.ui.layout"
data-sap-ui-async="true"
data-sap-ui-oninit="onUI5Init"
data-sap-ui-theme="sap_horizon"
data-sap-ui-compatversion="edge"
data-sap-ui-excludejquerycompat="true"
data-sap-ui-xx-waitfortheme="init"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>
I am looking for a code, which allows me to concatenate two JSONModel attributes and then map to a table. For example if my JSON looks something like this.
[
{"FirstName","James", "LastName","Bond"},
{"FirstName","Robin", "LastName","Hood"},
{"FirstName","Peter", "LastName","Parker"}
]
I want my SAP UI table column to look something like
<table border=1>
<tr><th>Name</th></tr>
<tr><td>James Bond </td></tr>
<tr><td>Robin Hood </td></tr>
<tr><td>Peter Parker </td></tr>
</table>
First you have to put your json data into a model and assign that to your view or table (beware that your json data has syntax errors. below is the corrected version):
onInit:function(){
var data = [
{"FirstName":"James", "LastName":"Bond"},
{"FirstName":"Robin", "LastName":"Hood"},
{"FirstName":"Peter", "LastName":"Parker"}
];
this.getView().setModel(new sap.ui.model.json.JSONModel(data));
}
Second you need something like a table:
<t:Table rows="{/}">
<t:Column>
<Label text="Full Name"/>
<t:template>
<Label text="{FirstName} {LastName}"/>
</t:template>
</t:Column>
</t:Table>
The table binds its aggregation rows to your array (path '/'). For each item in the array the template will be cloned and displayed. The template is a label that displays firstname and lastname separated by space: Two databindings with relative path (relative to the array item of the row).
For this to work, you need to enable the "complex databinding" feature in the bootstrap script tag:
<script src="https://openui5.hana.ondemand.com/1.32.7/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"></script>
You could also enable complex databinding by setting the required ui5 version to something up to date (or "edge" which is the newest available): data-sap-ui-compatVersion="edge"
sap.ui.core.mvc.Controller.extend("view1", {
onInit:function(){
var data = [
{"FirstName":"James", "LastName":"Bond"},
{"FirstName":"Robin", "LastName":"Hood"},
{"FirstName":"Peter", "LastName":"Parker"}
];
this.getView().setModel(new sap.ui.model.json.JSONModel(data));
}
});
var view = sap.ui.xmlview({viewContent: $("#view1").html()});
view.placeAt("content");
<script src="https://openui5.hana.ondemand.com/1.32.7/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"></script>
<script type="sapui5/xmlview" id="view1">
<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" xmlns:t="sap.ui.table" controllerName="view1">
<t:Table rows="{/}">
<t:Column>
<Label text="Full Name"/>
<t:template>
<Label text="{FirstName} {LastName}"/>
</t:template>
</t:Column>
</t:Table>
</mvc:View>
</script>
<div id="content"></div>
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>
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;
}