Accessing html items

OL Connect Professional Designer
1

Hey everyone,

I have a form in which I have a single item I want to be conditional IF another form element’s value is “yes”.

I thought I understood how to access html items using the designer API, but I’m obviously doing something wrong given that it won’t work.

My code is:

if (query(“#severeReaction”).value == “yes”) {

results.show();

} else {

results.attr(“data-conditional”, “”);

results.hide();

}

I am trying to access that select element (id of severe reaction) and, if the selected option’s value is yes, show the conditional form element. Am I missing something?

Thank you in advance for any and all help offered,

Kyle

2

Depends if you want to have the content change dynamically (for instance, in response to the user switching an option from Yes to No) or if you simply want to have a static condition that sets visibility of the target element at load time and that doesn’t change afterwards.

Either way, the attached template ( https://learn.objectiflune.com/qa-blobs/13682090129105657897.ol-template ) shows how to do both. To show the proper element when the page loads, a script that is essentially the same as yours selects the appropriate status:

if (query("#severeReaction").value == "yes") {
 results.show();
} else {
 query("#notSevereReaction").show();
 results.hide();
}

But since in my template the severeReaction element is a SELECT element, it can be changed dynamically by the user. In that case, we need a client-side JS function to switch the elements dynamically:

function switchReactions(val){
 if(val.value=='yes'){
  document.getElementById('severeConsequence').style.display='';
  document.getElementById('notSevereConsequence').style.display='none';
 } else {
  document.getElementById('notSevereConsequence').style.display='';
  document.getElementById('severeConsequence').style.display='none';
 }
 
}
3

I’ll be honest Phil, I can’t for the life of me get the conditional script to work in my case. I query an element called #severeReaction for my conditional value, and dependent on yes/no, “severeDescription” (results) should show/hide. For some reason, my div element that I’m finding by selector (#severeDescription) will not show/hide.

However, the client side JS works perfectly fine and I will use that as my solution. I appreciate your help with this.

4

Have you tried showing in the console the content of your #severeDescription item? Just to see if it isn’t a problem with the actual value and not the logic?

5

Hello Kyle,

In the attached template (saved in 2018.1) I used jQuery to toggle the visibility of the reaction using a client side JavaScript.

The user script in the Designer sets the initial status based on a data field (assume this was required). Secondly I used a JavaScript (jQuery) to call a function when the value of the combo box changes. In the attached template I loaded the jQuery library from an online location (cdnjs.com, a popular content delivery network which hosts popular libraries).

Hope this helps,

Erik

Template and Datamapper
https://learn.objectiflune.com/qa-blobs/15877764127576058526.ol-template
https://learn.objectiflune.com/qa-blobs/7197386733614084286.ol-datamapper

User Script in the Designer
Sets the initial status based on data.

Selector: #severeReaction
Code:

var val = record.fields.severeReaction;
query("option[value='" + val + "']").attr('selected', 'selected');

if( val == 'yes') {
 query('#severeConsequence').show();
  query('#notSevereConsequence').hide();
} else {
  query('#severeConsequence').hide();
  query('#notSevereConsequence').show();
}

Client side code (jQuery)
Toggles the visibility when the combo changes value.

$( document ).ready(function() { 
  $('#severeReaction').on('change', function() {
    toggleReaction( this.value );
  });     
});

function toggleReaction( val ) {
  if( val == 'yes') {
    $('#severeConsequence').show();
    $('#notSevereConsequence').hide();
  } else {
    $('#severeConsequence').hide();
    $('#notSevereConsequence').show();
  }
}