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;
}
Related
In my app, the expansion arrow has to be in the left side of the panel.
But, by default it's displaying in the right side.
This :
<ExpansionPanelSummary
className={classes.panelSummary}
expandIcon={<ExpandMoreIcon />}
IconButtonProps={{edge: 'start'}}
aria-controls='panel1a-content'
id='panel1a-header'
>
Doesn't made it.
Granted, you can't (easily) change the order in which the components appear in the HTML. However, there is a way using only CSS. ExpansionPanelSummary uses display: flex; you can therefore set the order property on the icon to make it appear to the left of the content.
This can be achieved with either useStyles or withStyles (Or possibly using plain CSS, but I haven't tried it); here's how you'd go about using the latter:
import withStyles from "#material-ui/core/styles/withStyles";
const IconLeftExpansionPanelSummary = withStyles({
expandIcon: {
order: -1
}
})(ExpansionPanelSummary);
You can then write the rest of your code using IconLeftExpansionPanelSummary instead of ExpansionPanelSummary when you want the icon to appear to the left. Don't forget to set IconButtonProps={{edge: 'start'}} on the component for proper spacing.
<AccordionSummary
className={classes.accordionSummary}
classes={{
expandIcon: classes.expandIcon,
expanded: classes.expanded
}}
IconButtonProps={{
disableRipple: true
}}
></AccordionSummary>
You can add class and use flex-direction
accordionSummary: {
flexDirection: 'row-reverse'
}
It's simple
add class on <ExpansionPanelSummary> like this
<ExpansionPanelSummary className={classes.panelSummary}>
add css against this class in jss like this
panelSummary:{flexDirection: "row-reverse"},
In case using css
add class on <ExpansionPanelSummary> like this
<ExpansionPanelSummary className="panelSummary">
add css against this class in jss like this
.panelSummary{flex-direction: row-reverse;}
you can get the expansion panel icon on left by removing it from expandIcon and add it as a children in Summary something like this
<ExpansionPanel defaultExpanded={true}>
<ExpansionPanelSummary aria-controls="panel1a-content">
{this.state.expanded ? <RemoveIcon/> : <ExpandIcon />}
<Typography component='h4' variant='h4'>My Expansion Panel</Typography>
</ExpansionPanelSummary>
<ExpansionPanelsDetails />
</ExpansionPanel>
The challenge is that the order is hardcoded into the codebase and you will not be able to use the ExpansionPanel as is.
If you look at the implementation, you will find the code as below
<div className={clsx(classes.content, { [classes.expanded]: expanded })}>{children}</div>
{expandIcon && (
<IconButton
disabled={disabled}
className={clsx(classes.expandIcon, {
[classes.expanded]: expanded,
})}
edge="end"
component="div"
tabIndex={-1}
aria-hidden
{...IconButtonProps}
>
{expandIcon}
</IconButton>
)}
As you see the <div> contains the text and then the IconButton is displayed.
So, you may have to work with what's provided out of the box or create your own Component based on what material-UI provides.
Hope that helps.
You can modify the CSS class like this:
notice the absolute position, in this way you can move the div that contains the icon whatever position you want with 'left' or 'right' properties
const useStyles = makeStyles((theme) => ({
ExpansionPanelSummaryExpandedIcon: {
'& div.MuiExpansionPanelSummary-expandIcon': {
position: 'absolute',
right: '5%',
},
}
}));
and then use in the ExpansionPanelSummary
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1-content"
id="panel1bh-header"
className={classes.ExpansionPanelSummaryExpandedIcon}
>
references:
https://cssinjs.org/?v=v10.3.0
https://v4-8-3.material-ui.com/customization/components/#overriding-styles-with-classes
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
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 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.
I am using AngularStrap, (TypeAhead), trying to make the substring in the matched items to stand out, like either make them bold (like jquery autocomplete) or change the background of the characters ta different color
California
Technical
I thought this should be possible by changing css (if I know they have a selector for the matched substring) Or use of template/$templatecache
no luck so far
EDIT: In this plnkr I can see the drop down menu items have user input highlighted/bolded but cannot see why and how it happens:
<input type="text" class="span3" ng-model="typeaheadValue" bs-typeahead="typeahead">
plnkr -> http://plnkr.co/edit/Yjff9DiLnGqi2x1E5D2q?p=preview
The typeahead dropdown menu items can be styled through .dropdown-menu a. Matched text is regexed' to <strong>match></strong> i.e style those through .dropdown-menu a strong. Example :
/* style the dropdown items */
.dropdown-menu a {
font-family : 'courier new';
font-size: 110%;
}
/* styling matched text */
.dropdown-menu a strong {
color: white;
background-color: red;
}
forked plnkr -> http://plnkr.co/edit/LpdRiH9DxeRiAib3MOnn?p=preview