Change format of sap.m.Text component from the view - sapui5

I can quite handily change a button in the view using it's property 'type' in an expression..
type="{= (${Orders>SupplierNote} && ${Orders>SupplierNote} !== '') ?
'Reject' : (${Orders>InternalNote} && ${Orders>InternalNote} !== '') ?
'Emphasized' : 'Default'}"/>
The problem is, how do I do this for a Text component?
I can't overwrite the class and it doesn't have a type.

Here's how I implemented CustomData to add a class with expression Binding...
In the View....
<Text text="{Orders>EmailAddress}" tooltip="{Orders>EmailAddress}">
<customData>
<core:CustomData key="mydata" value="{= (${Orders>Status} === '2' ) ? 'Red' : (${Orders>Status} === '1') ? 'Green' : (${Orders>Status} === '0') ? 'Amber' : ''}" writeToDom="true" />
</customData>
</Text>
Now the CSS.....
.sapMText[data-mydata="Red"] {
color:#cc1919;
}
.sapMText[data-mydata="Green"] {
color:#007833;
}
.sapMText[data-mydata="Amber"] {
color:#d14900;
}

It's quit understandable that the Text control does not have something like the type property. In the context of a Button it has a clear semantic (Accept, Reject, ...) while it would be hard to achieve the same for a Text control. However, the type of a Button is just used by the renderer to apply a specific style class. You can do something similar with a Text as well:
<Text class="customStyleClass" text="Hellow World!"/>
Now your custom style class is applied. Unfortunately expression binding does not work here. If you need to make the style dependent on your data you can write custom data to DOM and use it in your custom style class. However, this should be used sparsely.

You could use two text controls, each carrying one of your class options, then use conditional control on the visible attribute.
<Text class="customStyleClass_1" text="Hellow World!" visible="{= ${somevalue} > '0' ? false : true }"/>
<Text class="customStyleClass_2" text="Hellow World!" visible="{= ${somevalue} > '0' ? true : false }"/>
There are weaknesses in this approach, for example the overhead if there are many such text controls, and also if you have to refer to the text on code then you would need to determine the visible version etc.

Related

Unable to find a way to customize the spinner and clearButton in asyncTypeHead in react-bootstrap-typehead <AsyncTypehead>

Spinner refers to the spinner that appears on the input on the right corner when isLoading = {true}.
clearButton refers to the clearButton to clear data in input box.
You can customize those items by passing your own components via the typeahead's child render prop:
<Typeahead ... >
{({ onClear, selected }) => (
<div className="rbt-aux">
{!!selected.length && <MyClearButton onClick={onClear} />}
{!selected.length && isLoading && <MySpinner />}
</div>
)}
</Typeahead>
Working example: https://codesandbox.io/s/rbt-custom-aux-components-gn3kn
Note that the .rbt-aux classname is used internally to position the built-in clear button and loader components and can be re-used. You may also add your own styles to position the custom components however you want.

ComboBox in UI5 does not display ValueState

ComboBox is not showing state like Error, Warning with highlight around the borders. But it does change the state. For example, if it is error state, and if I try to enter new value in combobox, it will show that "invalid Entry" tip near the box. But the box borders are never highlighted in red. Below is the code:
XML.view
<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:l="sap.ui.layout">
<Dialog id......>
<ComboBox id="combo1" change="cChanged" items="{path: '/results'}">
<items>
<core:Item key="{ID}" text="{Name}"/>
</items>
</ComboBox>
</Dialog>
Controller.js
cChanged: function(oEvent) {
var newval = oEvent.getParameter("newValue");
var key = oEvent.getSource().getSelectedItem();
if (newval !== "" && key === null) {
sap.ui.getCore().byId("combo1").setValueState("Error");
oEvent.getSource().setValue("");
sap.m.MessageToast.show("Please select from existing IDs")
flag = false;
} else {
oEvent.getSource().setValueState('None');
}
You can also access combo1 control instance by using oEvent.getSource() event OR use byId() from the sap.ui.core.Fragment class and not sap.ui.getCore().byId()
Also, if you are writing a logic only to validate if what the user input in the combobox is a valid item, consider replacing your ComboBox by the sap.m.Select control.
Both ComboBox and Select has same look and feel, but Select does not allow a manual input. It can also have an empty option if you use the property forceSelection

Conditional column value in UI5 table

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

Change icon color if condition

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;
}

UI5 MessageBox remain transparent

I have a message box that I want to do some extra editing on a line. But once I show it, it remains transparent. Is there something that I'm missing to give it a normal background.
The fragment for the form:
<Label text="UnitPrice"/>
<Input id='unitpriceid' type="Text" text="{path: 'UnitPrice' }"/>
<Label text="Quantity"/>
<Input type="Text" text="{path: 'Quantity' }"/>
</form:SimpleForm>
</core:FragmentDefinition>
How I call the fragment.
handleLineItemPress : function (evt) {
var context = evt.getSource().getBindingContext();
var oLayout = sap.ui.xmlfragment("ApproveSESComponent.DO_SES.view.LinePopup", this);
var oModelTemp = this.getView().getModel().getData();
// get the view and add the layout as a dependent. Since the layout is being put
// into an aggregation any possible binding will be 'forwarded' to the layout.
var oView = this.getView();
oView.addDependent(oLayout);
var that = this;
sap.m.MessageBox.show(oLayout, {
icon: sap.m.MessageBox.Icon.INFORMATION,
title: "My message box title",
styleClass: "sapUiSizeCompact",
actions: [sap.m.MessageBox.Action.YES, sap.m.MessageBox.Action.NO],
onClose: function(oAction) { / * do something * / }
});}
I change the styleClass: "sapUiSizeCompact" to soemthing else and then added a background-color to this style.
Then the box was no longer transperant.
I don't think sap.m.MessageBox is designed for input other than simple button-based choices. Certainly that's how I read the documentation (and that's how message boxes typically work in other APIs):
Provides easier methods to create sap.m.Dialog with type sap.m.DialogType.Message, such as standard alerts, confirmation dialogs, or arbitrary message dialogs.
You may be able to shoehorn it into allowing you to add an input field but I don't think that's how it's designed (it looks undocumented to me) and don't be surprised if it breaks in a future release. Rather use sap.m.Dialog.
Same problem here...
Solution: I used the sap.m.MessageBox in a project based on sap.ui.common elements. Replaced it with sap.ui.common.MessageBox and I had a well working Message Box.