i do have the case in which i would like to have the FormElements be inline like but also to have the group title in this case "First Group" and "Second Group" be aligned with the FormElemens block.
Code:
<form:SimpleForm
title="Databinding basics: SimpleForm - Beispiel"
layout="ResponsiveGridLayout" editable="true"
columnsM="1" columnsL="1" columnsXL="3"
labelSpanS="12" labelSpanM="4" labelSpanL="12" labelSpanXL="2"
emptySpanS="0" emptySpanM="0" emptySpanL="0" emptySpanXL="0" singleContainerFullSize="false">
<form:content>
<core:Title text="First Group" emphasized="false" level="H4"/>
<Label text="Enabled8"/>
<Text text="Yes"/>
<Label text="Enabled7"/>
<Text text="Yes"/>
<Label text="Enabled8"/>
<Text text="Yes"/>
<core:Title text="Second Group" emphasized="false" level="H4"/>
<Label text="Enabled7"/>
<Text text="Yes"/>
<Label text="Enabled8"/>
<Text text="Yes"/>
<Label text="Enabled7"/>
<Text text="Yes"/>
<Label text="Enabled8"/>
<Text text="Yes"/>
</form:content>
</form:SimpleForm>
My attempt: Via adding labelSpanXL="12" and emptySpan="0" the alignment can be achieved but it puts the Label-Text vertically which i want to avoid.
Question: How can i achieve both for the FormElements to be inline as well as it be aligned with the group Title
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 a MultiInput field in FilterBar when user enter the value suggestion table will display . Sample 1
I have 5 column in suggestion table data is overlapping. The Suggestion table taking the width of that multiInput field. sample 2
How to increase the suggestion table width like that of sample 1?
<fb:FilterBar <fb:FilterBar reset="onReset" class="sapUiSizeCompact" search="onSearch" useToolbar="false" showRestoreButton="false"
showClearButton="false">
<fb:filterGroupItems>
<fb:FilterGroupItem groupName="Filters" partOfCurrentVariant="true" visibleInFilterBar="true" name="0F" label="Plant" labelTooltip="Plant"
mandatory="false">
<fb:control>
<MultiInput showSuggestion="true" valueHelpRequest=".onValueHelpRequested" startSuggestion="2" suggestionRows="{/ProductCollection}">
<suggestionColumns>
<Column>
<Label text="ProductId"/>
</Column>
<Column>
<Label text="Product Name"/>
</Column>
<Column>
<Label text="Category"/>
</Column>
<Column>
<Label text="Description"/>
</Column>
<Column>
<Label text="Main Category"/>
</Column>
</suggestionColumns>
<suggestionRows>
<ColumnListItem>
<cells>
<Label text="{ProductId}" />
<Label text="{Name}" />
<Label text="{Category}" />
<Label text="{Description}" />
<Label text="{MainCategory}" />
</cells>
</ColumnListItem>
</suggestionRows>
</MultiInput>
</fb:control>
</fb:FilterGroupItem>
</fb:filterGroupItems>
</fb:FilterBar>
I have the following simple form:
<Page title="{i18n>authorization}">
<content>
<VBox>
<f:SimpleForm id="registration" editable="true" layout="ResponsiveGridLayout" labelSpanXL="3" labelSpanL="3" labelSpanM="3" labelSpanS="12"
adjustLabelSpan="true" emptySpanXL="3" emptySpanL="3" emptySpanM="3" emptySpanS="0" columnsXL="1" columnsL="1" columnsM="1"
singleContainerFullSize="true">
<f:content>
<Label text=""/>
<Text text="{i18n>userAuthorize}"/>
<Label text=""/>
<Input placeholder="Enter your email address" id="email" type="Email" value="{confirm>/email}" liveChange="onHandleLiveChangeEmail"/>
<Label text=""/>
<Button type="Accept" enabled="{confirm>/enable}" text="{i18n>confirm}" press="handlePressAuthorization"
ariaDescribedBy="acceptButtonDescription genericButtonDescription">
<layoutData>
<FlexItemData growFactor="1"/>
</layoutData>
</Button>
</f:content>
</f:SimpleForm>
</VBox>
</content>
</Page>
and on the large screen, it stretches too width. What I would like that the simple form should take 4 columns width and place in the middle of screen.
How can I do it?
Try giving your VBox control a specific width. That way the SimpleForm will only fit that. In the VBox you can also add the alignItems="Center" attribute.
If you want to center controls and also not to the full width of the screen, you can do the following:
<VBox width="100%" alignItems="Center">
<VBox width="50%" alignItems="Start">
<!-- Content goes here... -->
</VBox>
</VBox>
This way your controls will be centered and also only stretched to the width of the inner VBox.
I cant seem to find a way to put the <DatePicker id="DP1" placeholder="Enter Date" value="{/recipient2/name}" change="handleChange" class="sapUiSmallMarginBottom"/> and <Select selectedKey="{/recipient3/name}" id="input-c" forceSelection="false">
in new line. They show at the same line but I would like them in two different lines.
<mvc:View controllerName="Workspace.controller.App" xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
xmlns:l="sap.ui.layout" xmlns:f="sap.ui.layout.form">
<Page title="{i18n>homePageTitle}">
<content>
<Panel width="auto" class="sapUiResponsiveMargin">
<Image src="https://www.enggwave.com/wp-content/uploads/2016/11/Sopra-Steria-Logo.png" width="100px" height="100px"
class="sapUiResponsiveMargin"></Image>
<Text text="Plot No. 20 21 Seaview Special Economic Zone"/>
<Image src="https://upload.wikimedia.org/wikipedia/en/thumb/0/02/Sopra_Steria_logo.svg/1280px-Sopra_Steria_logo.svg.png" width="500px"
height="100px" class="sapUiResponsiveMargin"></Image>
</Panel>
<Panel>
<f:SimpleForm id="SimpleFormChange354" width="100%" minWidth="1024" maxContainerCols="2" editable="true" layout="ResponsiveGridLayout"
title="FORM" labelSpanL="3" labelSpanM="3" emptySpanL="4" emptySpanM="4" columnsL="1" columnsM="1" class="editableForm">
<f:content>
<Label text="NAME : " labelFor="input-a" design="Bold"/>
<Input id="input-a" placeholder="Enter Name" value="{/recipient1/name}" valueLiveUpdate="true" width="100%" required="true"/>
<Label text="DATE : " labelFor="input-b" design="Bold"/>
<DatePicker id="DP1" placeholder="Enter Date" value="{/recipient2/name}" change="handleChange" class="sapUiSmallMarginBottom"/>
<InputListItem label="Country" >
<Select selectedKey="{/recipient3/name}" id="input-c" forceSelection="false">
<core:Item key="Greece" text="Greece"/>
<core:Item key="Mexico" text="Mexico"/>
<core:Item key="Norway" text="Norway"/>
<core:Item key="New Zealand" text="New Zealand"/>
<core:Item key="Netherlands" text="Netherlands"/>
</Select>
</InputListItem>
<Button text="{i18n>showHelloButtonText}" press="onShowHello"/>
</f:content>
</f:SimpleForm>
</Panel>
</content>
</Page>
</mvc:View>
Try putting the two in a Vbox
<Vbox>
<DatePicker id="DP1" placeholder="Enter Date" value="{/recipient2/name}"
change="handleChange" class="sapUiSmallMarginBottom"/>
<InputListItem label="Country" >
<Select selectedKey="{/recipient3/name}" id="input-c"
forceSelection="false">
<core:Item key="Greece" text="Greece"/>
<core:Item key="Mexico" text="Mexico"/>
<core:Item key="Norway" text="Norway"/>
<core:Item key="New Zealand" text="New Zealand"/>
<core:Item key="Netherlands" text="Netherlands"/>
</Select>
</InputListItem>
<Button text="{i18n>showHelloButtonText}" press="onShowHello"/>
</Vbox>
I want to have a layout which has a fixed size panel with a form at the top and a panel with a grid which takes the remaining space at the bottom. I have managed that the panels have the correct size - so the section html tag of the grid's panel has 100% and correctly spans but the height of the nested div for the content is calculated to 0px.
What definition is necessary or missing so that the grid takes the complete remaining space?
<mvc:View
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
xmlns:l="sap.ui.layout"
xmlns:f="sap.ui.layout.form"
xmlns:t="sap.ui.table"
height="100%">
<l:FixFlex class="fixFlexFixedSize" fixContentSize="100px">
<l:fixContent>
<Panel class="sapUiNoContentPadding">
<headerToolbar>
<Toolbar>
<Title text="Form" level="H2" />
</Toolbar>
</headerToolbar>
<content>
<f:Form editable="true">
<f:layout>
<f:ResponsiveGridLayout
labelSpanL="2"
labelSpanM="2"
emptySpanL="1"
emptySpanM="1"
columnsL="2"
columnsM="2" />
</f:layout>
<f:formContainers>
<f:FormContainer>
<f:formElements>
<f:FormElement label="Lastname">
<f:fields>
<Input id="lastname" />
</f:fields>
</f:FormElement>
</f:formElements>
</f:FormContainer>
<f:FormContainer>
<f:FormElement label="Firstname">
<f:fields>
<Input id="firstname" />
</f:fields>
</f:FormElement>
</f:FormContainer>
</f:formContainers>
</f:Form>
</content>
</Panel>
</l:fixContent>
<l:flexContent>
<Panel height="100%" class="sapUiNoContentPadding">
<headerToolbar>
<Toolbar>
<Title text="Grid" level="H2" />
<ToolbarSpacer />
<Button icon="sap-icon://add" text="new" press="newEntry" />
</Toolbar>
</headerToolbar>
<content>
<t:Table
rows="{entries>/result}"
enableSelectAll="false"
selectionMode="None"
visibleRowCountMode="Auto"
height="100%">
<t:columns>
<t:Column width="5rem" >
<Label text="{i18n>entrieslist.column.name}" />
<t:template>
<Link text="{entries>lastname}" press="showDetailsPage"/>
</t:template>
</t:Column>
<t:Column width="5rem" >
<t:template>
<Text text="{entries>firstname}" />
</t:template>
</t:Column>
<t:Column width="11rem" sorted="true" sortProperty="{entries>telephone} ">
<Label text="{i18n>entrieslist.column.number}" />
<t:template>
<Text text="{entries>telephone}" />
</t:template>
</t:Column>
<t:Column width="11rem" >
<Label text="{i18n>entrieslist.column.street}" />
<t:template>
<Text text="{entries>street}" />
</t:template>
</t:Column>
</t:columns>
</t:Table>
</content>
</Panel>
</l:flexContent>
</l:FixFlex>
</mvc:View>