How to read an HTML Input Field from an XML file?

[zayidu]

Hello Team,

Below is the code snippet of the view in XML, I am able to read the id "Name1" but unable to read/write "Name2" that's in an HTML tag, it returns undefined. Can you help me with how to access the "Name2" that in the HTML tag?

sap.ui.getCore().byId("Name1").setValue(oData.FirstName + " " + oData.LastName + ); // sets the value


// Retunrs undefined
sap.ui.getCore().byId("Name2").setValue(oData.FirstName + " " + oData.LastName + ); // Sets no value

<core:FragmentDefinition

  xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"

  xmlns:l="sap.ui.layout" xmlns:f="sap.ui.layout.form" xmlns="sap.m"

  xmlns:html="http://www.w3.org/1999/xhtml">

  <Panel class="pnlSearchDate" id="pnlContent">

    <html:span class="textcolor">

      <html:b>TITLE</html:b>

    </html:span>

    <html:br />

    <HBox alignItems="Center">

            <Label class="textcolor" width="300px" text="{i18n>txtName}" />

            <Input id="Name1" class="inputbordercolor" editable="false" width="300px"/>

          </HBox>

    <HBox justifyContent="Center">

      <VBox width="100%">

        <html:div class="textcolor"

          style="font-size: 0.875rem;font-family: Arial,Helvetica,sans-serif;line-height:25px;color:#6a7694;text-align:justify;">

          <html:p>

            I,

            <html:input class="inputEntry" id="Name2" 

              editable="false"></html:input>

            hereby confirm that I received one session of XXX.

          </html:p>

        </html:div>

      </VBox>

    </HBox>

  </Panel>

</core:FragmentDefinition>

[thalesvb]

Hello,

Your fields lies inside a Fragment, you need to use Fragment.byId to access them:

sap.ui.xmlfragment("loadedFragmentId",...);
. . .
Fragment.byId("loadedFragmentId", "Name1");

I don't know your controller code and your requirements are, but by what I am seeing in your fragment XML you could simplify and avoid manipulating screen with set/get controls methos (bad practice) and rely on JSONModel bindings, and then use i18n getText API to build "I, ... hereby confirm that..." sentence and FormattedText to render it.

Just adding a JSBin env with a HTML IFrame manipulation using Fragment.byId to reach it (and then native JS manipulation because it's not a UI5 control).

Best regards

[zayidu]

Hello Thales,

Both the controls are inside Fragment only but I can access "Name1" But not "Name2".

Anyways I tried the way you have mentioned as above

I am getting: Uncaught TypeError: sap.ui.xmlfragment.byId is not a function

[thalesvb]

zayidu did you opened the links that i referred on Fragment.byId? Fragment module, which contains byId method that I mentioned, is located on other namespace. Is not advisable to use UI5 modules/classes/methods by their direct namespace, you should load them by UI5 Controller syntax.

sap.ui.define([
	...
	"sap/ui/core/Fragment"
], function(..., Fragment) {
. . .
	someAction : function() {
		Fragment.byId(...);
	}
}

[boghyon]

"byId"-methods retrieve only live UI5 controls. Since the target element is a native HTML element, you'll need to access it via document.getElementById

const element = document.getElementById(<a>);
const value = element.value;

The <a> should be this.createId("elementId"), Fragment.createId("fragmentId", "elementId"), or just "elementId" depending on how the fragment was created as described in How to Access Elements from XML Fragment by ID.

___

Note: The browser API document.getElementById can be used only if the corresponding element is already in the DOM. I.e. the element can be accessed e.g. in onAfterRendering of the view.

[maheshpalavalli]

HI zayidu

sap.ui.getCore().byId("") should be used for ui5 controls, but your input "name2" is not an UI5 control it's pure HTML element. So you need to use normal jquery to get the control reference.

https://stackoverflow.com/questions/3239598/how-can-i-get-the-id-of-an-element-using-jquery

But why are you using the html control instead of UI5 control?

Thanks,

Mahesh