CONTROLLING THE DIRECTION THE CURSOR-CUSTOM FORMS

Support - Assistance technique
1

Hi All,

How can someone customize the cursor to move either vertical or horizontal in a custom form?

Thanks

Stanley

2

Stanley,

You need a few extra snippets of code in the custom form. DHIS users in South Africa use this a lot for capturing monthly data on a daily basis, i.e. we use a custom form where Day01 to Day31 are columns with data set elements as rows - so you obviously need the tab cursor to move down when you do the capturing of values for dayXX. That snippet looks like the following (part of this will need to be adjusted depending on the columns you have in the custom form).

Best regards

Calle

Custom HTML extract:

/*Code to change the tabindex of input cells from horizontal to vertical: TAB Solution works

The code moves the input to the next cell using the tab key*/

// For each row

$(‘#keytable tr’).each(function() {

   // For each cell in that row (using i as a counter)

$(this).find(‘td’).each(function(i) {

// Set the tabindex of each input in that cell to the counter

$(this).find(‘input’).attr(‘tabindex’, i + 1);

//Set the attribute name of each input in that cell to daily

$(this).find(‘input’).attr(‘name’,‘daily’);

});

// Counter gets reset for every row

});

//Custom Code which changes the keypress operation to the next cell below: Solution Working

$(‘input’).on(“keypress”, function(e) {

	 if (e.keyCode == 13) {

		var $this = $(this),

index = $this.closest('td').index();

$this.closest('tr').next().find('td').eq(index).find('input').focus();

e.preventDefault();

    }

}); //end keypress function

//The Next Two Scroll function calls are responding for inserting two horizontal scrollbars on the daily data entry form

$(“.wmd-view-topscroll”).scroll(function(){

$(“.wmd-view”).scrollLeft($(“.wmd-view-topscroll”).scrollLeft());

}); //end top scrollbar function

$(“.wmd-view”).scroll(function(){

$(“.wmd-view-topscroll”).scrollLeft($(“.wmd-view”).scrollLeft());

}); //end bottom scrollbar function

···

On 11 December 2017 at 12:59, Stanley Kalyati skalyati@gmail.com wrote:

Hi All,

How can someone customize the cursor to move either vertical or horizontal in a custom form?

Thanks

Stanley

Mailing list: https://launchpad.net/~dhis2-devs

Post to : dhis2-devs@lists.launchpad.net

Unsubscribe : https://launchpad.net/~dhis2-devs

More help : https://help.launchpad.net/ListHelp

–

Calle Hedberg

46D Alma Road, 7700 Rosebank, SOUTH AFRICA

Tel/fax (home): +27-21-685-6472

Cell: +27-82-853-5352

Iridium SatPhone: +8816-315-19119

Email: calle.hedberg@gmail.com

Skype: calle_hedberg

3

If your form is simple enough just add attribute tabindex to each input field and increment the number in the direction of input fields you want.

Input boxes may look like this

Though the catch is If you’re inserting those input boxes with html editor, you’ll need to edit those input boxes for every new entry.

That’s as basic as it gets, you can make it as complex as you want with javascript.

Basic info on tabindex is here:

https://www.w3schools.com/tags/att_global_tabindex.asp

John Francis Mukulu
Lead Developer, HISPTZ
University of Dar es salaam
http://hisptanzania.org/

···

On Dec 11, 2017 14:00, “Stanley Kalyati” skalyati@gmail.com wrote:

Hi All,

How can someone customize the cursor to move either vertical or horizontal in a custom form?

Thanks

Stanley

Mailing list: https://launchpad.net/~dhis2-devs

Post to : dhis2-devs@lists.launchpad.net

Unsubscribe : https://launchpad.net/~dhis2-devs

More help : https://help.launchpad.net/ListHelp