XML Fragment event bindings to controller not working

Question

I have a Problem with my UI5 application and a simple form. As displayed in the examples of the explored app.

The scenario there is that pressing edit replaces the content of the page with the other SimpleForm of the fragment (codebehind in the controllers).

I do the same; the only difference is that I just replace the content of the SimpleForm with the Controls stored in the XML fragment.

Now I have a Button, which click event should be bound to the underlying controller. But when you do this in codebehind the events on the controller are not fired anymore. It worked when I was using the fragment in my xml view definition file, but now it does not.

controllerModelPropertyChanged(oEvent: sap.ui.base.Event) {
            let cdata = (oEvent.getSource() as any).getData() as agenttemplatesdetailcontroller;
            let p = this.byId("form") as sap.ui.layout.form.SimpleForm;
            for(let c of p.getContent())
                c.destroy();
            p.removeAllContent();
            let f = sap.ui.xmlfragment("ifm.datalink.linerecorder.ams.frontend.view.fragments.agentTemplates."+ (cdata.edit ? "AgentTemplateDetailsEdit" : "AgentTemplateDetailsDisplay")) as sap.ui.core.Control[];
            f.forEach((v) => { p.addContent(v); });
        }

Are bound events to the controller not bound when adding the control? Do I have to bind them manually?

EDIT:

Display Fragment:

<core:FragmentDefinition
        xmlns="sap.m"
        xmlns:core="sap.ui.core"
        xmlns:u="sap.ui.unified">
      <Label text="{i18n>templates.details.name}"/>
      <Text text="{template>/Name}" enabled="{form>/enabled}"/>
      <Label text="{i18n>templates.details.description}"/>
      <Text text="{template>/Description}" editable="{form>/enabled}"/>
      <List headerText="{i18n>templates.details.versionsTitle}" items="{template>/Versions}">
        <CustomListItem>
          <HBox>
            <Label text="{template>Version/Major}.{template>Version/Minor}.{template>Version/Build}"/>
            <Label text=" ({parts: [{path: 'template>CreationDate', type: 'sap.ui.model.odata.type.Date'}, {path: 'i18n>global.dateformat', type: 'sap.ui.model.type.String'}], formatter: '.odatadateformatter'})"/>
            <Label text="{ams>Guarantor/username}"/>
          </HBox>
          </CustomListItem>
      </List>
</core:FragmentDefinition>

Edit Fragment:

<core:FragmentDefinition
        xmlns="sap.m"
        xmlns:core="sap.ui.core"
        xmlns:u="sap.ui.unified">
      <Label text="Name"/>
      <Input value="{template>/Name}" enabled="{form>/enabled}"/>
      <Label text="Description"/>
      <TextArea value="{template>/Description}" editable="{form>/enabled}"/>
      <Label text="Upload new Version"/>
      <u:FileUploader id="fileUploader" name="MyFileUpload" uploadUrl="http://localhost:13917/api/fileupload/uploadfile" tooltip="Upload your file to the local server" uploadComplete="handleUploadComplete"/>
      <Button   text="Upload File" press="AddNewTemplateVersion"/>
      <List headerText="{i18n>templates.details.versionsTitle}" items="{template>/Versions}">
        <CustomListItem>
          <HBox>
            <Label text="{template>Version/Major}.{template>Version/Minor}.{template>Version/Build}"/>
            <Label text=" ({parts: [{path: 'template>CreationDate', type: 'sap.ui.model.odata.type.Date'}, {path: 'i18n>global.dateformat', type: 'sap.ui.model.type.String'}],
                            formatter: '.odatadateformatter'})"/>
            <!--<Label text="{ams>Guarantor/username}"/>-->
          </HBox>
          </CustomListItem>
      </List>
  </core:FragmentDefinition>

View:

<mvc:View
        controllerName="ifm.datalink.linerecorder.ams.frontend.controller.agentTemplates.AgentTemplatesDetail"
        xmlns="sap.m"
        xmlns:core="sap.ui.core"
        xmlns:commons="sap.ui.commons"
        xmlns:f="sap.ui.layout.form"
        xmlns:l="sap.ui.layout"
        xmlns:mvc="sap.ui.core.mvc">
  <f:SimpleForm
            class="lra5form"
            minWidth="500"
            maxContainerCols="2"
            layout="ResponsiveGridLayout"
            title="{i18n>templates.details.title}"
            editable="{controller>/edit}"
            labelSpanL="3"
            labelSpanM="3"
            emptySpanL="4"
            emptySpanM="4"
            columnsL="1"
            columnsM="1"
            id="form">
    <f:toolbar>
      <Toolbar>
        <Button text="{i18n>templates.details.edit}" icon="sap-icon://edit" enabled="{= !${controller>/edit}}" press="onEditPressed" />
        <Button text="{i18n>templates.details.delete}" icon="sap-icon://delete" press="onDelete" visible="{= !${controller>/edit}}" />
        <ToolbarSpacer/>
        <Button text="{i18n>global.accept}" icon="sap-icon://accept" press="onAcceptClicked" visible="{controller>/edit}" enabled="{controller>/changed}"/>
        <Button text="{i18n>global.cancel}" icon="sap-icon://cancel" press="onCancelClicked" visible="{controller>/edit}" />
      </Toolbar>
    </f:toolbar>
    <f:content>
      <core:Fragment fragmentName="ifm.datalink.linerecorder.ams.frontend.view.fragments.agentTemplates.AgentTemplateDetailsDisplay" type="XML"/>
    </f:content>
  </f:SimpleForm>
</mvc:View>

Does this answer your question? Event handlers from XML fragment not triggered — Boghyon Hoffmann

lightSchiz lightSchiz · Accepted Answer · 2017-06-08T06:55:03

You should add a reference to the controller to handle the callback.

Example:
this._oDialog = sap.ui.xmlfragment("sap.ui.demo.wt.view.HelloDialog", this);

Here's a link to the fragment callback documentation: (https://help.sap.com/viewer/0ce0b8c56fa74dd897fffda8407e8272/7.5.5/en-US/354f98ed2b514ba9960556333428d35e.html)

XML Fragment event bindings to controller not working

1 Answers