Need help with Skip Logic and Hidden Fields in the Registration App

Hi,

I’m working on the registration app and have run into a roadblock. Can you help me with these questions?

  1. I would like to display a section in the registration app only if the patient is a child. I can’t figure out if it’s possible to do this with the registration app.

  2. I also have a requirement to collect a hidden input in the contact obsgroup where I collect a sequence number of a contact. I have seen this done on groovy pages with .

I have also played around with CSS classes:

{
                            "type": "obsgroup",
                            "formFieldName": "obsgroup.ISANTEPLUS:EMERGENCY CONTACT CONSTRUCT.obs.ISANTEPLUS:CONTACT SEQUENCE NUMBER",
                            "widget": {
                                "providerName": "uicommons",
                                "fragmentId": "field/text",
                                "config": {
                                    "style":"display:none",
                                    "value": "1"
                                }
                            },
                            "cssClasses": ["invisible"]
                        }

This hides the text input and adds the value, but the user still has to tab through the question on keyboard entry. Would it be appropriate to add a “hidden” field type to uicommons?

Thanks, Craig

FYI @mogoodrich

That sounds appropriate, yes.

(You will want to test if the Simple Form UI framework correctly handles hidden inputs.)

Craig,

I don’t believe #1 is currently possible, unfortunately, but it seems like it would be worthwhile to add a “require” field to a Field, Question and Section objects that allow you to specify some conditional logic as to whether to show or hide that particular field/question/section, like the “require” property on Extension in the the AppFramework module (check out Extension.java and the “createRequireExpression” method in the AppFrameworkServiceImpl). We use this to hide/show extensions based on whether or not the patient is a child or not (among other things).

The UI Commons Simple Form Navigator has some cool features, but is notoriously undocumented. For #2, can you try adding a cssClass of “disabled” and see if that fixes your issue with having to tab through the entry… it might work. (You’ll probably still need the display:none though as well).

Take care, Mark

By the way, it’s possible to do pretty much everything with JavaScript (including show/hide and enable/disable sections), but as Mark says, this isn’t documented. This helper function (from HTML Form Entry) will show you some of the useful functions you can call: https://github.com/openmrs/openmrs-module-htmlformentryui/blob/master/omod/src/main/webapp/resources/scripts/htmlFormSimple.js

(For more details you’d need to look at NavigatorController in the uicommons module.)

@darius @mogoodrich How can I hook into the form submission Javascript so that I can do some custom manipulation, like disabling some fields so that they are not submitted

@ssmusoke I wouldn’t know the answer to this without going back and reading the code.

Does the code link I gave in my previous reply help?

@darius It only shows how to hide and show sections.

What I am trying to do is as follows:

  1. I have added an identifier field using @craigappl method which works instead of the manual identifier Need help defining the app.json for multiple patient identifiers in the registration app and identifier location error

  2. The identifier is not required so at times its left blank so the validation fails. I would like to disable the field when empty before submission so that its not sent

However following your link to registerPatient.js I see submit functionality here https://github.com/openmrs/openmrs-module-registrationapp/blob/ca3a9430220c941a75999438e2c63feae139efb8/omod/src/main/webapp/resources/scripts/registerPatient.js#L151-L168 but do not see how to intercept the submit call

@ssmusoke Have you checked the identifier properties in the patientIdentifierTypes menu in the Admin console to see if the “is required” box is checked?

@craigappl The identifier is not required when I check in the Admin console

You can enable and disable questions and fields using “enable” and “disable” as shown here:

However, I’m not sure if this will fix your issue. Can you tell what validation is failing? Can you tell if it’s one of the Core validators, or is within the Registration App itself (or elsewhere)?

@mogoodrich How can I hook up this functionality into the navigation away from a section for example:

  1. If I want some fields to be filled for only people above a certain age

  2. If a field is left blank (in my case registration Identifier), then at confirmation I want to disable the field so that the validation does not occur.

@ssmusoke what is the validation message you are seeing?

(fyi, I’ll be away on vacation next week so may be slow to respond)

@dkayiwa has resolved an issue where I do not have to hide the identifier field in https://issues.openmrs.org/browse/RA-1375 so it can be left blank

Hi @mogoodrich,

We have been discussing this more generally on RA-1409, but I have another idea. I did a mock up of a JavaScript function that could work.

<script type="text/javascript">
jQuery(function() {
    var yearField = jQuery('#birthdateYear-field');
    var monthField = jQuery('#birthdateMonth-field');
    var dayField = jQuery('#birthdateDay-field');
    var yearsField = jQuery('#birthdateYears-field');
    var monthsField = jQuery('#birthdateMonths-field');
    
    var age = 999;
    var today = new Date();
    var nowyear = today.getFullYear();
    var nowmonth = today.getMonth();
    var nowday = today.getDate();

    jQuery(yearsField).blur(function() {
        if((birthdateMonths != "" && birthdateYears == "") || birthdateYears < 18) {
	    	NavigatorController.getSectionById('powerOfAttorneyContact').show();
	    } else {
	    	NavigatorController.getSectionById('powerOfAttorneyContact').hide();
	    }
    });

    jQuery(monthsField).blur(function() {
        if((birthdateMonths != "" && birthdateYears == "") || birthdateYears < 18) {
	    	NavigatorController.getSectionById('powerOfAttorneyContact').show();
	    } else {
	    	NavigatorController.getSectionById('powerOfAttorneyContact').hide();
	    }
    });

    jQuery(birthdateYear.blur(function() {
        if (birthdateYear != '' && birthdateMonth != '' && birthdateDay != '') {
            togglePowerOfAttorneyContact();
        }
    });

    jQuery(birthdateMonth.blur(function() {
        if (birthdateYear != '' && birthdateMonth != '' && birthdateDay != '') {
            togglePowerOfAttorneyContact();
        }
    });

    jQuery(birthdateDay.blur(function() {
        if (birthdateYear != '' && birthdateMonth != '' && birthdateDay != '') {
            togglePowerOfAttorneyContact();
        }
    });
});

jQuery(document).ready(function() {
	NavigatorController.getSectionById('powerOfAttorneyContact').hide();
	});

function togglePowerOfAttorneyContact() {

	var age = nowyear - birthdateYear;
    var age_month = nowmonth - birthdateMonth;
    var age_day = nowday - birthdateDay;
   
    if(age_month < 0 || (age_month == 0 && age_day <0)) {
            age = parseInt(age) -1;
        }

    if(age < 18) {
    	NavigatorController.getSectionById('powerOfAttorneyContact').show();
    } else {
    	NavigatorController.getSectionById('powerOfAttorneyContact').hide();
    }
};

Do you think this would work if I added it to the registration page? Speaking of which, what’s the best mechanism to do that since it’s implementation specific? Should I create a widget and call that widget in my app.json file?

Thanks, Craig

@craigappl seems reasonable looking over this that this would do what you what, but I didn’t did too deeply… I do think you will want to do a “disable” and “enable” versus “show” and “hide”. If I remember correctly, show and hide are what are used to show/hide certain fields as a user tabs through the registration–in your case, if I understand correctly, you want to completely disable the question so that it doesn’t appear when you step through it.

If you have a dev environment setup, you could just manually install this code in a <script type="text/javascript"> block in registerPatient.gsp just to see if it does want you want. Obviously as you said this is implementation-specific as you said so we couldn’t commit it directly to the registerPatient.gsp, but if you confirm that it does what you want, we should be able to add an extension point to registerPatient to allow the injection of custom javascript. We have an “includeFragments” extension point on the clinician-facing dashboard with we use for a similar purpose:

Take care, Mark

Hi @mogoodrich, Thanks for your help with all this. I resolved my issue with RA-1411 using the fragment extension and no longer need the issue created in RA-1409. Links to all commits and source code are in the RA-1411 ticket. Should we close the RA-1409 issue as won’t do?

Might be worth keeping RA-1409 around, but marking it as low priority (and specifically that you’ve solved your issue elsewhere).

Take care, Mark

Thanks @mogoodrich,

I updated RA-1409. [quote=“mogoodrich, post:15, topic:11278”] I do think you will want to do a “disable” and “enable” versus “show” and “hide”. [/quote]

When testing I found that disable and enable do disable the section, but the text remains as grayed out in the UI. The show and hide funtions both disable the section and hide it from the view.

Craig

Ah, okay, cool then… I would have thought that when you tabbed through a “hidden” section would be “shown”, but I guess I’m forgetting how it works… :slight_smile:

@craigappl I am wondering whether you have been able to have a custom validation and hook that to stop a user from proceeding to the next section before the issue is resolved

@mogoodrich any ideas?