If Logic

[RonAnderson]

Hi, I have two fields "Barcode" and "Count" on a submission datapage. I'm trying to make it so that if Barcode = "Yes", then the value in Count must always be 1. If the value in Barcode = "No" then the value in Count can be any positive integer.

Here's my failed attempt:-

<script type="text/javascript">
document.addEventListener('DataPageReady', function (event)
{document.querySelector("[id*='InsertRecordBarcode_ID']").addEventListener('mousemove', function() 

let BarVal = {document.querySelector("[id*='InsertRecordBarcode']").value

if BarVal.value == "Yes");{document.querySelector("[id*='InsertRecordCount']").value = "1"

};
</script>

Javescript isn't my native language and I'm really struggling with this so any help would be really appreciated.

Best regards

Ron Anderson

[CoopperBackpack]

Hello @RonAnderson,

Could you please specify the following?

1) What is the Barcode field data type? Is it the Yes/No field  (Checkbox form element on the DataPage )? Or is it a Text(255) field?

2) Can the user change the value of the Barcode field manually?

3) As I can see in your code you have the Barcode_ID field and the Barcode field. Could you provide more details about the workflow? Which events happen on the Submission form? 

[RonAnderson]

Hi and thanks for replying. In answer to your questions:-

1) The barcode field is a text field (Text255) which is hidden from the user. It will only ever hold the values of "Yes" or "No" because these values are pre-determined and held in a lookup table.

2)  The Barcode Field can't be altered by the user. 

3) If the Barcode field holds the value "Yes" then the Barcode ID (text255) becomes visible and mandatory. If Barcode is "No" then the Barcode ID field is not required and is not visible.

The Barcode ID field will be populated by the user and it could be anything between  3 to 20 characters in length. It could also be alpha or numeric or a combination alpha and numeric.

The "COUNT MUST BE 1" in the Barcode ID field is a reminder for the user to enter only 1 into the "Count or Area" field. Barcodes are unique and can't be shared but this is often ignored by the user and hence my attempt to force the value to 1

I've attached screenshots to try and give you some context. Please ignore "Condition" in both the "Yes" and "No" screenshots.

I genuinely appreciate you picking this up and thanks again for your help.

 

Screenshot of when the Barcode field = No

 

Screenshot of when the Barcode field = Yes

Please note, the Barcode field is normally hidden from the user and the Barcode ID only appears when it's needed ie. when Barcode = Yes.

[RonAnderson]

Please ignore. This has been incorporated into the previous thread

[CoopperBackpack]

@RonAnderson, thank you for detailed description. However, I am afraid, it is still not clear to me how the "Yes" or "No" value appears in the Barcode field.

I assume that it is a Cascading AutoComplete. This is important, since I need to understand which event triggers populating the Barcode field. 

If the Barcode field is set to Cascading AutoComplete form element, we can use an event listener that listens to the input change.

You may test this code in the DataPage Footer (please disable the HTML editor on the Advanced tab before pasting the code).

 

<script>
document.addEventListener("DataPageReady", function (event) {
    let barcodeField = document.querySelector('input[id^="InsertRecordBarcode"]');   //the Barcode field
    let countField = document.getElementById("InsertRecordCount");                   //the Count field
  
  //listen to input change and check which value was added: Yes or No
  
    barcodeField.addEventListener("change", function () {                          
      if (barcodeField.value === 'Yes') {
        countField.value = 1;   //assign the '1' value  
        countField.disabled = true;  // disable input so the user cannot edit it
      } else if (barcodeField.value === 'No') {
        countField.type = "number";   // set the number type to the input so the user can type only numbers
        countField.min = "0";        //set the min allowded value to enter
        countField.setAttribute("oninput", "validity.valid || (value='')"); //validate input so the input is replaced by the empty string if the user enters not allowded values
      }
    });
  });
  
</script>

 

Since you use Rules,  there can be some nuances with custom code.

Feel free to update this thread if the code does not work. 

[RonAnderson]

Hi Coopper, again, thanks for a speedy reply.

The Barcode field is a Cascading Textfield (See screenshot Barcode Field Configuration.png attached). The feed into the Barcode field is from a table (HVAC_Data_Table). I've attached a screenshot showing the column holding the "Yes" or "No" values for Barcode. When the user selects the the Item and Type (Screenshot UserInterface.png) the Barcode value (Yes or No) is looked up in the HVAC_Data_Table (Screenshot Barcode Lookup.png) 

I followed your instructions to add the code to the footer. I also deleted my old code to make sure I wasn't interfering with your code... but unfortunately it didn't work. 

Now that you know it's a Cascading Textfield and not a Cascading Autocomplete, will this alter the code?

Again, thanks so much for your help, I genuinely appreciate it.

 

Barcode Field Configuration:-

 

Barcode Lookup:-

 

UserInterface:-

[RonAnderson]

Hi Coopper, I've studied the code you've supplied and got it to almost work by removing two of the "=" from this line:-

if (barcodeField.value === 'Yes') {

To make it:-

if (barcodeField.value = 'Yes') {

When selecting an item & Type which needs a barcode, the value 1 is forced into the Count field and it can't be changed. However, when I enter a barcode to the Barcode ID field the barcode entered is changed to "Yes" when I exit the Barcode ID field. I've attached screenshots of the Before Exit and After Exit. I can't see anything in the code which would do that so I'm going to check my work to see if there's a connection.

Does this mean we're close to a solution? I really hope it does.

Thanks again,

Ron

 

 

[CoopperBackpack]

Hello @RonAnderson,

Please note that in JavaScript the '=' sign is used to assign some value, but to compare values we need to use '==' or '==='.

So, the behavior you reported should be related to the '=' sign (barcodeField.value = 'Yes').

As for the  Cascading Text form element it should work in the same way as Cascading AutoComplete. 

I assume that the code doesn`t work due to the Rules.

As an option, you may export the DataPage from your account and provide me with a file in a private message so I can test the code directly on your DataPage.

[RonAnderson]

Hi Coopper, now I understand (partly) the use of "=" I'm going to reduce the guess work as much as possible by disabling all of the rules and reintroduce them one by one to see when there's any impact. If you don't mind I'll get back to you with my results?

Best regards

Ron

[autonumber]

Hi @RonAnderson, can you try this code below? 

<script type="text/javascript">
document.addEventListener('DataPageReady', function (event) {
document.querySelector("[id*='InsertRecordField1']").addEventListener('keyup', function() {
if(document.querySelector("[id*='InsertRecordBarcode']").value == "Yes"){
document.querySelector("[id*='InsertRecordCount']").value = "1"
}else{
document.querySelector("[id*='InsertRecordCount']").value = ""
}
});
});
</script>

 

[RonAnderson]

Hi and thanks for your input. Unfortunately it didn't co-operate. I changed the  section of code from 'InsertRecordField1' to 'InsertRecordBarcode_ID' but still no success. For the last day or so I've been manipulating the code you provided and achieved a small amount of success but not fully to what I'm after. I know very little of Javascript so please bear with me. The code I have now is:-

<script type="text/javascript">
document.addEventListener('DataPageReady', function (event) {
document.querySelector("[id*='InsertRecordBarcode_ID']").addEventListener('mousemove', function() {
if(document.querySelector("[id*='InsertRecordBarcode']").value === "No"){
document.querySelector("[id*='InsertRecordCount']").value = "";
document.querySelector("[id*='InsertRecordCount']").disabled = false;
}else{
document.querySelector("[id*='InsertRecordCount']").value = "1";
document.querySelector("[id*='InsertRecordCount']").disabled = true;
}
});
});
</script>

If the Barcode field contains "Yes" then the Count field will show a value of 1 and will be disabled after I move the mouse over the Barcode_ID field. This is perfect. The problem is if I change the asset Type and Item descriptions (Both cascading textboxes) and this produces "No" in the Barcode text field, the Count box remains disabled with the value 1 locked in. The events I've tried are keyup, keydown, click etc.

Any help you can give me is genuinely appreciated.

[futurist]

Hi @RonAnderson,

I don't think the EventListener you currently have is gonna fire when the Barcode produces No because since this No is produced by the value in Type and Item Description, this "No" value is not produced by either clicking, typing, or moving the mouse over the Barcode field, if that makes sense. This "No" is caused by something else. Not sure if youve already tried the "change" event, but this might work because this "listens" to every change that occurs within the Barcode field, even if that change is triggered by some other field. As long as it changes from its previous value, then that event listener should trigger.

 

Hope that wasnt confusing, but you can read more about it here: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event

[RonAnderson]

Hi Futurist and thanks for taking the time to get back to me. The mechanics are:

1. Select a Item and Type. This is part of a lookup which  has a field "Barcode", in a table, which contains only "Yes" or "No". It's this value which populates the "Barcode" textbox. 

2. When an event takes happens at the Barcode_ID field (like mouseover, change, click etc) this triggers the check at the Barcode textbox. If the value at Barcode is "Yes" then a count of 1 populates the "Count or Area" textbox and it disables the "Count or Area" textbox so the value of 1 cannot be altered. This is because barcodes are unique and 2 or more items cannot share the same barcode.

3. The "Barcode_ID" EventListener is used because if the value of "Yes" is produced then the Barcode_ID becomes visible and mandatory meaning the user MUST move the mouse or make a click into the "Barcode_ID" textfield. If the user enters a value of say 25 into the "Count or Area" text field and then proceeds to enter the actual barcode into Barcode_ID, the Event Listener will replace the 25 with a 1.

This works really well. However, if the user has made a mistake and changes the "Type" and "Item" this could enter a "No" to the Barcode textfield. And here's the problem the EventListener doesn't change the status of disabled and it retains the value 1 in the "Count or Area but the "Barcode_ID" correctly becomes hidden. In a "No" state the value at "Count or Area" could be any positive numeric value ie. any number greater than 0.

I've tried the change event too and it works in the same way as mouseover etc.

I hope that makes more sense and gives a better understanding of what I'm trying to achieve.

I'm really grateful for your attention and help on this

[futurist]

Hi @RonAnderson,

could you perhaps share your DataPage so I could further visualize how it  behaves?

[RonAnderson]

I've turned off authentication so you should get unchallenged access.

If you select "M&E" at [Asset Group Type].

Then select "Chilled Water Systems" at [Item]

Then select "Chiller - Air Compressor" at [Type]. This is at the top of the list so should be the default.

The form will open up and you'll see the Barcode ID, Count and Barcode textboxes near the bottom of the "2. Assets Details" section. The Barcode will be populated with "Yes" which sets up the eventListener. Please remember that the Barcode box will normally be hidden.

The click event has been used on the Barcode ID box. This event will place a 1 into the Count textbox.

I've been looking at this all day and still can't get it to do what I need. On testing it now turns out that when I submit, the count box get emptied, which is clearly wrong.

Looking forward to hearing from you again

[CoopperBackpack]

Hello @RonAnderson,

I think I understand why the code does not work.

You mentioned that you have Barcode_ID and Barcode fields, so the more reliable way to select the Barcode field is to select it by the 'name' attribute.

Also, since the user can change the value in other fields and the Barcode value can be changed from Yes to No or from No to Yes I added a couple of lines of code.

Please test this one:

<script>
document.addEventListener("DataPageReady", function (event) {
    let barcodeField = document.querySelector('[name="InsertRecordBarcode"]');
    let countField = document.getElementById("InsertRecordCount");
  
    barcodeField.addEventListener("change", function () {                          
      if (barcodeField.value == 'Yes') {
        countField.value = 1;
        countField.disabled = true;
      } else if (barcodeField.value == 'No') {
        countField.type = "number";
        countField.min = "0";
        countField.setAttribute("oninput", "validity.valid || (value='')"); 
        countField.value = "";
        countField.disabled = false;
      }
    });
  });
  
</script>