I defined the following simple form:
<form:SimpleForm id="SimpleFormChange354"
editable="true"
layout="ResponsiveGridLayout"
title="Address"
labelSpanXL="2"
labelSpanL="2"
labelSpanM="3"
labelSpanS="12"
adjustLabelSpan="false"
emptySpanXL="0"
emptySpanL="0"
emptySpanM="0"
emptySpanS="0"
columnsXL="2"
columnsL="2"
columnsM="1"
singleContainerFullSize="false"
>
<Label text="Name1"/>
<Input/>
<Label text="Name2"/>
<Input/>
<Label text="Name3"/>
<Input/>
</form:SimpleForm>
As you can see:
How to place the red marked element next to Name1 element?
In order to enable multiple columns, the property column* or the <layoutData> aggregation should be adjusted respectively in (Simple)Form.
Using ColumnLayout
As of v1.56, the new layout sap/ui/layout/form/ColumnLayout can be assigned to (Simple)Form which enables "a newspaper like style" without the need to insert any Titles, Toolbars, or any additional layout data to have multiple columns.
globalThis.onUI5Init = () => sap.ui.require([
"sap/ui/core/Fragment",
], async Fragment => {
"use strict";
const control = await Fragment.load({
definition: `<form:SimpleForm xmlns:form="sap.ui.layout.form" xmlns="sap.m"
title="Multiple Columns via ColumnLayout"
editable="true"
layout="ColumnLayout"
columnsM="2">
<Label text="Label 1"/>
<Input/>
<Label text="Label 2"/>
<Input/>
<Label text="Label 3"/>
<Input/>
</form:SimpleForm>`,
});
control.placeAt("content");
});
<script defer id="sap-ui-bootstrap"
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.core,sap.m,sap.ui.layout"
data-sap-ui-oninit="onUI5Init"
data-sap-ui-async="true"
data-sap-ui-theme="sap_fiori_3"
data-sap-ui-compatversion="edge"
data-sap-ui-excludejquerycompat="true"
data-sap-ui-xx-waitfortheme="init"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>
In case more adjustments are required, the layout data sap/ui/layout/form/ColumnElementData can be assigned. E.g.:
<Label text="Label 3">
<layoutData>
<form:ColumnElementData cellsSmall="3"/><!-- default: 12 -->
</layoutData>
</Label>
Resources
API reference: sap/ui/layout/form/ColumnLayout
Test Page for ColumnLayout (source code can be found here)
Using ResponsiveGridLayout
Not ResponsiveLayout as that is deprecated as of UI5 v1.93. ResponsiveGridLayout is still supported.
globalThis.onUI5Init = () => sap.ui.require([
"sap/ui/core/Fragment",
], async Fragment => {
"use strict";
const controls = await Fragment.load({
definition: `<core:FragmentDefinition
xmlns:core="sap.ui.core"
xmlns:form="sap.ui.layout.form"
xmlns:layout="sap.ui.layout"
xmlns="sap.m">
<form:SimpleForm
title="Multiple Columns via GridData"
editable="true"
layout="ResponsiveGridLayout">
<Label text="Label 1">
<layoutData>
<layout:GridData span="L2 M2"/>
</layoutData>
</Label>
<Input>
<layoutData>
<layout:GridData span="L4 M4"/>
</layoutData>
</Input>
<Label text="Label 2">
<layoutData>
<layout:GridData span="L2 M2"/>
</layoutData>
</Label>
<Input>
<layoutData>
<layout:GridData span="L4 M4"/>
</layoutData>
</Input>
<Label text="Label 3">
<layoutData>
<layout:GridData span="L2 M2"/>
</layoutData>
</Label>
<Input>
<layoutData>
<layout:GridData span="L4 M4"/>
</layoutData>
</Input>
</form:SimpleForm>
<form:SimpleForm
title="Multiple Columns via Containers (columns* + sap.ui.core.Title)"
editable="true"
layout="ResponsiveGridLayout"
columnsM="2">
<core:Title text="Container 1"/>
<Label text="Label 1"/>
<Input/>
<core:Title text="Container 2"/>
<Label text="Label 2"/>
<Input/>
<Label text="Label 3"/>
<Input/>
</form:SimpleForm>
</core:FragmentDefinition>`,
});
controls.map(control => control.placeAt("content"));
});
<script defer id="sap-ui-bootstrap"
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.core,sap.m,sap.ui.layout"
data-sap-ui-oninit="onUI5Init"
data-sap-ui-async="true"
data-sap-ui-theme="sap_fiori_3"
data-sap-ui-compatversion="edge"
data-sap-ui-excludejquerycompat="true"
data-sap-ui-xx-waitfortheme="init"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>
Resources
API reference: sap/ui/layout/form/ResponsiveGridLayout
API reference: sap/ui/layout/GridData
Related
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):
How I can put my icon next to or within the input field?
The problem is, the icon changes the form. Usually, it's like this:
But when I'm adding the icon (code below), it displaces the Dauer input Field.
Is there a way to make it look clean and that's next to it? Or better in the input field inside?
I can make the button smaller with CSS but there is still a gap between them.. And it does not move automatically.
The best solution is like the Datum above with a small icon inside where I can click or like the icon is next to the Dauer without no gap between input field from Dauer and the ? icon.
PS: I just want it like this (I will decide then later which option is better. But it is possible?)
<form:SimpleForm id="neuezeiterfassung"
editable="true"
title="Neue Zeiterfassung anlegen"
>
<Label
text="Auftrag"
class="font1"
tooltip="Auftrag eingeben"
/>
<l:VerticalLayout>
<ComboBox id="Auftrag"
items="{/ZAUFKSet}"
showSecondaryValues="true"
width="50%"
>
<core:ListItem text="{Aufnr}" />
</ComboBox>
</l:VerticalLayout>
<Label
text="Datum"
class="font1"
/>
<DatePicker id="DP3"
valueFormat="dd.MM.yyyy"
displayFormat="medium"
width="50%"
placeholder="dd.mm.yyyy"
/>
<Label class="font1" text="Dauer" />
<Input id="dauer"
class="dauer"
placeholder="Dauer eingeben ... "
width="50%"
/>
<HBox class="sapUiSmallMargin">
<core:Icon
src="sap-icon://sys-help"
class="size1" color="#031E48" press="aseads"
>
<core:layoutData>
<FlexItemData growFactor="1" />
</core:layoutData>
</core:Icon>
</HBox>
<!-- <Button icon="sap-icon://sys-help" class="myButton"/> -->
<Label class="font1" text="Arbeitsbeschreibung" />
<TextArea id="beschreibung" width="50%" />
</form:SimpleForm>
Update: with the change in commit:8f1757d, which is available since UI5 1.84, the value help icon can be changed via valueHelpIconSrc:
<Input showValueHelp="true"
valueHelpIconSrc="sap-icon://sys-help"
valueHelpRequest="alert('Help requested')"
/><!-- valueHelpIconSrc available since 1.84.0 -->
No need to extend sap.m.InputBase in this case. Other input controls like sap.m.MaskInput still need to be extended as shown in the linked Plunk below.
Original answer:
The best solution is like the Datum above with a small icon inside where I can click. (...) Is it possible?
Yes, it's possible. Here is a minimal example: https://embed.plnkr.co/EzlF2tkvalJWvSEn
For this, UI5 provides the API addEndIconapi which is protected, meaning it should be used only when extending sap.m.InputBase!
As an argument for the addEndIcon, you can pass a map of settings that are required to create sap.ui.core.Iconapi, which is highly customizable.
const icon = this.addEndIcon({
id: this.getId() + "-questionMarkBtn",
src: IconPool.getIconURI("sys-help"),
noTabStop: true,
tooltip: "Information",
press: [this.onEndButtonPress, this],
}); // See sap.ui.core.Icon/properties for more settings
// icon.addStyleClass(...); if even more customization required..
You can achieve it using the below code, just updated the CSS as per your requirement. It is a responsive design, it will work for all the devices.
CODE
<VBox class="sapUiSmallMargin">
<f:SimpleForm
editable="true"
layout="ResponsiveGridLayout"
title="Neue Zeiterfassung anlegen"
labelSpanXL="3"
labelSpanL="3"
labelSpanM="3"
labelSpanS="12"
adjustLabelSpan="false"
emptySpanXL="1"
emptySpanL="1"
emptySpanM="1"
emptySpanS="0"
columnsXL="1"
columnsL="1"
columnsM="1"
singleContainerFullSize="false" >
<f:content>
<Label text="Auftrag" tooltip="Auftrag eingeben" />
<ComboBox items="{/ZAUFKSet}" id="Auftrag" showSecondaryValues="true">
<core:ListItem text="{Aufnr}"/>
</ComboBox>
<Label text="Datum" labelFor="DP3"/>
<DatePicker id="DP3" valueFormat="dd.MM.yyyy" displayFormat="medium" placeholder="dd.mm.yyyy"/>
<Label class="font1" text="Dauer"/>
<Input value="Street">
<layoutData>
<l:GridData span="XL7 L7 M7 S10" />
</layoutData>
</Input>
<Button icon="sap-icon://sys-help" press="onPress" >
<layoutData>
<l:GridData span="XL1 L1 M1 S2" />
</layoutData>
</Button>
<Label text="Arbeitsbeschreibung"/>
<TextArea id="beschreibung"/>
</f:content>
</f:SimpleForm>
</VBox>
Output:
If you are looking for below output
<f:SimpleForm
editable="true"
layout="ResponsiveGridLayout"
title="Neue Zeiterfassung anlegen"
labelSpanXL="3"
labelSpanL="3"
labelSpanM="3"
labelSpanS="12"
adjustLabelSpan="false"
emptySpanXL="1"
emptySpanL="1"
emptySpanM="1"
emptySpanS="0"
columnsXL="1"
columnsL="1"
columnsM="1"
singleContainerFullSize="false" >
<f:content>
<Label text="Auftrag" tooltip="Auftrag eingeben" />
<ComboBox items="{/ZAUFKSet}" id="Auftrag" showSecondaryValues="true">
<core:ListItem text="{Aufnr}"/>
<layoutData>
<l:GridData span="XL8 L8 M7 S9" />
</layoutData>
</ComboBox>
<Label text="Datum" labelFor="DP3"/>
<DatePicker id="DP3" valueFormat="dd.MM.yyyy" displayFormat="medium"
placeholder="dd.mm.yyyy">
<layoutData>
<l:GridData span="XL8 L8 M7 S9" />
</layoutData>
</DatePicker>
<Label class="font1" text="Dauer"/>
<Input value="Street">
<layoutData>
<l:GridData span="XL8 L8 M7 S9" />
</layoutData>
</Input>
<Button icon="sap-icon://sys-help" press="onPress" width="40px" >
<layoutData>
<l:GridData span="XL1 L1 M1 S3" />
</layoutData>
</Button>
<Label text="Arbeitsbeschreibung"/>
<TextArea id="beschreibung">
<layoutData>
<l:GridData span="XL8 L8 M7 S9" />
</layoutData>
</TextArea>
</f:content>
</f:SimpleForm>
With icon
<VBox class="sapUiSmallMargin">
<f:SimpleForm
editable="true"
layout="ResponsiveGridLayout"
title="Neue Zeiterfassung anlegen"
labelSpanXL="3"
labelSpanL="3"
labelSpanM="3"
labelSpanS="12"
adjustLabelSpan="false"
emptySpanXL="1"
emptySpanL="1"
emptySpanM="1"
emptySpanS="0"
columnsXL="1"
columnsL="1"
columnsM="1"
singleContainerFullSize="false" >
<f:content>
<Label text="Auftrag" tooltip="Auftrag eingeben" />
<ComboBox items="{/ZAUFKSet}" id="Auftrag" showSecondaryValues="true">
<core:ListItem text="{Aufnr}"/>
<layoutData>
<l:GridData span="XL10 L10 M10 S10" />
</layoutData>
</ComboBox>
<Label text="Datum" labelFor="DP3"/>
<DatePicker id="DP3" valueFormat="dd.MM.yyyy" displayFormat="medium" placeholder="dd.mm.yyyy">
<layoutData>
<l:GridData span="XL10 L10 M10 S10" />
</layoutData>
</DatePicker>
<Label class="font1" text="Dauer"/>
<Input value="Street">
<layoutData>
<l:GridData span="XL10 L10 M10 S10" />
</layoutData>
</Input>
<HBox>
<core:Icon src="sap-icon://sys-help" color="#031E48" press="onPress" class="infoIcon"/>
<layoutData>
<l:GridData span="XL1 L1 M1 S1" />
</layoutData>
</HBox>
<Label text="Arbeitsbeschreibung"/>
<TextArea id="beschreibung">
<layoutData>
<l:GridData span="XL10 L10 M10 S10" />
</layoutData>
</TextArea>
</f:content>
</f:SimpleForm>
</VBox>
If you are using the ICON you need to add the style as well for alignment
.infoIcon {
line-height: 3rem;
}
Sometimes extending the InputBase class can be a bit overkill/increase the complexity of the code.
You can also use Flexbox containers to achieve the alignment of the input and the icon.
For example, if you want the input and the icon to be centered vertically and horizontally:
<HBox
alignItems="Center"
justifyContent="Center">
<Input>
<layoutData>
<FlexItemData growFactor="3" />
</layoutData>
</Input>
<core:Icon
src="sap-icon://sys-help">
<!-- Be careful here with the namespaces (use layoutData from core, not m) -->
<core:layoutData>
<FlexItemData growFactor="1" />
</core:layoutData>
</core:Icon>
</HBox>
This will give something like this:
See Flexbox for more examples (API Reference is available at the top of the page).
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>
I've started with my first SAPUI5 application and I wanna use the Tool Header item like in the Demo Kit.
(I'm using an XML-View.)
I've included it into my view but now I get the error:
UIComponent.js:6 Uncaught Error: failed to load 'sap/tnt/ToolHeader.js' from resources/sap/tnt/ToolHeader.js: 404 - Not Found
Do I have embed a special script in my application? (Which one?)
page.view.xml
<mvc:View
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
xmlns:tnt="sap.tnt"
xmlns:html="http://www.w3.org/1999/xhtml"
controllerName="zdemo.controller.MachDetail">
<tnt:ToolHeader>
<Button icon="sap-icon://menu2" type="Transparent">
<layoutData>
<OverflowToolbarLayoutData priority="NeverOverflow" />
</layoutData>
</Button>
<ToolbarSpacer width="20px" />
<Button text="File" type="Transparent">
<layoutData>
<OverflowToolbarLayoutData priority="Low" />
</layoutData>
</Button>
<Button text="Edit" type="Transparent">
<layoutData>
<OverflowToolbarLayoutData priority="Low" />
</layoutData>
</Button>
<Button text="View" type="Transparent">
<layoutData>
<OverflowToolbarLayoutData priority="Low" />
</layoutData>
</Button>
<Button text="Navigate" type="Transparent">
<layoutData>
<OverflowToolbarLayoutData priority="Low" />
</layoutData>
</Button>
<Button text="Code" type="Transparent">
<layoutData>
<OverflowToolbarLayoutData priority="Low" />
</layoutData>
</Button>
<Button text="Refactor" type="Transparent">
<layoutData>
<OverflowToolbarLayoutData priority="Low" />
</layoutData>
</Button>
<Button text="Run" type="Transparent">
<layoutData>
<OverflowToolbarLayoutData priority="Low" />
</layoutData>
</Button>
<Button text="Tools" type="Transparent">
<layoutData>
<OverflowToolbarLayoutData priority="Low" />
</layoutData>
</Button>
<tnt:ToolHeaderUtilitySeparator />
<ToolbarSpacer>
<layoutData>
<OverflowToolbarLayoutData priority="NeverOverflow" minWidth="20px" />
</layoutData>
</ToolbarSpacer>
<Button text="Alan Smith" type="Transparent" press="handleUserNamePress">
<layoutData>
<OverflowToolbarLayoutData priority="NeverOverflow" />
</layoutData>
</Button>
</tnt:ToolHeader>
</mvc:View>
the only one script in my index.html
<script src="resources/sap-ui-core.js"
data-sap-ui-xx-bindingSyntax="complex" id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m" data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-resourceroots='{ "zdemo":"./"
}'>
Your code is correct, but according to the comments, you are using an older version which does not yet include the ToolHeader control.
By upgrading to SAPUI5 1.34+ you will be able to use the ToolHeader with the same code.
The documentation for the control includes the information when the control was added.
You need import module dependency "sap.tnt" to your project. You can do it this way:
1. install dependency via bower
bower install openui5/packaged-sap.tnt
if you need another dependency, you can find here: https://github.com/openui5
2. add reference lib to index.html
<script .... data-sap-ui-libs="sap.m, sap.tnt"></script>
3. if you use grunt serve, expose dependency resources by openui5_connect
on file Gruntfile.js, find openui5_connect key and add
openui5_connect: {
options: {
resources: [
...
'bower_components/openui5-sap.tnt/resources',
],
testresources: [
...
'bower_components/openui5-sap.tnt/test-resources'
]
}
}
4. To finish, add dependency entry to manifest.json
"sap.ui5": {
"dependencies": {
"libs": {
...
"sap.tnt": {}
}
}
}
And run your app