I am trying to show microchart in my tile container. But I don't know what is wrong with it. I have a single tile. which have some small charts like a progress bar, pie charts etc. none of my tile showing these. I've included the namespace for charts which is "xmlns:micro="sap.suite.ui.microchart"
<CustomTile >
<l:VerticalLayout class="sapUiContentPadding" width="100%">
<l:content>
<FlexBox height="70px" width="170px">
<micro:HarveyBallMicroChart isResponsive="true" total="100" totalScale="Mrd" showTotal="true" showFractions="true" app:name="harvey ball" press="press">
<micro:items>
<micro:HarveyBallMicroChartItem fraction="63.5" color="Good" fractionScale="Mrd" />
</micro:items>
</micro:HarveyBallMicroChart>
</FlexBox>
</l:content>
</l:VerticalLayout>
</CustomTile>
Put away:
<FlexBox height="70px" width="170px">
</FlexBox>
Related
Why does the XML tree on the picture looks like shown on the second picture? MessageStrip tries to get into the content area of IconTabBar even jumping over 4 elements and tiles get out by any means. There are no restrictions in documentation on what can placed in the IconTabBar or in the IconTabFilter. GenericTile is not a layout which is supposed to take the whole place on the screen. How to put tiles into the content of IconTabBar?
Here's the code of the view:
<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc">
<IconTabBar id="idTopLevelIconTabBar" class="sapUiResponsiveContentPadding">
<items>
<IconTabFilter id="start" icon="sap-icon://hint">
<GenericTile class="sapUiMediumMarginBeginEnd sapUiLargeMarginTop tileLayout"
header="Sales Fulfillment Application Title"
subheader="Subtitle"
>
<TileContent unit="EUR" footer="Current Quarter">
<ImageContent src="sap-icon://home-share"/>
</TileContent>
</GenericTile>
<GenericTile class="sapUiMediumMarginBeginEnd sapUiLargeMarginTop tileLayout"
header="Manage Activity Master Data Type"
subheader="Subtitle"
>
<TileContent />
</GenericTile>
<GenericTile class="sapUiMediumMarginBeginEnd sapUiLargeMarginTop tileLayout"
header="Manage Activity Master Data Type With a Long Title Without an Icon"
subheader="Subtitle Launch Tile" mode="HeaderMode"
>
<TileContent unit="EUR" footer="Current Quarter" />
</GenericTile>
<GenericTile class="sapUiMediumMarginBeginEnd sapUiLargeMarginTop tileLayout"
header="Jessica D. Prince Senior Consultant"
subheader="Department"
>
<TileContent/>
</GenericTile>
<MessageStrip
type="Information"
showIcon="true"
text="Another IconTabFilter"
/>
</IconTabFilter>
<IconTabFilter id="layouts" icon="sap-icon://bookmark">
<!-- ... -->
</IconTabFilter>
</items>
</IconTabBar>
</mvc:View>
The solution was to remove my custom CSS (e.g. tileLayout) and to add any margin class (e.g. "sapUiLargeMarginTop") to the Message Strip so that Generic Tile fits inside an IconTabFilter.
The result
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" );
},
enableTickmarksis true for both slider controls, yet only one shows them?
<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
<Dialog title="{Title}" icon="sap-icon://create">
<beginButton>
<Button text="{i18n>cancel}" press="handleCloseCompetencySelection"/>
</beginButton>
<endButton>
<Button type="Accept" text="{i18n>submit}" press="handleSubmitCompetencySelection"/>
</endButton>
<content>
<FlexBox direction="Column" alignItems="Center" class="sapUiMediumMarginTopBottom">
<items>
<HBox><Label text="{i18n>required}: "/><Label id="RequiredProficiencyLabel" text="{ProfidrDescr}" design="Bold"/></HBox>
<Slider id="RequiredProficiencySlider" enabled="false" liveChange="onSliderChange" enableTickmarks="true" min="0" max="10"
class="sapUiSmallMarginBottom" width="400px"/>
</items>
</FlexBox>
<FlexBox direction="Column" alignItems="Center" class="sapUiMediumMarginTopBottom">
<items>
<HBox><Label text="{i18n>achieved}: "/><Label id="ProficiencyLabel" text="" design="Bold"/></HBox>
<Slider id="ProficiencySlider" liveChange="onSliderChange" enableTickmarks="true" min="0" max="10" class="sapUiSmallMarginBottom"
width="400px"/>
</items>
</FlexBox>
<MessageStrip text="{i18n>dragMessage}" type="Information" showIcon="true" class="sapUiMediumMargin"></MessageStrip>
</content>
</Dialog>
</core:FragmentDefinition>
There was a bug which is fixed as of version 1.52. The z-index of tickmarks was incorrectly set. Here you can see that the tickmarks are displayed correctly in Dialog: https://jsbin.com/ruqosej/edit?html,js,output
Funny story:
for "disabled" slider that tickmark looks bolder and perceptible than "enabled" one
the second slider shows the tickmarks, but you are not able to see them due to the very light grayscale color of the marks (to make sure that it is true, try to look at the sceen with different angle and you will see the tickmarks of the second slider; or use another display)
In fiori guideline of View Setting and Responsive Table, there is a info bar shows the filter setting. How to implement it?
It looks like a sap.m.MessageStrip, but there are only five kinds of MessageType in MessageStrip(Error, Information...), seems no such color suits for this bar. Should I overwrite this color?
In this Demo, message strip is put above the Table, but in design, it seems to put between table title and column, how to implement it?
I've tried this:
<Table>
<headerToolbar>
<Toolbar>
<Title id="tableHeader" text="title"/>
<!--BUTTONS-->
<VBox>
<MessageStrip
text="Filtered By:"
type="Information"
showCloseButton="true"
showIcon="false">
</MessageStrip>
</VBox>
</Toolbar>
</headerToolbar>
</Table>
But it looks like this:
It is called infoToolbar, not infoBar...
<Table>
<infoToolbar>
<Toolbar
active="true"
press="handleInfobarPress" >
<Label text="Filtered By: " />
<ToolbarSpacer />
<core:Icon
tooltip="Reset filter"
src="sap-icon://sys-cancel"
class="size2"
color="white"
press="onResetFilters">
</core:Icon>
</Toolbar>
</infoToolbar>
<headerToolbar>
<Toolbar>
<Title id="tableHeader" text="title"/>
<!--BUTTONS-->
</Toolbar>
</headerToolbar>
</Table>
infoToolbar is implemented in sap.m.ListBase as Aggregations: https://openui5.hana.ondemand.com/#/api/sap.m.ListBase
Both sap.m.List and sap.m.Table borrowed these aggregations/methods from sap.m.ListBase.
I have paid a decent hair tribute to this one
Why in the world, Label 1 and Label 2 have different vertical alignments?
<s:Form width="100%">
<s:FormHeading width="100%" label="Heading" />
<s:FormItem width="100%" label="Label 1">
<s:HGroup verticalAlign="bottom">
<s:Label text="Size" fontSize="40"/>
<s:Label text="Mb"/>
</s:HGroup>
</s:FormItem>
<s:FormItem width="100%" label="Label 2">
<s:HGroup verticalAlign="middle">
<s:VGroup horizontalAlign="center">
<s:Label text="Set1" />
<s:Label text="{this.set1}" fontSize="40"/>
<s:Label text="Days" />
</s:VGroup>
<s:Label text="+" fontSize="40" />
<s:VGroup horizontalAlign="center">
<s:Label text="Set2" />
<s:Label text="{this.set2}" fontSize="40" />
<s:Label text="Days" />
</s:VGroup>
</s:HGroup>
</s:FormItem>
</s:Form>
Bug or feature? The label of a FormItem is aligned with the baseline of the FormItem's content. A picture says more than a thousand words, so I'll show you what happens:
So it turns out to be a feature (thanks for asking this question: I didn't know this myself until today).
In order to "fix" this feature, you'll have to create a custom skin: create a skin class by copying the original spark.skins.spark.FormItemSkin.
Find the element called labelDisplay; it should look like this:
<s:Label id="labelDisplay"
fontWeight="bold"
left="labelCol:0" right="labelCol:5"
bottom="row1:10" baseline="row1:0"/>
See that baseline attribute? That's what's causing the undesired behaviour.
You can simply remove it; the label will then always align to the bottom. If you wish to align it to the vertical center, you could alter it like this:
<s:Label id="labelDisplay" fontWeight="bold" verticalAlign="middle"
left="labelCol:0" right="labelCol:5" top="row1:10" bottom="row1:10"/>
Now all you need to do, is applying your custom skin to your FormItem:
<s:FormItem skinClass="my.custom.FormItemSkin">
Or in case of more frequent usage:
<fx:Style>
#namespace s "library://ns.adobe.com/flex/spark";
s|FormItem.centeredLabel {
skinClass: ClassReference("my.custom.FormItemSkin");
}
</fx:Style>
<s:FormItem styleName="centeredLabel">