I have this little project for documentation purposes. I want my Forms to enable the user to write new data, read already posted data and change existing data.
My problem are the following two:
When I use oForm.bindAggregation(...) my Forms aren't visible
When I use oForm.bindElement(...) the Forms are visible but no data is given...
I don't know why sapui5 behaves like this since I am rather new to it. But the binding with the Tabels and Lists work perfectly fine with Aggregation Binding.
Please help. Thank you in advance!
var oView = this.getView();
oView.bindElement({
path: "/" + oEvent.getParameter("arguments").newPath
});
var oForm = this.byId("thStr");
var oFormItem = this.byId("strSession");
var sPath = oView.getBindingContext().getPath();
var newSes = sPath + "/zuSession";
oForm.bindAggregation("formContainers", {
path: newSes,
template: oFormItem
});
And for bindElement:
oForm.bindElement(newSes);
automatically created oData xml snippet of Z_SESSION:
<EntityType Name="Z_SESSION" sap:content-version="1">
<Key><PropertyRef Name="SessionNr"/><PropertyRef Name="ThId"/></Key>
<Property Name="SessionNr" Type="Edm.String" Nullable="false"
MaxLength="2" sap:unicode="false" sap:label="Nummer"
sap:creatable="false" sap:updatable="false" sap:sortable="false"
sap:filterable="false"/>
<...>
</EntityType>
XML snippet of Form:
<f:Form class="sapUiSmallMargin" visible="true" editable="true"
id="thStr">
<f:layout>
<f:GridLayout/>
</f:layout>
<f:formContainers>
<f:FormContainer id="strSession">
<f:formElements>
<f:FormElement label="Session">
<DatePicker id="sesDat" value="{path: 'Datum',
type: 'sap.ui.model.odata.type.Date'}">
<layoutData>
<f:GridElementData hCells="2"/>
</layoutData>
</DatePicker>
<ComboBox id="sesV" placeholder="V" items="{/Z_VSet}" selectedKey="{V}">
<layoutData>
<f:GridElementData hCells="1"/>
</layoutData>
<items>
<core:Item text="{VKey} {Beschreibung}" key="{VKey}"/>
</items>
</ComboBox>
</f:FormElement>
</f:formElements>
</f:FormContainer>
</f:formContainers>
</f:Form>
Related
I'm adding some GenericTile based on my model into a sap.f.GridList. This is successful. But my problem is that I don't want to have my whole page to be scrollable but only the GridList. That is the reason I add a Panel control and a TileContent.
What did I make wrong? Do you have any suggestion to achieve that?
Here is my code:
<Panel>
<TileContent footerColor="Good" frameType="OneByOne">
<f:GridList xmlns:f="sap.f" id="FormPart4" headerText="Liste des Cartons" items="{CartonsList>/results}" growing="true" noDataText="Aucunes données disponible">
<f:customLayout>
<cssgrid:GridBoxLayout xmlns:cssgrid="sap.ui.layout.cssgrid" boxMinWidth="17rem" />
</f:customLayout>
<f:GridListItem navigated="true">
<VBox class="sapUiSmallMargin">
<layoutData>
<FlexItemData growFactor="1" shrinkFactor="0" />
</layoutData>
<GenericTile header="Carton N°: " press="onCarton_Click" headerImage="sap-icon://palette">
<TileContent>
<NumericContent value="{CartonsList>Number}" withMargin="true" truncateValueTo="24" />
</TileContent>
</GenericTile>
</VBox>
</f:GridListItem>
</f:GridList>
</TileContent>
</Panel>
I can't seem to figure out how to get a SmartField to work without data binding; the problem is that the value that is entered is cleared when there's no data binding.
I've been stuck with this for some days now; I've tried changing the 'sap:' tags in the metadata but to no avail. If I change the field to SmartMultiInput it works fine; there's also a specific example on SAPUI5's tutorial series for SmartMultiInput Without Data Binding - but nothing on SmartField.
myView.view.xml:
<mvc:View
controllerName="sap.ui.demo.smartControls.SmartField"
xmlns="sap.m"
xmlns:form="sap.ui.layout.form"
xmlns:mvc="sap.ui.core.mvc"
xmlns:smartField="sap.ui.comp.smartfield">
<form:SimpleForm
minWidth="1024"
maxContainerCols="2"
editable="true"
layout="ResponsiveGridLayout"
labelSpanL="3"
labelSpanM="3"
emptySpanL="4"
emptySpanM="4"
columnsL="1"
columnsM="1"
class="editableForm">
<form:content>
<smartField:SmartLabel labelFor="idProduct"/>
<smartField:SmartField value="{ProductId}" entitySet="Products" id="idProduct"/>
</form:content>
</form:SimpleForm>
</mvc:View>
myController.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(Controller) {
"use strict";
return Controller.extend("sap.ui.demo.smartControls.SmartField", {
onInit: function() {
//SmartField will work if the following code is uncommented
//this.getView().bindElement("/Products('4711')");
}
});
});
metadata.xml
<?xml version="1.0" encoding="utf-8"?>
<edmx:Edmx Version="1.0"
xmlns:edmx="http://schemas.microsoft.com/ado/2007/06/edmx"
xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata"
xmlns:sap="http://www.sap.com/Protocols/SAPData">
<edmx:DataServices m:DataServiceVersion="2.0">
<Schema Namespace="com.sap.wt02"
sap:schema-version="1" xmlns="http://schemas.microsoft.com/ado/2008/09/edm">
<EntityType Name="Product">
<Key>
<PropertyRef Name="ProductId" />
</Key>
<Property Name="ProductId" Type="Edm.String" />
<Property Name="Price" Type="Edm.String"
sap:unit="CurrencyCode" MaxLength="3" sap:label="Price"
sap:updatable="true" />
<Property Name="CurrencyCode" Type="Edm.String"
MaxLength="3" sap:label="Currency" sap:semantics="currency-code"
sap:updatable="true" />
</EntityType>
<EntityContainer m:IsDefaultEntityContainer="true"
sap:supported-formats="atom json">
<EntitySet Name="Products" EntityType="com.sap.wt02.Product" sap:creatable="true" sap:updatable="true" sap:addressable="true" sap:deletable="true" />
</EntityContainer>
</Schema>
</edmx:DataServices>
</edmx:Edmx>
Products.json
[
{
"ProductId": "4711",
"Price": 856.49,
"CurrencyCode": "EUR"
}
]
I'm using SAPUI5 XML view
myView.view.xml
<f:SimpleForm id="form1"/>
<f:content id="content1">
<core:Title text="" />
<m:Label text="Label A" />
<m:Input value="10/5/2548" enabled="false" />
<m:Label text="ชั้นที่/ปีที่" />
<m:Input value="1" />
<core:Title text="" />
<m:Label text="Label B" />
<m:Input value="3.25" />
<core:Title text="" />
</f:content>
</f:SimpleForm>
myController.controller.js
addNewContent:function(){
var content = this.getView().byId("form1").getContent();
this.getView().byId("form1").addContent(content);
}
Error message
not valid for aggregation "content" of Element
sap.ui.layout.form.SimpleForm#__xmlview1--form1
I want to copy content (id="content1") to button when click addNewContent Button
Anyone help thanks
Add more information
this is what i want to do
Technically
The getContent() method returns an array sap.ui.core.Element[].
The addContent() method takes a single sap.ui.core.Element as parameter.
So you need to do something like this:
this.getView().byId("form1").addContent(content[0]);
or this:
oForm = this.getView().byId("form1");
content.forEach(oControl => oForm.addContent(oControl))
or if not using ES6:
oForm = this.getView().byId("form1");
for (var i = 0; i < content.length; i++) {
oForm.addContent(content[i]);
}
Functionally
It is not clear to me what you are trying to achieve. Based on your code snippet, you are trying to copy from and paste to the same place...
Hope this will help you, try to clone form and append it to the container.
XML view
<Button text="+" press="cloneContent" /><!-- Button for cloning -->
<f:SimpleForm id="form1" editable="false" layout="ResponsiveGridLayout" title="Address" labelSpanXL="3" labelSpanL="3" labelSpanM="3" labelSpanS="12" adjustLabelSpan="false" emptySpanXL="4" emptySpanL="4" emptySpanM="4" emptySpanS="0" columnsXL="1" columnsL="1" columnsM="1" singleContainerFullSize="false">
<f:content>
<core:Title text="" />
<Label text="Label A" />
<Input value="10/5/2548" enabled="false" />
<Label text="ชั้นที่/ปีที่" />
<Input value="1" />
<core:Title text="" />
<Label text="Label B" />
<Input value="3.25" />
<core:Title text="" />
</f:content>
</f:SimpleForm>
<VBox id="contentHolder"></VBox><!-- clone form holder -->
Controller
cloneContent: function(oEvent){
var oForm = this.getView().byId("form1");
if (oForm) {
oFormClone = oForm.clone();
oFormClone.setTitle("");
var oHolder = this.getView().byId("contentHolder");
if (oHolder) {
//oHolder.removeAllItems();//if you want to remove all the previous added item you can uncomment this line
oHolder.addItem(oFormClone);
}
}
}
Note: Take care of binding after clone. You can use oHolder to rebind if you have any issue.
I can't find the problem in my code. The number of rows is always correct, but it only shows the values of the last object in the array of the binding. I'm using the correct aggregation <items> so that's not the issue. Maybe (I hope) I'm just overlooking something.
<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
<Dialog title="{i18n>selectionTitle}" horizontalScrolling="false">
<beginButton>
<Button text="{i18n>closeSelectionButton}" press="handleCloseSelectedTrainings"/>
</beginButton>
<endButton>
<Button type="Accept" text="{i18n>submitSelectionButton}" press="handleSubmitSelectedTrainings"/>
</endButton>
<content>
<List noDataText="Empty" items="{selectedTrainings>/}" mode="Delete" delete="handleDeleteSelectionItem">
<items>
<CustomListItem >
<HBox>
<core:Icon size="2rem" src="{icon}" class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom"/>
<VBox class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom">
<Text text="{Title}" />
<Label text="{Type} {= ${Begda} ? ${Begda}.toLocaleDateString() : '' }"/>
<HBox>
<CheckBox text="{i18n>selectionMgrApproved}" selected="{Approved}" />
</HBox>
</VBox>
</HBox>
</CustomListItem>
</items>
</List>
</content>
</Dialog>
You are using named model selectedTrainings for items bindings and you forgot to put a model name into CustomListItem elements. Put a model name into bindings like this:
<Text text="{selectedTrainings>Title}" />
<Input value="{binding}"/> works fine.
But if I use
<Select>
<core:Item key="{key}" text="{binding}" />
<core:Item key="1" text="O530" />
<core:Item key="2" text="O531" />
</Select>
It shows like
<Select>
<core:Item key="1" text="O530" />
<core:Item key="1" text="O530" />
<core:Item key="2" text="O531" />
</Select>
But what I want is
<Select>
<core:Item key="1" text="O530" /> (selected)
<core:Item key="2" text="O531" />
</Select>
What should I do ？
I tried to use setSelectedItem, but I used form.bindElement("/ProductSet('1')") in controller, I don't know how to get the {binding} out.
I wonder why have you used:
<Select>
<core:Item key="{key}" text="{binding}" /> <- This line of code?
<core:Item key="1" text="O530" />
<core:Item key="2" text="O531" />
</Select>
Anyways, this is how I will do it :
First my model which has the selected key :
var model = new sap.ui.model.json.JSONModel({
data: [
{
key:'2',
text:'text'
}]
});
Next, my sap.m.select in view : ( I know I have only 2 items for my select so hard code else I will use aggregation binding for sap.m.select) :
<Select selectedKey="{key}" id='idSelect'>
<core:Item key="1" text="O530" />
<core:Item key="2" text="O531" />
</Select>
Here, selectedkey will set the key stored in my model.
Next, element binding from my JSON Model in controller :
this.getView().byId('idSelect').setModel(model).bindElement({
path: '/data/' + 0
});
and binding works properly. You can change the key in JSON model and corresponding key is selected in sap.m.Select.