UI5 constants in XML views

[UweFetzer_se38]

In a JS view a password field is defined as followed:

new sap.m.InputListItem({
       label: "Password",
       content: new sap.m.Input({ value: "{app>/Password}", type: sap.m.InputType.Password })

How do I handle the same in an XML view. Sure, I can substitute the constant with a string, but this is is obviously not intention of constants.

<Input value="{app>/Password}" type="Password" />

I've tried alreay this:

type="{'sap.m.InputType.Password'}"

But it doesn't work

See also

Any ideas?

[rdiger_plantiko2]

Hi, does somebody know the URL of the API refence document which describes all possible XML elements and attributes for SAPUI5 XML views? I can't find it with Google!

[yamini_sontakke]

https://sapui5.netweaver.ondemand.com/explored.html

Here you can find the views which are created using XML for SAPUI5

Regards

Yamini

[aakash_neelaperumal2]

Please refer below - we have an input PasswordField

JsDoc Report - SAP UI development Toolkit for HTML5 - API Reference - sap.ui.commons.PasswordField

--Aakash

[UweFetzer_se38]

But not last year when I wrote this question

However, this Q was not about password fields but rather about the usage of constants in XML views.

Thank you though.

[tobias_doelle]

Hi Uwe,

you are right - using literals is not the idea of constants.

To use the value of constants in my XML-Views i defined a JSON-Model in the Component.js.

In the XML-View i used it as known.

Component.js (init):

//create Constants-Model for using in XML-Views
var constantsModel = new sap.ui.model.json.JSONModel({
     ListMode_None : sap.m.ListMode.None,
     ListType_Navigation : sap.m.ListType.Navigation
});
constantsModel.setDefaultBindingMode("OneTime");
this.setModel(constantsModel, "const");

XML-View:

<List id="list" mode="{const>/ListMode_None}" delete="onListItemDelete" />

<ObjectListItem id="objListItem" type="{const>/ListType_Navigation}" press="onObjectListItemPressed">

Hope this helps.

Regard, Tobias

[Former Member]

Hi Uwe,

Just try <Input type="Password">

Regards,

Sharique

[former_member195440]

Hi,

The reason your second example works is that in JavaScript:

sap.m.InputType.Password === "Password"

You can try it in the JSBin console. If you are interested, it is defined in the sap/m/library.js or library-dbg.js file:

sap.m.InputType = {
  ...
  ...
  ...
  /**
     * Password input where the user entry cannot be seen. 
     * @public
     */
  Password : "Password"
};

This has been the convention for all of SAP's enums for SAPUI5 so far, so you should be fine using that in your code. From looking at the code of the XMLTemplateProcessor, I think this was intended. But in my opinion, it should be able to cater for "sap.m.InputType.Password" also in case that value changes (the purpose of having the type in the first place!).

Hope this helps,

Oli

[UweFetzer_se38]

Hi Oliver,

no, it isn't fine to use it in the code. Sure it works, but it is against all developer rules.

"sap.m.InputType.Password" is a constant with value "Password".

If there is a constant defined, you have to use it. Point. Simple.

Dear UI5 team, if it's currently not possible to use constants, please let us know (and consider a change in one of the next releases).

Thank you.

[former_member195440]

Hi,

Yes I completely agree with using constants but after a more digging I have found some more on how this works.

These are not constants but more like enumerated types of other languages. Specifying "Password" in the XMLView is actually better than using "sap.m.InputType.Password" in a JSView I think, although the logic here is interesting and again relies on:

sap.m.InputType.Password === "Password"

For the JSView you are not passing "sap.m.InputType.Password" but rather the value that it has at that moment ("Password" if you don't change it!). For the XMLView, you simply get "Password".

Since this is a ManagedObject it eventually gets to the "sap.ui.base.ManagedObject.prototype.validateProperty" function which checks the following:

else if (!(oValue in oType)){ // Enumeration
     throw new Error("\"" + oValue + "\" is not a valid entry of the enumeration for property \"" + sPropertyName + "\" of " + this);
 }

Or, in English, checks that "Password" is a property of the object "sap.m.InputType". In other words, that "sap.m.InputType.Password" exists (but not what its value is). Then the setProperty function will set the controls "type" to the property name "Password" (the passed in value, not the actual value of "sap.m.InputType.Password").

Now when the control is rendered, "sap.m.InputRenderer" in function "writeInnerAttributes" will simply get the property "type" and write it in lower case to the HTML renderer. It doesn't use the value of "sap.m.InputType.Password" at any point.

Because of this, we can say for XMLViews the value of "sap.m.InputType.Password" is immaterial and is never actually used.

This is not true for a JSView which relies on the fact that the property is named the same as the value it has. If in fact you had some code, before your views, that said:

sap.m.InputType.Password = "NotAPassword"

The XMLView will still work but the JSView will not. It is probably better to supply "Password" to the JSView to say "use the 'Password' enum" although it might not look as clean to the eye (and you may get code completion depending on your IDE)!

So for me, specifying the control's type in XML is done correctly by the following:

<Input
     text="This works"
     type="Password"/>

Hope this helps.

Oli

[former_member182650]

Hi,

Try

type="'sap.m.InputType.Password"

without brackets.

Kind regards

[UweFetzer_se38]

No, it throws an error:

Uncaught Error: "'sap.m.InputType.Password'" is not a valid entry of the enumeration for property "type" of Element sap.m.Input#__input1

You can play around with the code in this JS Bin

[former_member182650]

Hi, I'm not used to work with XML Views, but it seems to prepend a default prefix with assumed package: sap.m.InputType

For example with this button happens the same and it works <Button text="Back Button" type="Back"/>

Could it be possible?