Auto tabbing in SAP UI5

[sitara_kola]

Hi Experts,

I need to implement Auto tab functionality in side  sap.m Table .

I have two input fields in two colums inside sap.m.table. I have fixed length Value for each input filed ,once I filled first Input field  in a row1, next cursor has automatically move to next field.

Once row values are filled it has continue with next row until all columns .

Auto tabbing is possible in jQuery.How to implement it for SAP UI5,could you help me out on this.

Thanks in advance.

product	Quantity

BR

Sitara

[mornee_parsons]

I posted on stack overflow and got this answer, but is still not working

javascript - SapUI5 Autotab in sap.m.Table - Stack Overflow

Add the respective styleClass to your table.

oTable.addStyleClass('number');

then in onAfterRendering() have your jQuery statements.

$(function () { $('.number').autotab('filter','number'); });

[Private_Member_15166]

what is the number here??

[mornee_parsons]

I'm not too sure myself as I am totally new to this.

Please check the post in the link i provided.

[Private_Member_15166]

Go with this link.

Mathachew/jquery-autotab · GitHub

This is a separate plugin an you have to keep this file in your app.

[DK007]

Hi,

I'm trying to implement it in application, addStyleClass('alphanumeric') on a inputfield is adding alphanumeric class to the DIV element of the input element.

Attached are the image of view code and from Chrome developer tools.

As per autotab documentation class has to be added to the field(input field).

Let me know if my understanding is correct or not.

Thanks,

Dheeram

Message was edited by: Dheeram Kallem I was able to achieve auto tabbing. I did it by using id of the element. And used manually setting the element, target and previous one by using below like statement. $('#alphanumeric2').autotab({ format: 'alphanumeric', target: '#alphanumeric3', previous: '#alphanumeric1' });

[Former Member]

Hi Dheeram,

  I need to use auto tab in the table view of Fiori application.

Can you please suggest me how can I use auto tab in Fiori application and please give any link regarding this.

Thanks,

Nag

[DK007]

Hi,

By using Chrome Developer tools, check actual element ID and use that in autotab function. This will be tricky as sometimes SAPUI5 events will not work(not sure why, I need to dig deep into it, but I had a workaround on this), so you need to debug you view. Check how are the element ID's are getting generated for same column in table. You can have some logic on looping through them.

You might have to add addEventDelegate function as shown below:

addEventDelegate({

  onAfterRendering: function(){

  <SOME FUNCTION WHICH WILL LOOP THOURH YOUR TABLE ELEMENTS and CREATES autotab function for each element>

  }

     }, this)

Note: I had used autotab in form fields.

Hope this might help. As I said it's not going to be straight forward.

Thanks,

Dheeram

[Former Member]

Hi ,

I receive the following error when I use auto tab function:

Uncaught TypeError: $(...).autotab is not a function

I have included the script tag in index page as well:

<script src="jquery.autotab.js"></script>

How to resolve this error?

Regards,

Anjana

[saivellanki]

Hi Anjana,

Check this sample: Table Tabbing Demo with extra Tab Handling - JSFiddle

Regards,

Sai.

[Private_Member_15166]

Hi Sitara,

You can use the functions of jQuery in SAPUI5.

$(function () {

3	$('.number').autotab('filter','number');

4

});

$('.number') here .number is the classname.

These links might be helpful.

jQuery Plugin For Auto Tab Form Fields - autotab | Free jQuery Plugins

jQuery autotab examples

Autotab: jQuery auto-tabbing and filter plugin

Regards

Dhananjay

[mornee_parsons]

Hi,

I am having the same issue.

I am very new at javacripting so i have no idea how to implement this.