I have designed a simple form as defined. If I want to add a message down to the checkboxes, how can we add the message? I am expecting output as like this:
<Label text="..." required="true">
<layoutData>
<l:GridData span="L2 M3 S7"/>
</layoutData>
</Label>
<Select>
<layoutData>
<l:GridData span="L2 M3 S5"/>
</layoutData>
</Select>
<CheckBox text="....">
<layoutData>
<l:GridData span="L2 M3 S7"/>
</layoutData>
</CheckBox>
<TextArea value=" " rows="3">
<layoutData>
<l:GridData span="L2 M3 S5"/>
</layoutData>
</TextArea>
<CheckBox text="...." >
<layoutData>
<l:GridData span="L2 M3 S7"/>
</layoutData>
</CheckBox>
<TextArea value=" " rows="3">
<layoutData>
<l:GridData span="L2 M3 S5"/>
</layoutData>
</TextArea>
You can achieve it by using VBox control
<CheckBox text="Custom Note">
<layoutData>
<l:GridData span="L2 M3 S6"/>
</layoutData>
</CheckBox>
<VBox>
<TextArea value=" " rows="3" />
<Label text="Max allowed chars 150" wrapping="true"/>
<layoutData>
<l:GridData span="L2 M3 S6"/>
</layoutData>
</VBox>
<CheckBox text="Exception" >
<layoutData>
<l:GridData span="L2 M3 S6"/>
</layoutData>
</CheckBox>
<VBox>
<TextArea value=" " rows="3"/>
<Label text="Max allowed chars 150" wrapping="true"/>
<layoutData>
<l:GridData span="L2 M3 S6"/>
</layoutData>
</VBox>
Output
I am expecting output as like this:
For the CheckBox, use the property text.
For the character limit message below the TextArea, there are two options:
Without value-binding: simply define maxLength and set showExceededText="true".
With value-binding: bind value with the type sap.ui.model(.odata).type.String and maxLength: 150. UI5 will handle displaying message accordingly if the character limit is exceeded. See the documentation topic Error, Warning, and Info Messages for more information.
sap.ui.getCore().attachInit(() => sap.ui.require([
"sap/ui/core/Fragment",
"sap/ui/model/json/JSONModel",
"sap/ui/core/Core",
], (Fragment, JSONModel, Core) => Fragment.load({
definition: `<App xmlns="sap.m" autoFocus="false">
<Page class="sapUiResponsiveContentPadding" showHeader="false">
<HBox renderType="Bare" justifyContent="SpaceAround">
<CheckBox text="My custom checkbox text" />
<TextArea xmlns:core="sap.ui.core" core:require="{ StringType: 'sap/ui/model/type/String' }"
value="{
path: '/value',
type: 'StringType',
constraints: {
maxLength: 150
}
}"
maxLength="150"
width="100%"
height="5.5rem"
showExceededText="true"
>
<layoutData>
<FlexItemData maxWidth="13rem"/>
</layoutData>
</TextArea>
</HBox>
</Page>
</App>`,
}).then(control => Core.getMessageManager().registerObject(control.setModel(new JSONModel({
value: "",
})).placeAt("content"), true))));
<script id="sap-ui-bootstrap"
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.core, sap.m"
data-sap-ui-async="true"
data-sap-ui-theme="sap_fiori_3"
data-sap-ui-compatversion="edge"
data-sap-ui-xx-waitfortheme="init"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>
If the limit is exceeded (with value-binding and type):
Related
i have created a simple form with input and text fields which is responsive :
<f:SimpleForm id="customercell"
editable="true"
layout="ResponsiveGridLayout"
columnsL="1"
columnsM="1">
<f:content>
<Label text="Customer Name">
<layoutData>
<l:GridData span="L2 M2 S2"/>
</layoutData>
</Label>
<Text class="custom" text="{customerData>/CustomerValue}">
<layoutData>
<l:GridData span="L2 M2 S2"/>
</layoutData>
</Text>
<Label text="Customer Number">
<layoutData>
<l:GridData span="L2 M2 S2"/>
</layoutData>
</Label>
<Text text="{customerData>/CustomerNumber}">
<layoutData>
<l:GridData span="L2 M2 S2"/>
</layoutData>
</Text>
<Label text="Email">
<layoutData>
<l:GridData span="L2 M2 S2"/>
</layoutData>
</Label>
<Text text="{EmailData>/Email}">
<layoutData>
<l:GridData span="L2 M2 S2"/>
</layoutData>
</Text>
</f:content>
</f:SimpleForm>
I am getting much space between input and text area which doesn't looks nice with much space is it possible to remove spaces between input and text area can anyone help me.
Thanks in advance
I have made a simple form which is defined below:
<core:FragmentDefinition
xmlns="sap.m"
xmlns:l="sap.ui.layout"
xmlns:f="sap.ui.layout.form"
xmlns:core="sap.ui.core">
<VBox class="sapUiSmallMargin">
<f:SimpleForm id="SimpleFormChange480_12120"
editable="true"
layout="ResponsiveGridLayout"
title="Add New Employee"
labelSpanL="4"
labelSpanM="4"
labelSpanS="12"
adjustLabelSpan="false"
emptySpanL="0"
emptySpanM="0"
emptySpanS="0"
columnsL="1"
columnsM="1"
columnsS="1"
singleContainerFullSize="false" >
<f:content>
<Label text="Employee Id">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Label>
<Input id="empid">
<layoutData>
<l:GridData span="L2 M4 S12"/>
</layoutData>
</Input>
<Label text="Employee Name">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Label>
<Input id="empname">
<layoutData>
<l:GridData span="L2 M4 S12"/>
</layoutData>
</Input>
<Label text="Email">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Label>
<Input id="email">
<layoutData>
<l:GridData span="L2 M4 S12"/>
</layoutData>
</Input>
<Label text="Department">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Label>
<Input id="department">
<layoutData>
<l:GridData span="L2 M4 S12"/>
</layoutData>
</Input>
<Label text="City">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Label>
<Input id="city">
<layoutData>
<l:GridData span="L2 M4 S12"/>
</layoutData>
</Input>
<Label text="State">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Label>
<Input id="state" >
<layoutData>
<l:GridData span="L2 M4 S12"/>
</layoutData>
</Input>
<Label text="District">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Label>
<Input id="district" >
<layoutData>
<l:GridData span="L2 M4 S12"/>
</layoutData>
</Input>
<Label text="Address">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Label>
<Input id="address" >
<layoutData>
<l:GridData span="L2 M4 S12"/>
</layoutData>
</Input>
</f:content>
</f:SimpleForm>
</VBox>
</core:FragmentDefinition>
I guess I am doing any mistake in defining the span. I don't have much idea on large, medium and small systems I think the main problem I am facing is in that issue.
When I am checking the responsive in iPad device it's not showing exact responsive, but I have tried in this way can anyone help me to make it as responsive.
As per your requirement(iPad), the form was not showing 3 columns. You need to adjust the span values.
<VBox class="sapUiSmallMargin">
<f:SimpleForm id="SimpleFormChange480_12120"
editable="true"
layout="ResponsiveGridLayout"
title="Add New Employee"
labelSpanL="4"
labelSpanM="4"
labelSpanS="12"
adjustLabelSpan="false"
emptySpanL="0"
emptySpanM="0"
emptySpanS="0"
columnsL="1"
columnsM="1"
columnsS="1"
singleContainerFullSize="false" >
<f:content>
<Label text="Employee Id">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Label>
<Input id="empid">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Input>
<Label text="Employee Name">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Label>
<Input id="empname">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Input>
<Label text="Email">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Label>
<Input id="email">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Input>
<Label text="Department">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Label>
<Input id="department">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Input>
<Label text="City">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Label>
<Input id="city">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Input>
<Label text="State">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Label>
<Input id="state" >
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Input>
<Label text="District">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Label>
<Input id="district" >
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Input>
<Label text="Address">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Label>
<Input id="address" >
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Input>
<!-- Select -->
<Label text="Branch">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Label>
<Select>
<layoutData>
<l:GridData span="L2 M2 S12" />
</layoutData>
</Select>
</f:content>
</f:SimpleForm>
</VBox>
Output - iPad with label span 2 and input span 3
Output - iPad with label and input span 2
I have the following simpleform:
<f:SimpleForm title="Address" editable="true" layout="ResponsiveGridLayout" columnsM="2">
<f:content>
<Label text="Customer">
</Label>
<Input>
<layoutData>
<l:GridData span="XL4 L4 M12 S12"/>
</layoutData>
</Input>
<Label text="PO reference">
<layoutData>
<l:GridData span="XL1 L1 M12 S12"/>
</layoutData>
</Label>
<Input>
<layoutData>
<l:GridData span="XL4 L4 M12 S12"/>
</layoutData>
</Input>
<Label text="PO date">
<layoutData>
<l:GridData span="XL1 L1 M12 S12"/>
</layoutData>
</Label>
<Input>
</Input>
</f:content>
</f:SimpleForm>
it appears as:
How to move the label PO date to the next line?
<f:SimpleForm title="Address" editable="true" layout="ResponsiveGridLayout" columnsM="2">
<f:content>
<Label text="Customer">
</Label>
<Input>
<layoutData>
<l:GridData span="XL4 L4 M12 S12" />
</layoutData>
</Input>
<Label text="PO reference">
<layoutData>
<l:GridData span="XL1 L1 M12 S12" />
</layoutData>
</Label>
<Input>
<layoutData>
<l:GridData span="XL4 L4 M12 S12" />
</layoutData>
</Input>
<Label text="PO date">
</Label>
<Input>
<layoutData>
<l:GridData span="XL1 L9 M12 S12" />
</layoutData>
</Input>
</f:content>
</f:SimpleForm>
The above code will let you align it properly.
I have a simple form, that looks as following:
the code:
<VBox class="sapUiSmallMargin">
<sf:SimpleForm id="PayerSel" editable="true" layout="ResponsiveGridLayout" labelSpanXL="1" labelSpanL="1" labelSpanM="1" labelSpanS="12"
adjustLabelSpan="false" emptySpanXL="5" emptySpanL="5" emptySpanM="5" emptySpanS="0" columnsXL="1" columnsL="1" columnsM="1"
singleContainerFullSize="false">
<sf:content>
<Label text="Payers"></Label>
<Input id="payerFrom" placeholder="From" required="true"/>
<Input id="payerTo" placeholder="Until" required="true"/>
</sf:content>
</sf:SimpleForm>
</VBox>
The questions are:
How to configure that both inputs have same length?
When I change columnsL="1" to columnsL="4", why the input is
getting smaller? I give more space and expect it to be wider, because I give to space.
According to the API:
A new Title or Toolbar starts a new group (FormContainer) in the form.
A new Label starts a new row (FormElement) in the form.
All other controls will be assigned to the row (FormElement) that started with the last label.
The code exmple uses 1 group with 1 row.
columns<size> The layout will be divided into column columns in size
Without playing with spans here is an example for different columns, each column with 1 row and Label width + Input width + Input width = 2 + 5 + 5 in all size: (Plunker - try to resize the browser window and examine the result)
<core:FragmentDefinition xmlns="sap.m" xmlns:l="sap.ui.layout"
xmlns:f="sap.ui.layout.form" xmlns:core="sap.ui.core">
<VBox class="sapUiSmallMargin">
<f:SimpleForm id="PayerSel" editable="true"
layout="ResponsiveGridLayout"
labelSpanXL="0"
labelSpanL="0"
labelSpanM="0"
labelSpanS="0"
columnsL="1">
<f:content>
<Label text="Payers">
<layoutData>
<l:GridData span="L2 M2 S2"/>
</layoutData>
</Label>
<Input id="payerFrom" placeholder="From" required="true">
<layoutData>
<l:GridData span="L5 M5 S5"/>
</layoutData>
</Input>
<Input id="payerTo" placeholder="Until" required="true">
<layoutData>
<l:GridData span="L5 M5 S5"/>
</layoutData>
</Input>
</f:content>
</f:SimpleForm>
<f:SimpleForm id="PayerSel2" editable="true"
layout="ResponsiveGridLayout"
labelSpanXL="0"
labelSpanL="0"
labelSpanM="0"
labelSpanS="0"
columnsL="2"
columnsM="2">
<f:content>
<core:Title text="group1"/>
<Label text="Payers">
<layoutData>
<l:GridData span="L2 M2 S2"/>
</layoutData>
</Label>
<Input id="payerFrom2" placeholder="From" required="true">
<layoutData>
<l:GridData span="L5 M5 S5"/>
</layoutData>
</Input>
<Input id="payerTo2" placeholder="Until" required="true">
<layoutData>
<l:GridData span="L5 M5 S5"/>
</layoutData>
</Input>
<core:Title text="group2"/>
<Label text="Payers">
<layoutData>
<l:GridData span="L2 M2 S2"/>
</layoutData>
</Label>
<Input id="payerFrom3" placeholder="From" required="true">
<layoutData>
<l:GridData span="L5 M5 S5"/>
</layoutData>
</Input>
<Input id="payerTo3" placeholder="Until" required="true">
<layoutData>
<l:GridData span="L5 M5 S5"/>
</layoutData>
</Input>
</f:content>
</f:SimpleForm>
<f:SimpleForm id="PayerSel3" editable="true"
layout="ResponsiveGridLayout"
labelSpanXL="0"
labelSpanL="0"
labelSpanM="0"
labelSpanS="0"
columnsL="3"
columnsM="3">
<f:content>
<core:Title text="group1"/>
<Label text="Payers">
<layoutData>
<l:GridData span="L2 M2 S2"/>
</layoutData>
</Label>
<Input id="payerFrom32" placeholder="From" required="true">
<layoutData>
<l:GridData span="L5 M5 S5"/>
</layoutData>
</Input>
<Input id="payerTo32" placeholder="Until" required="true">
<layoutData>
<l:GridData span="L5 M5 S5"/>
</layoutData>
</Input>
<core:Title text="group2"/>
<Label text="Payers">
<layoutData>
<l:GridData span="L2 M2 S2"/>
</layoutData>
</Label>
<Input id="payerFrom33" placeholder="From" required="true">
<layoutData>
<l:GridData span="L5 M5 S5"/>
</layoutData>
</Input>
<Input id="payerTo33" placeholder="Until" required="true">
<layoutData>
<l:GridData span="L5 M5 S5"/>
</layoutData>
</Input>
<core:Title text="group3"/>
<Label text="Payers">
<layoutData>
<l:GridData span="L2 M2 S2"/>
</layoutData>
</Label>
<Input id="payerFrom34" placeholder="From" required="true">
<layoutData>
<l:GridData span="L5 M5 S5"/>
</layoutData>
</Input>
<Input id="payerTo34" placeholder="Until" required="true">
<layoutData>
<l:GridData span="L5 M5 S5"/>
</layoutData>
</Input>
</f:content>
</f:SimpleForm>
</VBox>
</core:FragmentDefinition>
When you change columnsL="1" to columnsL="4", the input is getting smaller because "columnsL" attribute is stands for "The number of columns for large size". That means if you want 4 columns in your page and don't provide any width, every columns has width 25% of the parent component's width. Obviously they will be smaller than 1 column.
link : more info
Edit: You're using ResponsiveGridLayout in your simpleForm. If you want to your inputs have same width then just use "layoutdata".
<Input id="payerFrom" placeholder="From" required="true">
<layoutData>
<l:GridData span="L4 M6 S12"/> //for example
</layoutData>
</>
I have a dialog that contains following form:
How can I set the input usual day wider then Ver. input? The ratio should be 3:1.
the code snippet for the simple form:
<f:SimpleForm id="form-add-item"
maxContainerCols="2"
editable="true"
class="editableForm">
<f:content>
<l:VerticalLayout>
<Input value="{vmNewItem>/sPlant}" placeholder="{i18n>insColPlant}"/>
<Input value="{vmNewItem>/sWorkCenter}" placeholder="{i18n>insColWorkCenter}"/>
<l:HorizontalLayout>
<Input value="{vmNewItem>/sUsualDay}" placeholder="{i18n>insColUsualDay}">
<layoutData>
<l:GridData span="L2 M2 S4" linebreak="true"/>
</layoutData>
</Input>
<Input value="{vmNewItem>/sUsualDayVer}" placeholder="{i18n>insColUsualDayVer}">
</Input>
</l:HorizontalLayout>
<l:HorizontalLayout>
<Input value="{vmNewItem>/sSpecialDay}" placeholder="{i18n>insColSpecialDay}"/>
<Input value="{vmNewItem>/sSpecialDayVer}" placeholder="{i18n>insColSpecialDayVer}"/>
</l:HorizontalLayout>
</l:VerticalLayout>
</f:content>
</f:SimpleForm>
there are several ways this could be achieved. if you are using the SimpleForm control, one possible way is to use a ResponsiveGridLayout and specify layoutData as follows...
<f:SimpleForm id="form-add-item"
maxContainerCols="2"
editable="true"
class="editableForm"
layout="ResponsiveGridLayout">
<f:content>
<Input value="{vmNewItem>/sPlant}" placeholder="{i18n>insColPlant}">
<layoutData>
<l:GridData span="L12 M12 S12" />
</layoutData>
</Input>
<Input value="{vmNewItem>/sWorkCenter}" placeholder="{i18n>insColWorkCenter}">
<layoutData>
<l:GridData span="L12 M12 S12" />
</layoutData>
</Input>
<Input value="{vmNewItem>/sUsualDay}" placeholder="{i18n>insColUsualDay}">
<layoutData>
<l:GridData span="L9 M9 S9" />
</layoutData>
</Input>
<Input value="{vmNewItem>/sUsualDayVer}" placeholder="{i18n>insColUsualDayVer}">
<layoutData>
<l:GridData span="L3 M3 S3" />
</layoutData>
</Input>
<Input value="{vmNewItem>/sSpecialDay}" placeholder="{i18n>insColSpecialDay}">
<layoutData>
<l:GridData span="L9 M9 S9" />
</layoutData>
</Input>
<Input value="{vmNewItem>/sSpecialDayVer}" placeholder="{i18n>insColSpecialDayVer}">
<layoutData>
<l:GridData span="L3 M3 S3" />
</layoutData>
</Input>
</f:content>
</f:SimpleForm>