Adding an HTML attribute to an sap.m.Input control

[former_member512938]

Hi Gurus,

This is a simple question, at least I think it is.

I can't find how to add an HTML attribute in order to render it in the <input> HTML tag. Basically, I just want to set the tabindex to 1.

Actually, I extended the sap.m.Input control. This means I have access to the "renderer" method, but I render the Input by using :

renderer: function(oRm, oControl) {
     sap.m.InputRenderer.render(oRm, oControl);
}

Does anybody know how to achieve this "simple" task ?

Thank you

[former_member182862 · Accepted solution]

HI Olivier

What about this?

JS Bin - Collaborative JavaScript Debugging

Thanks

-D

[former_member512938 · Accepted solution]

Hello Dennis,

I can see in your example that it is working well.

When I apply this to my project, it does not .

I tried to copy/paste your code, I kept your entire sap.m.Input extension but I had to put it in my XML view (you use JS view) as explained in SAPUI5 doc : Custom Data - Attaching Data Objects to Controls - User Interface Add-On for SAP NetWeaver - SAP Lib...

<core:View controllerName="myApp.view.Details" xmlns:core="sap.ui.core" xmlns:f="sap.ui.layout.form"
    xmlns:l="sap.ui.layout" xmlns:mNameSpace="myApp.control" xmlns:ui="sap.ca.ui" xmlns="sap.m"
xmlns:app="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1">
...
<myNameSpace:InputWithAttrs id="itemqty" width="40px" type="Number" value="{Quantity}" app:tabindex="1"/>

But no new attribute appear in my input...

Thanks for your help.

Olivier

[former_member182372 · Accepted solution]

when you set a breakpoint in onAfterRendering from example

what this.getAttributes() returns to you?

[former_member512938 · Accepted solution]

Hi Maksim,

Happy to hear from you.

It returns me an empty array :

this.getAttributes(): Array[0 ]

Regards,

Olivier

[former_member182372 · Accepted solution]

instead of this.getAttributes()

use

this.getCustomData()

[former_member512938 · Accepted solution]

Thanks to both of you. That was the solution.

Actually, le tabindex was not the issue. Each of my Inputs doesn't seem to be "reachable" via tabulation key. It would only highlight the first line instead of going through each line of the table.

It's like the standard behaviour of SAPUI5 for LIST-like controls. Can you confirm that ?

SAPUI5 Explored

Is there any workaround we can set ?

Thank you

[former_member182862 · Accepted solution]

IMO, you do not want to mix attributes and customData, I have intentionally added the aggregation, attributes in the extended control for this.

Nevertheless, it is up to you.

[former_member182372 · Accepted solution]

Agree, they are semantically completelly different, custom aggregation and custom data, i would not mix them

[former_member512938 · Accepted solution]

I am not sure to understand what both of you are talking about...

From what I understand, Dennis, you tell me not tu use Maksim's suggestion (not to use getData()). But like Maksim pointed, the getAttributes() method return an empty array.

I probably misunderstood the custom data and attribute difference, but I am working with XML views and I don't know how to declare a simple attribute (tabindex) : your example shows how to declare it in JS views.

By the way, I can see that your attributes property is a CustomData object ? So, I am a bit confused when you advise me not to mix both.

attributes: [new sap.ui.core.CustomData({
    key: 'tabindex',
    value: '1'
  })

Could anyone clarify me this please ?

Thank you