I am displaying images in my page so i am using Image control
<m:Image src="{path: 'MyModel>Link', formatter:'.formatter.imageFormatter' }" visible= "true" alt="{i18n>picname}"></m:Image>
and the formatter
imageFormatter: function(val) {
return val;
},
when i see the network in the debbuger the image is loaded perfectlly with status 200 and when i see preview it is an empty image But in My page nothing is displayed (When i open the image in other tab when i go back to my app all images are displayed )
I Don't know the problem
Set the "densityAware" property to false in the sap.m.Image control and try again
Simon.
Set a value in the Column Header - e.g.: (please namespace correctly - you need to prefix with m:)
<Column
hAlign="Center"
visible="true"
width="145px">
<Text text="Image"/>
</Column>
Not doing so may be having consequences you are not anticipating.
Also, to me, your cells collection seems incorrect - can you try:
<m:items>
<m:ColumnListItem type="Navigation" detailPress="onEdit">
<m:cells>
<m:Image src="{path: 'MyModel>Link', formatter:'.formatter.imageFormatter' }" visible="true" alt="{i18n>picname} />
</m:cells>
</m:ColumnListItem>
</m:items>
Related
How do I dynamically switch between two fragments using click / press event?
I have the following XML fragment which in turn has nested two fragments:
<core:FragmentDefinition
xmlns="sap.m"
xmlns:core="sap.ui.core">
<IconTabFilter
id="containerFrag"
text="{name}"
key="{id}">
<dependents>
<core:Fragment
fragmentName="com.example.fragments.fragment1"
type="XML" />
<core:Fragment
fragmentName="com.example.fragments.fragment2"
type="XML" />
</dependents>
</IconTabFilter>
</core:FragmentDefinition>
Assuming each fragment has a button who's handler has the following
buttonPress: function(oEvent) {
let oView = this.getView();
let showFrag1 = oEvent.getParameter("arguments"); //showFrag1 = true / false
let fragToShow = showFrag1 ? oView.byId("frag1Id").clone() : oView.byId("frag2Id").clone()
let container = oView.byId("containerFrag");
container.destroyContent();
container.addContent(fragToShow);
}
When I debug using chrome, fragToShow updates with the correct frag depending on the showFrag1 argument, but the view doesn't get updated - container.addContent(fragToShow) seems to have no effect except if I reload the page
Not sure why this works but I had to go one up from the container and insert the new fragment there like so:
let container = oView.byId("containerFrag");
container.getParent().destroyContent();
container.getParent().addContent(fragToShow);
This example also helped: https://ui5.sap.com/#/entity/sap.ui.layout.form.Form/sample/sap.ui.layout.sample.Form354 - though they use removeAllContent and insertContent, both seem to work just fine.
Thanks #D. Seah and #Ethan Jewett
I am trying to show percentage value on radial chart, but radial chart's percentage property only allow me to display value between 0 and 100.
How can I do this?
Having a view with id__xmlview0,
and a chart with id RadialMicroChart1:
$("#__xmlview0--RadialMicroChart1 > svg > text").text(yourText)
It will work even if you have several charts.
SAP does not allow values over 100% for Radial Micro Charts, you could try setting the value using JQuery and manipulating fraction and total to fit your case.
Using the charts unique id for the first chart chartRadial1 to get it's element.
Update:
Bare in mind that, depending on the layout of your view, the children might change and you would have to research more into nth and children selectors to make sure you are selecting the right one but for this example its the svg's 6th child.
var percent = $(".sapSuiteRMCFont");
percent.text("200%");
OR In Controller & View:
press: function(oEvent) {
var myVal = 150,
myTotal = 200,
actTotal = 100,
newVal = (myVal * actTotal) / myTotal;
this.getView().byId("chartRadial1").setPercentage(newVal);
//with the given id in xml view, you can be certain only the text for chartRadial1 will change using child selector
setTimeout(function() {
$("div#__xmlview2--chartRadial1 > svg.sapSuiteRMC.sapSuiteRMCSizeResponsive.sapSuiteRMCNeutralTextColor :nth-child(6)").text(myVal + "%");
}, 500);
}
div#__xmlview2--chartRadial1>svg.sapSuiteRMC.sapSuiteRMCSizeResponsive.sapSuiteRMCNeutralTextColor :nth-child(6) {
font-family: fantasy !important;
}
div#__xmlview2--chartRadial2>svg.sapSuiteRMC.sapSuiteRMCSizeResponsive.sapSuiteRMCNeutralTextColor :nth-child(6) {
font-family: arial !important;
}
<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="sap.sample.Detail" xmlns:semantic="sap.m.semantic" xmlns:c="sap.suite.ui.microchart">
<content>
<Label text="6.25rem x 6.25rem" width="12.5rem" class="sapUiSmallMargin" />
<FlexBox width="6.25rem" height="6.25rem">
<items>
<c:RadialMicroChart id="chartRadial1" size="Responsive" percentage="99" press="press"></c:RadialMicroChart>
</items>
</FlexBox>
<FlexBox width="6.25rem" height="6.25rem">
<items>
<c:RadialMicroChart id="chartRadial2" size="Responsive" percentage="99" press="press"></c:RadialMicroChart>
</items>
</FlexBox>
</content>
</mvc:View>
I have a column in table whose value is bound to a property of data model.
text = { modelName>/OrderNo}. How to make it conditional based on a flag? If property from Model isReturnable = true, I want to show text = {modelName>/ReturnNo} else I want to show {OrderNo}. How to built syntax for that?
<table:Column>
<Label class="smartist-table-column-header" text="Qty Returned"/>
<table:template>
<Text text="{ path: 'OrderDetail>OrderNo'}"/>
</table:template>
</table:Column>
You can use expression binding.
See URL for details: https://ui5.sap.com/#/topic/daf6852a04b44d118963968a1239d2c0
Solution to your problem:
<Text text="{= ${modelName>isReturnable} ? ${modelName>/ReturnNo} : ${OrderDetail>OrderNo}}" />
As expression binding would be a more appropriate approach to this problem,
Custom formatting can also be one way to achieve this.
In the view:
<Text text= "{ parts:[
{path: "modelName>isReturnable"},
{path: "modelName>ReturnNo"},
{path: "modelName>OrderNo"},
],
formatter: '.formatOrderNo'
}"/>
In the corresponding controller
formatter: function(isReturnable, sReturnNo, sOrderNo){
if(isReturnable == true){
return sReturnNo;
}else{
return OrderNo;
}
}
In case of more complex logic where you need to perform some calculations/manipulations on the fields before binding, custom formatting is the way to go. Custom Formatters in SAPUI5
I am adding controls to SAPUI5 table column items via the controller using factory function so that I can apply cross-field validation along with standard control validations. Now the validation is working fine it shows the error message with the red coloured border, but when I move to next control, validation state of control disappear. I noticed that it is happening due to some internal functionality of SAPUI5 where it re-render the table body element of the table in the HTML dom explorer which also get rid of the error classes applied to control. It occurs for the first time, but when I try to change the value again of the same controller with an invalid data, it displays the error and keeps the value state with the red border.
my table XML view
<Table id="todosTable" growing="true" items="{
path: 'TripService>/todos', factory: '.populateItems'
}">
<columns>
<Column id="id">
<Text text="Id"/>
</Column>
<Column id="title">
<Text text="Title"/>
</Column>
<Column id="url">
<Text text="Url"/>
</Column>
<Column id="thumbnailUrl">
<Text text="Thumbnail Url"/>
</Column>
</columns>
</Table>
My Controller code to apply the columns item
function populateItems(sId: any, oContext: any) {
const idInput = new Input({
value: "{TripService>id}",
id: `id_${sId}`,
liveChange: onIdChange.bind(this)
});
const titleInput = new Input({
value: "{TripService>title}",
id: `title_${sId}`,
liveChange: onTitleChange.bind(this)
});
const urlInput = new Input({
value: "{TripService>url}"
});
const tumbnailInput = new Input({
value: "{TripService>thumbnailUrl}"
});
var row = new ColumnListItem(sId, {
cells: [idInput, titleInput, urlInput, tumbnailInput]
});
return row;
}
function onIdChange(oEvent: any) {
oEvent.oSource.setValueState(sap.ui.core.ValueState.Error);
}
function onTitleChange(oEvent: any) {
oEvent.oSource.setValueState(sap.ui.core.ValueState.Error);
}
Some images with valid error state and then with buggy error state
As you can see in above two images the error is gone in second image though I expect it to be there.
I am using a list that prints data from a model and one should have an icon. The thing is that the icon changes depending on the value and I should also change its color.
I have in my view :
<ObjectListItem title="State" type="Active" number="{/Data/8/state}"
icon="{= ${/Data/8/state}.toUpperCase() === 'OK' ? 'sap-icon://accept' :
'sap-icon://decline' }"></ObjectListItem>
Options like addStyleClass doesn't seem to work. I have changed the color by adding css to the id that SAP adds to the Icon, but since it has to change according to the value I don't know how to achieve it.
Another option was to add color directly to these two icons but I wasn't able to add the classes.
You can use CustomData and then create a css selector to match it:
<ObjectListItem title="State" type="Active" number="{/Data/8/state}"
icon="{= ${/Data/8/state}.toUpperCase() === 'OK' ? 'sap-icon://accept' :
'sap-icon://decline' }">
<customData>
<core:CustomData writeToDom="true" key="class" value="{= ${/Data/8/state}.toUpperCase()}" />
</customData>
</ObjectListItem>
This will render your control with an additional data-class attribute (actually, data-{key}, where key is the key that you defined on your core:CustomDatatag).
You can then match that with the CSS selector
[data-class='OK'] {
color: blue !important;
}
[data-class='NOT-OK']{
color: red !important;
}