问题

I have a string containing XML fragment definition, and I'd like to create a control using it.

Example of an XML string:

var sFrag = "<core:FragmentDefinition xmlns='sap.m' xmlns:core='sap.ui.core'>
    <Dialog showHeader='false' class='transparentBG dialogScrollHeight100' contentWidth='90%' afterClose='dialogAddNewAfterclose'>
        <content>
            <Button text='X' press='closeDialog'/>
            <Text text='Hello Meirav!'/>
            <HBox alignItems='Center'>
                <Label text='Product Name: '/>
                <Label text='{currentProduct&gt;/Name}'/>
            </HBox>
            <HBox height='30px'/>
            <HBox alignItems='Center'>
                <Label text='Product Price: '/>
                <Input value='{currentProduct&gt;/Price}'/>
            </HBox>
            <HBox height='30px' />
            <Button text='Save Update' press='saveUpdateFromFrag'/>
        </content>
    </Dialog>
</core:FragmentDefinition>"

Is it possible?

回答1:

Yes, similar to XMLView.create, Fragment also supports creating control(s) from an XML string.

≥ UI5 1.58

sap.ui.require([
  "sap/ui/core/Core",
], Core => Core.attachInit(() => sap.ui.require([
  "sap/ui/core/Fragment",
  "sap/m/Button",
], async (Fragment, Button) => {
  "use strict";

  const dialog = await Fragment.load({
    definition: `<Dialog xmlns="sap.m"
      title="My Dialog"
      class="sapUiResponsiveContentPadding">
      <Text text="Some Dialog content.." />
      <beginButton>
        <Button id="myBeginButton"
          text="Handle Event from Fragment"
          press=".onBeginButtonPress" />
      </beginButton>
    </Dialog>`,
    controller: { // can be just "this" in a Controller definition.
      onBeginButtonPress: () => alert("Event handler triggered!"),
    },
  });
  new Button({
    text: "Open Dialog",
    press: () => dialog.open(),
  }).placeAt("content");
})));

<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>

API Reference: sap/ui/core/Fragment.load

PS: The <FragmentDefinition> is only required if the fragment definition contains multiple root nodes. This is not the case here, hence, it can be removed.

If an older version is used, you'll have to fall back on the deprecated API sap.ui.xmlfragment.

const fragmentContent = `<Dialog xmlns="sap.m"><!-- ... --></Dialog>`;
const dialog = sap.ui.xmlfragment({ fragmentContent }, this/*controller*/);

Instead of definition, the property fragmentContent needs to be defined, and the controller instance should be passed as the 2nd argument.

来源：https://stackoverflow.com/questions/61366220/how-to-programmatically-create-fragment-using-xml-string

标签

xml

sapui5

How to programmatically create fragment using XML string

问题

回答1:

≥ UI5 1.58