I've multiple control in one headerToolbar. I want to align one of them (Seach Field) at the right most. both images are from two different screen size. I use because when i decrease the screen size seachfield should not hide and come at next line.
I want to keep seach field at right most.
the code for this is
<headerToolbar>
<Toolbar id="dsdfgfanfgjd">
<content>
<HBox width='100%' wrap='Wrap'>
<items>
<FormattedText class="customPanelHeader"
htmlText=""/>
<ToolbarSpacer>
<layoutData>
<OverflowToolbarLayoutData priority="NeverOverflow" minWidth="22px"/>
</layoutData>
</ToolbarSpacer>
<SearchField id="searchFilter" placeholder="filter value" value="{/searchFilter}" width="12em"
liveChange=".onChangedSearchFilter" valueLiveUpdate="true"/>
</items>
</HBox>
</content>
</Toolbar>
To keep the SearchBox at the right end irrespective of the screen size, use below code:
<Toolbar height='auto'>
<content>
<HBox width='100%' wrap='Wrap'>
<items>
<Text text='text0' width='3rem' />
<Text text='text1' width='3rem' />
<Text text='text2' width='3rem' />
<Text text='text3' width='3rem' />
<Text text='text4' width='3rem' />
<Text text='text5' width='3rem' />
<Text text='text6' width='3rem' />
<Text text='text7' width='3rem' />
<Text text='text8' width='3rem' />
<Text text='text9' width='3rem' />
<Text text='text10' width='3rem' />
<Text text='text11' width='3rem' />
<Text text='text12' width='3rem' />
<ToolbarSpacer></ToolbarSpacer>
<HBox justifyContent='End'>
<layoutData>
<FlexItemData
growFactor='1'>
</FlexItemData>
</layoutData>
<Input id="searchFilter" class="searchFilterInput"
placeholder="filter value" value="{/searchFilter}" width="100%"
liveChange=".onChangedSearchFilter" valueLiveUpdate="true" />
<core:Icon class="searchFilterIcon" size="1.75rem"
src="sap-icon://search" tooltip="search" />
</HBox>
</items>
</HBox>
</content>
</Toolbar>
Related
I have to make a matrix of radio buttons exactly like the image attached (this is from https://experience.sap.com/fiori-design-web/radio-button/). But only one option selected per line.
Since the image is from the guidelines shouldn't we be able to reproduce it easily? Been trying to work with radio button groups but it doesn't end up looking like this...
Did you try the "groupName" Property?
Name of the radio button group the current radio button belongs to. You can define a new name for the group. If no new name is specified, this radio button belongs to the sapMRbDefaultGroup per default. Default behavior of a radio button in a group is that when one of the radio buttons in a group is selected, all others are unselected.
https://sapui5.hana.ondemand.com/#/api/sap.m.RadioButton%23controlProperties
you can have a look on https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.RadioButtonGroup/sample/sap.m.sample.RadioButtonGroup
You can just create 2 groups and align them. With a bit of predefined css classes i think you would get your result. Or you use groupName but you cant use it with RadioButtonGroup.
Radiogroup with a bit of adjustment from your side:
<FlexBox class="sapUiMediumMarginBeginEnd">
<Label text="Foo" class="sapUiLargeMarginBeginEnd"/>
<Label text="Bar" class="sapUiLargeMarginBegin"/>
</FlexBox>
<HBox class="sapUiTinyMarginTopBottom">
<Label text="selected"/>
<RadioButtonGroup id="rbg3" columns="5" valueState="Error" class="sapUiMediumMarginBottom">
<RadioButton id="RB3-1" text="Option 1" />
<RadioButton id="RB3-2" text="Option 2" />
<RadioButton id="RB3-3" text="Option 3" />
</RadioButtonGroup>
</HBox>
<HBox class="sapUiTinyMarginTopBottom">
<Label text="unselected"/>
<RadioButtonGroup id="rbg4" columns="5" valueState="Error" class="sapUiMediumMarginBottom">
<RadioButton id="RB3-5" text="Option 1" />
<RadioButton id="RB3-6" text="Option 2" />
<RadioButton id="RB3-7" text="Option 3" />
</RadioButtonGroup>
</HBox>
</VBox>
or you can do this with the groupNamewhich i would prefere more, but here also a little adjustment with the flexbox.
<VBox class="sapUiSmallMargin">
<HBox class="sapUiTinyMarginTopBottom">
<FlexBox class="sapUiMediumMargin" direction="Column" alignItems="Start">
<Label text="Selected" />
<Label text="Unselected" class="sapUiTinyMarginTop"/>
</FlexBox>
<VBox class="sapUiMediumMarginEnd">
<Label text="Success" labelFor="groupB" />
<RadioButton text="Option 1" groupName="test1" />
<RadioButton text="Option 2" groupName="test2" />
</VBox>
<VBox class="sapUiMediumMarginEnd">
<Label text="Error" labelFor="groupC" />
<RadioButton text="Option 1" groupName="test1" />
<RadioButton text="Option 2" groupName="test2" />
</VBox>
<VBox class="sapUiMediumMarginEnd">
<Label text="Warning" labelFor="groupD" />
<RadioButton text="Option 1" groupName="test1" />
<RadioButton text="Option 2" groupName="test2" />
</VBox>
<VBox class="sapUiMediumMarginEnd">
<Label text="Information" labelFor="groupE" />
<RadioButton text="Option 1" groupName="test1" />
<RadioButton text="Option 2" groupName="test2" />
</VBox>
</HBox>
</VBox>
Ended up just using a sap.m.Table and for the content used sap.m.Text and sap.m.RadioButton. Also important to use groupName to distinguish the two radio button lines.
`
<mvc:View
controllerName="HelloWorld.App"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<Page title="My App"/>
<Table id="idProductsTable">
<columns>
<Column>
<Text
text="" />
</Column>
<Column
hAlign="Center">
<Text text="Low"/>
</Column>
<Column
hAlign="Center">
<Text text="Medium" />
</Column>
<Column
hAlign="Center">
<Text text="High" />
</Column>
</columns>
<items>
<ColumnListItem vAlign="Middle">
<cells>
<Text
text="First Line" />
<RadioButton
groupName="1"/>
<RadioButton
groupName="1"/>
<RadioButton
groupName="1"/>
</cells>
</ColumnListItem>
<ColumnListItem vAlign="Middle">
<cells>
<Text
text="Second Line" />
<RadioButton
groupName="2"/>
<RadioButton
groupName="2"/>
<RadioButton
groupName="2"/>
</cells>
</ColumnListItem>
</items>
</Table>
</mvc:View>
`
I have this issue where I want to have the scrollbar active only for the content of my IconTabBar, while keeping the header fixed. I read here in stackoverflow that I should put all the content inside a ScrollContainer, and then set the stretchContentHeight="true".
But this option kills my header.
this is my code
<mvc:View
controllerName="Quickstart.App"
displayBlock="true"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
xmlns:l="sap.ui.layout"
xmlns:core="sap.ui.core"
xmlns:tnt="sap.tnt"
height="100%">
<App id="app">
<Page id="intro" showHeader="false" enableScrolling="false">
<tnt:ToolHeader height="10rem">
<Image src="./images/image.png"/>
<Text text="title" wrapping="false" />
<ToolbarSpacer />
<Button text="Feedback" icon="sap-icon://feedback" type="Transparent" press="onPressFeedback"/>
</tnt:ToolHeader>
<IconTabBar
id="idIconTabBarNoIcons"
items="{/Sheet1}"
class="sapUiResponsiveContentPadding"
expandable="false"
backgroundDesign="Transparent"
applyContentPadding="false"
stretchContentHeight="true">
<items>
<IconTabFilter text="{category_title}" key="info">
<Toolbar class="toolbar_boarder" design="Transparent">
<ToolbarSpacer/>
<Button text="Sort" tooltip="Order Alphabetically" id="IdSortButton" width="70px" press="onPressSort" icon="sap-icon://alphabetical-order" type="Ghost"/>
<Button id="IdExpandButton" tooltip="Additional Information" text="Collapse" class="sapUiTinyMarginEnd" width="101px" press="onPressExpand" icon="sap-icon://collapse-all" type="Ghost"/>
</Toolbar>
<ScrollContainer id="Scroll" class="sapUIBody" height="100%" width="100%" horizontal="false" vertical="true">
<l:Grid containerQuery="true" content="{path:'tools', templateShareable:false}" id="gridId">
<Panel class="iconFilters" fieldGroupIds="idPanel" >
<HBox>
<!-- <core:Icon press="onPressToolIcon"
src="{tool_icon_url}" size="2rem" color="Default" class="" /> -->
<Image src="{tool_icon_url}" width="2.2rem" press="onPressToolImage"></Image>
<Link text="{tool_title}" wrapping="true" target="_blank" href="{tool_redirect_url}" class="sapUiTinyMargin title_header"/>
</HBox>
<!-- Control the size of the line before badges -->
<Toolbar height="6px" width="75%"></Toolbar>
<HBox items="{path:'badges', templateShareable:false}" height="1rem" justifyContent="End" class="drawline">
<core:Icon size="1rem" src="{badge_css_url}" tooltip="{badge_hover_text}" class="badgePadding" />
</HBox>
<VBox height="11rem">
<Label text="Use Cases" class="sapUiTinyTop" design="Bold"/>
<List
items="{path:'usecases', templateShareable:false}"
includeItemInSelection="true">
<CustomListItem>
<HBox class="listItems">
<Text text="• " class="items_circle" />
<FormattedText htmlText="{item}" />
</HBox>
</CustomListItem>
</List>
</VBox>
<VBox height="11rem">
<Label text="Strengths" class="sapUiSmallTop" design="Bold"/>
<List
items="{path:'strengths', templateShareable:false}"
includeItemInSelection="true">
<CustomListItem>
<HBox class="listItems">
<Text text="• " class="items_circle" />
<Text
wrapping="true" text="{item}"/>
</HBox>
</CustomListItem>
</List>
</VBox>
<VBox height="5rem" fieldGroupIds="hideShowElements" visible="true">
<Label text="Best Practices" class="sapUiSmallTop" design="Bold" fieldGroupIds="hideShowElements"/>
<List
items="{path:'best_practices', templateShareable:false}"
includeItemInSelection="true">
<CustomListItem>
<HBox class="listItems">
<Text text="• " class="items_circle2" />
<Link wrapping="true"
text="{best_practices_name}"
target="_blank"
href="{best_practices_url}" />
</HBox>
</CustomListItem>
</List>
</VBox>
<VBox class="" height="5rem" visible="true" fieldGroupIds="hideShowElements">
<Label text="Content Responsibility" class="sapUiSmallTop" fieldGroupIds="hideShowElements" design="Bold" visible="true"/>
<List
items="{path:'content_responsibility', templateShareable:false}"
includeItemInSelection="true">
<CustomListItem>
<HBox class="listItems">
<Text text="• " class="items_circle" />
<Text
wrapping="true" text="{item}"/>
</HBox>
</CustomListItem>
</List>
</VBox>
<VBox class=" conf_move_down" height="3.5rem" visible="true" fieldGroupIds="hideShowElements">
<Label text="Confidentiality Level" design="Bold" fieldGroupIds="hideShowElements"/>
<HBox class="listItems">
<Text text="• " class="items_circle2" />
<Link wrapping="true"
text="{confidentiality_level}"
target="_blank"
href="{confidentiality_level_url}" />
</HBox>
</VBox>
<VBox class=" expandClassTrue" height="6rem" visible="true" fieldGroupIds="hideShowElements">
<Label text="Support" design="Bold" fieldGroupIds="hideShowElements"/>
<List fieldGroupIds="hideShowElements"
items="{path:'support', templateShareable:false}"
includeItemInSelection="true">
<CustomListItem class="listItems">
<HBox class="listItems">
<Text text="• " class="items_circle2" />
<Link wrapping="true"
text="{support_name}"
target="_blank"
href="{support_url}" />
</HBox>
</CustomListItem>
</List>
</VBox>
</Panel>
</l:Grid>
</ScrollContainer>
</IconTabFilter>
</items>
</IconTabBar>
</Page>
</App>
</mvc:View>
When I use "False" for stretchcontentheight, this is the top of my page:
When I use "true", the header is gone.
Does anyone know how to solve this?
Thank you very much for reading and helping
I fixed my problem with a workaround using custom headers.
I am trying to get three panels to show on my object page but for some reason it shows only the last panel like it is shown on the screenshot:
The Object.view.xml looks like the following:
<mvc:View controllerName="ns.mngportfolios.controller.Object" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" xmlns:semantic="sap.f.semantic" xmlns:form="sap.ui.layout.form">
<semantic:SemanticPage id="page" headerPinnable="false" toggleHeaderOnTitleClick="false" busy="{objectView>/busy}" busyIndicatorDelay="{objectView>/delay}">
<semantic:titleHeading>
<Title text="{PORTFOLIO_NUMBER}" level="H2" responsive="true" />
</semantic:titleHeading>
<semantic:headerContent>
<ObjectNumber number="{
path: 'EBITDA',
formatter: '.formatter.numberUnit'
}" />
<ObjectAttribute text="{COMPANY_NAME}" />
</semantic:headerContent>
<Panel class="sapUiResponsiveMargin" width="auto" headerText="{i18n>portfolioTitle}" expandable="{device>/system/phone}" expanded="true">
<content>
<form:SimpleForm id="objectForm">
<form:content>
<Label text="{i18n>portfolioSharesLabel}" />
<Text text="{PORTFOLIO_SHARES}" />
<Label text="{i18n>portfolioNameLabel}" />
<Text text="{PORTFOLIO_NAME}" />
<Label text="{i18n>portfolioDepreciationLabel}" />
<Text text="{= ${DEPRECIATION} + ' ' + 'EUR'}" />
</form:content>
</form:SimpleForm>
</content>
</Panel>
<Panel class="sapUiResponsiveMargin" width="auto" headerText="{i18n>yearTitle}" expandable="{device>/system/phone}" expanded="false">
<content>
<List id="companyList">
<items>
<StandardListItem icon="sap-icon://building" title="Building1" />
<StandardListItem icon="sap-icon://email" title="abcd#mail.com" />
<StandardListItem icon="sap-icon://world" title="google.com" />
<StandardListItem icon="sap-icon://phone" title="+00123456789" />
<StandardListItem icon="sap-icon://map" title="23 Wall st, 10005 NY" />
</items>
</List>
</content>
</Panel>
<Panel class="sapUiResponsiveMargin" width="auto" headerText="{i18n>mapTitle}">
<Image src="{
parts: [
'23 Wall St',
'10005',
'New York',
'United States'
],
formatter: '.formatter.formatMapUrl'
}" />
</Panel>
<semantic:sendEmailAction>
<semantic:SendEmailAction id="shareEmail" press=".onShareEmailPress" />
</semantic:sendEmailAction>
</semantic:SemanticPage>
</mvc:View>
Can someone help me to identify the missing piece here?
"content" aggregation of sap.f.semantic.SemanticPage has a Cardinality of 0..1. This means we can add a maximum of one child control. To accomplish the task of displaying 3 panels, try embedding all three panels inside a container. A few examples of containers which could be used can be found in samples page under the category containers and layouts.
To provide an example :-
<mvc:View controllerName="ns.mngportfolios.controller.Object" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" xmlns:semantic="sap.f.semantic" xmlns:form="sap.ui.layout.form">
<semantic:SemanticPage id="page" headerPinnable="false" toggleHeaderOnTitleClick="false" busy="{objectView>/busy}" busyIndicatorDelay="{objectView>/delay}">
<semantic:titleHeading>
<Title text="{PORTFOLIO_NUMBER}" level="H2" responsive="true" />
</semantic:titleHeading>
<semantic:headerContent>
<ObjectNumber number="{
path: 'EBITDA',
formatter: '.formatter.numberUnit'
}" />
<ObjectAttribute text="{COMPANY_NAME}" />
</semantic:headerContent>
<VBox>
<items>
<Panel class="sapUiResponsiveMargin" width="auto" headerText="{i18n>portfolioTitle}" expandable="{device>/system/phone}" expanded="true">
<content>
<form:SimpleForm id="objectForm">
<form:content>
<Label text="{i18n>portfolioSharesLabel}" />
<Text text="{PORTFOLIO_SHARES}" />
<Label text="{i18n>portfolioNameLabel}" />
<Text text="{PORTFOLIO_NAME}" />
<Label text="{i18n>portfolioDepreciationLabel}" />
<Text text="{= ${DEPRECIATION} + ' ' + 'EUR'}" />
</form:content>
</form:SimpleForm>
</content>
</Panel>
<Panel class="sapUiResponsiveMargin" width="auto" headerText="{i18n>yearTitle}" expandable="{device>/system/phone}" expanded="false">
<content>
<List id="companyList">
<items>
<StandardListItem icon="sap-icon://building" title="Building1" />
<StandardListItem icon="sap-icon://email" title="abcd#mail.com" />
<StandardListItem icon="sap-icon://world" title="google.com" />
<StandardListItem icon="sap-icon://phone" title="+00123456789" />
<StandardListItem icon="sap-icon://map" title="23 Wall st, 10005 NY" />
</items>
</List>
</content>
</Panel>
<Panel class="sapUiResponsiveMargin" width="auto" headerText="{i18n>mapTitle}">
<Image src="{
parts: [
'23 Wall St',
'10005',
'New York',
'United States'
],
formatter: '.formatter.formatMapUrl'
}" />
</Panel>
</items>
</VBox>
<semantic:sendEmailAction>
<semantic:SendEmailAction id="shareEmail" press=".onShareEmailPress" />
</semantic:sendEmailAction>
</semantic:SemanticPage>
</mvc:View>
Please choose the container control that best suits your layout demands.This is just an example.
I want to split HeaderToolbar into two rows when my screen width is less then 570px.
<headerToolbar>
<Toolbar id="dsdfgfanfgjd">
<FormattedText class="customPanelHeader" htmlText="customHtml"></FormattedText>
<ToolbarSpacer></ToolbarSpacer>
<Input id="searchFilter" class="searchFilterInput" placeholder="filter value" value="{/searchFilter}" width="12em" liveChange=".onChangedSearchFilter" valueLiveUpdate="true"/>
<core:Icon class="searchFilterIcon" size="1.75em" src="sap-icon://search" tooltip="search"/>
</Toolbar>
![Toolbar
]1
How i can manange it for small screen.
To resolve the responsive side of Toolbar,use HBOX. it will automatically align them when screen size change. Please test if it fixes your problem.
<Toolbar height='auto'>
<content>
<HBox width='100%' wrap='Wrap'>
<items>
<Text text='text0' width='3rem' />
<Text text='text1' width='3rem' />
<Text text='text2' width='3rem' />
<Text text='text3' width='3rem' />
<Text text='text4' width='3rem' />
<Text text='text5' width='3rem' />
<Text text='text6' width='3rem' />
<Text text='text7' width='3rem' />
<Text text='text8' width='3rem' />
<Text text='text9' width='3rem' />
<Text text='text10' width='3rem' />
<Text text='text11' width='3rem' />
<Text text='text12' width='3rem' />
<ToolbarSpacer></ToolbarSpacer>
<Input id="searchFilter" class="searchFilterInput"
placeholder="filter value" value="{/searchFilter}" width="100%"
liveChange=".onChangedSearchFilter" valueLiveUpdate="true" />
<core:Icon class="searchFilterIcon" size="1.75rem"
src="sap-icon://search" tooltip="search" />
</items>
</HBox>
</content>
</Toolbar>
Please note the height of Toolbar is set to 'auto' to adjust according to no. of rows created when items are re-aligned. Also, the width is HBOX is set to '100%' to occupy entire space available on screen.
I have a button and a grid below.
Inside the grid I have some elements (input, checkbox, label, ...)
How can I set not visible all the elements inside the grid together together at once?
<Grid xmlns="sap.ui.layout" id="idGrid">
<content>
<Label xmlns="sap.m"
id="idLabel"
design="Standard"
text="the label">
</Label>
<Input xmlns="sap.m"
id="idInput"
value="the input">
</Input>
</content>
</Grid>
put the Grid content into a VerticalLayout.
sap.ui.controller("test.controller", {
handleHide: function(oEvent) {
var bt = oEvent.getSource();
var vl = this.getView().byId("vlContent");
if (vl.getVisible()) {
vl.setVisible(false);
bt.setText("Show");
} else {
vl.setVisible(true);
bt.setText("Hide");
}
}
});
var oView = sap.ui.xmlview({
viewContent: jQuery("#view1").html()
});
oView.placeAt("content");
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m"></script>
<script id="view1" type="sapui5/xmlview">
<mvc:View xmlns:l="sap.ui.layout" controllerName="test.controller" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:f="sap.ui.layout.form">
<l:Grid defaultSpan="L12 M12 S12" width="auto" id="idGridDetail">
<l:content>
<l:VerticalLayout id="vlContent">
<f:SimpleForm id="SimpleFormDisplay111" minWidth="1024" maxContainerCols="2" editable="false" layout="ResponsiveGridLayout" title="" labelSpanL="3" labelSpanM="3" emptySpanL="4" emptySpanM="4" columnsL="1" columnsM="1">
<f:content>
<Label text="Se OC valido per Incas" />
<Text text="{/seOCValidoPerIncas}" />
<Label text="ocdc" id="idLabelCdc" />
<Text text="{/cdc}" id="idTextCdc" />
<Label text="Ultimo passaggio Incas" />
<Text text="{/ultimoPassaggioIncas}" />
</f:content>
</f:SimpleForm>
<Panel expandable="true" expanded="true" headerText="Passaggio da Rampa a Incas">
<content>
<Table xmlns="sap.m" id="idTable_RampaToIncas_testate" items="{
path: '/passaggioRampaToIncas/testate'}">
<headerToolbar>
<Toolbar>
<Label text="Testate" design="Bold"></Label>
</Toolbar>
</headerToolbar>
<items>
<ColumnListItem>
<cells>
<Text text="{dataIns}" />
<Text text="{sePassatoABridge}" />
<Text text="{comando}" />
<Text text="{comando_desc}" />
<Text text="{tag}" />
<Text text="{viaggio}" />
</cells>
</ColumnListItem>
</items>
</Table>
<Label text=""></Label>
<Table xmlns="sap.m" id="idTable_RampaToIncas_righe" items="{
path: '/passaggioRampaToIncas/righe'}">
<headerToolbar>
<Toolbar>
<Label text="Righe" design="Bold"></Label>
</Toolbar>
</headerToolbar>
<items>
<ColumnListItem>
<cells>
<Text text="{dataIns}" />
<Text text="{sePassatoABridge}" />
<Text text="{comando}" />
<Text text="{comando_desc}" />
<Text text="{riga}" />
<Text text="{articolo}" />
</cells>
</ColumnListItem>
</items>
</Table>
<Label text=""></Label>
<Table xmlns="sap.m" id="idTable_RampaToIncas_eventiAttivazione" items="{
path: '/passaggioRampaToIncas/attivazione'}">
<headerToolbar>
<Toolbar>
<Label text="Eventi Attivazione" design="Bold"></Label>
</Toolbar>
</headerToolbar>
<items>
<ColumnListItem>
<cells>
<Text text="{dataIns}" />
</cells>
</ColumnListItem>
</items>
</Table>
</content>
</Panel>
<Panel expandable="true" expanded="true" headerText="Passaggio da Incas a Rampa">
<content>
<Table xmlns="sap.m" id="idTable_IncasToRampa_righe" items="{
path: '/passaggioIncasToRampa/righe'}">
<headerToolbar>
<Toolbar>
<Label text="Righe" design="Bold"></Label>
</Toolbar>
</headerToolbar>
<items>
<ColumnListItem>
<cells>
<Text text="{dataIns}" />
<Text text="{riga}" />
<Text text="{articolo}" />
<Text text="{qta_caricata}" />
<Text text="{qta_prevista}" />
</cells>
</ColumnListItem>
</items>
</Table>
</content>
</Panel>
</l:VerticalLayout>
</l:content>
</l:Grid>
<Button text="Hide" press="handleHide" />
</mvc:View>
</script>
<boy class="sapUiBody" id="content" />