SAPUI5 - add Fragment in SimpleForm

Question

i have a problem with adding an fragment to an SimpleForm in SAPUI5. I have an SimpleForm and want to add content in the form with fragments. The result should look like this: what i want done

my fragment:

<core:FragmentDefinition 
	xmlns="sap.m" 
	xmlns:core="sap.ui.core" 
	xmlns:mvc="sap.ui.core.mvc" 
	xmlns:html="http://www.w3.org/1999/xhtml"
	xmlns:l="sap.ui.layout" 
	xmlns:f="sap.ui.layout.form"
	xmlns:tnt="sap.tnt" 
	xmlns:custom="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1">

		<core:Title text="{i18n>beauskunftung.suche.address}"/>
		<Label text="{i18n>beauskunftung.suche.streetNo}"/>
		<Input editable="false" fieldGroupIds="Address" value="{AddressStreet}" id="inputStreetID"></Input>
		<Input editable="false" fieldGroupIds="Address" value="{AddressStreetNumber}" id="inputNumberID">
			<layoutData>
				<l:GridData span="L3 M3 S4"/>
			</layoutData>
		</Input>
		<Label text="{i18n>beauskunftung.suche.zipCity}"/>
		<Input editable="false" fieldGroupIds="Address" value="{AddressZipCode}" id="inputZipID">
			<layoutData>
				<l:GridData span="L3 M3 S4"/>
			</layoutData>
		</Input>
		<Input editable="false" fieldGroupIds="Address" value="{AddressCity}" id="inputCityID"/>

</core:FragmentDefinition>

if i add the fragment with javacript

	var oFragment = sap.ui.xmlfragment("testistest", "com.natuvion.ddi.fragments.select.address");
  var oLayout = this.getView().byId("AddressIDandSoOn");
  oLayout.insertContent(oFragment, -1);

i get the following error:

Uncaught (in promise) Error: "Element sap.ui.core.Title#__title0,Element sap.m.Label#__label0,Element sap.m.Input#testistest--inputStreetID,Element sap.m.Input#testistest--inputNumberID,Element sap.m.Label#__label1,Element sap.m.Input#testistest--inputZipID,Element sap.m.Input#testistest--inputCityID" is not valid for aggregation "content" of Element sap.ui.layout.form.SimpleForm#__xmlview1--AddressIDandSoOn

I think the problem is that the add method can just add one element (if I have just a label in the fragment it works!). I looked for some element which should contains all the elements from the fragment but I didn't find one. If I add the fragment via XML on the page

<core:Fragment id="addressFragment1" 
fragmentName="com.natuvion.ddi.fragments.select.address" type="XML"> 
</core:Fragment>

it works. At this point I have no idea how to add fragments inside an SimpleForm. I need the dynamic generation of the elements, as I have to add this depending on the given data, possibly also several times

My Question: - How can i add an Fragment to an SimpleForm?

amiramw amiramw · Accepted Answer · 2017-04-22T20:39:20

The programatic APIs add/insert content support only single element and not an array. So you could try looping over the array and add one by one:

  var aFragment = sap.ui.xmlfragment("testistest", "com.natuvion.ddi.fragments.select.address");
  var oLayout = this.getView().byId("AddressIDandSoOn");
  aFragment.forEach(function (oElement) {oLayout.addContent(oElement);});

Another option you can consider is moving to sap.ui.layout.form.Form. It has composed aggregations inside: Form -> formContainers -> formElements -> label,fields[].

It looks like the address fragment could be a single FormContainer and then you could add it to the Form in a single call to addFormContainer().

SAPUI5 - add Fragment in SimpleForm

1 Answers