Urgent Request For Information

Support - Assistance technique
1

Dear DHIS2 Developers,

I hope this email finds you well, I have created custom forms and take value of input through javascript as below not working. one td input as below

let or var startdate=document.getElementById(“SgMeYGYp3w6-cKrBWrq5beU-val”).value;
console.log(startdate) I also convert toString() method but not working.

Please let me know how to take the values ? because I want to compare dates.

With Best Regards
Mohammad Ayub Yousafzai
Kabul , Afghanistan

2

Hi did you set the id manually? If it is not set manually it might be set by a script and if the script is changing the id each time the app loads the dataset then this code will not work. Either set the id yourself or use class and selectors.

Thanks!

3

As @Gassim highlighted, for the custom form to open, a script has to be executed to populate elements in the DOM. Assuming the ID you are referencing is expected in the form after it is ready, in order for your code to work, it has to be run after the custom form has finished rendering.

There are some event hooks that can help you determine if the form is ready, but I am not sure if they are still supported in latest version

You may need to check if this is the case also

1 Like
4

Dear @Gassim,

I hope this message finds you well, No I have not set manually it is automatically given id, if I set manually id. it does not bring any problems?

Regards
Mohammad Ayub Yousafzai
Kabul , Afghanistan

5

It depends on how you built your form, so I can’t give a specific answer. if you can’t change the id then use class name instead! :slight_smile:

6

Dear @rajab_mkomwa,

Thank you for your information, I have used different events, it is not working.

Regards
Mohammad Ayub Yousafzai
Kabul , Afghanistan

7

Dear @Gassim,

I used, class=“startdate” and id together but when save the dataset ,

re open the source it is gone.

Any Solution?

regards
Yousafzai

8

Please try not to modify the id? Thanks!

9

If I modify Id, then it is not dynamic in each period same date is shown. and calendar pickup is also not shown.

I am not modifying the id any other solution to take value of custom dataset form and do some comparison in date, highlighting the expiry date ?

regards
Yousafzai

10

Please add class to the HTML element and use class in your javascript.

For example,

11

Such as

Print Form

 

 

 
Company Name Start Date End Date License Duration Expiry of Annual Fees Date Application Fees License Price Annual Price Transfer Fee Database Maintenance Annual Fee Guarantee Fee Cancel Fee Total Paid License Authority Signature Company Signature Address Email Address Website
AWCC
Etisalat
ICG
 

Annual Fee (Daily Fee , Monthly Fee , Quarterly Fee)

 
Company Name Daily Fee Monthly Fee Quarterly Fee
AWCC
Etisalat
ICG
 

 

 

 

Database Maintainance Annual Fee (Daily Fee , Monthly Fee , Quarterly Fee)

 

Company Name Daily Fee Monthly Fee Quarterly Fee
AWCC
Etisalat
ICG

 

where ?

12

Then the class name would be class=“printForm”; are you using a custom form? If so then from Maintenance → Dataset → select the dataset options and you will find the option to design it and from the designer you can customize the custom form. Where are you inserting the Javascript code you used above?

Thanks!

13

I think, you did not get the point. it is customly designed.

image
image1915×994 60 KB

image
image1920×855 131 KB

image
image1919×860 121 KB

in the same form, I want to highlight Expiry of annual fee where 1 week left ?
Any way to take value of each input through javascript or jquery ?

Regards
Mohammad Ayub Yousafzai
Kabul , Afghanistan

14

Hello @mohammadayub864
Have you tried to put your code within the following block? If not, then go for it provided dhis2 is supported.

dhis2.util.on('dhis2.de.event.dataValuesLoaded', function () {
  // any codes like getElementById("id") or $("#id")...., api to datastore or analystics or any API can go here
 // const orgUnitId = dhis2.de.currentOrganisationUnitId;
  //const dimensions = dhis2.de.api.getSelections();
// EXAMPLE:
$('input[name ="entryfield"]').each(function (i) {
		  $(this).change(function () {
			//codes for on changes on input fields
		  });
		});
});
15

Thanks for the screenshots… here’s a suggestion:

For the Expiry of Annual Fees Date column, add to each row in the code the class “check” which you will use in your JavaScript code to loop over each field and the one that has an expired date, you can add a class “highlight.” In the CSS , you can customize the “highlight” class to change the background color of all the input fields that were checked and added to “highlight” class.

Fort the script code, it can be added after the end of your data entry form code under the tag ; whereas, for the CSS [your-css] should probably be added to the top of the code. I can mark the location in the screenshot below:

image
image1920×924 109 KB

Thanks! (I hope I got your question this time :smile: )

16

Dear @Gassim & @josephatjulius,

Thank you for your Information’s , I found the solutions and it is written below if any other community member face with issue. it will be useful.

it is coloring three weeks before the current date.

$(document).ready(function() {
var CurrentDate = new Date();
var expiredate;

$(‘#data’).mouseover(function() {
expiredate = $(‘#lOi0e7nYXpD-HllvX50cXC0-val’).val();
console.log(expiredate);
var expdate= new Date(expiredate);
THREEWEEKS = 1000 * 3600 * 24 * 7 * 3;
if(expdate-CurrentDate<THREEWEEKS){
$(“#lOi0e7nYXpD-HllvX50cXC0-val-dp”).css(“background-color”,“red”);
}
else{
console.log(CurrentDate);
}

});
});

Regards
Mohammad Ayub Yousafzai
Kabul , Afghanistan

1 Like