JavaScript in webscreen

Hi all,

I am working on a function that when a user can multi-select checkboxes by holding the shift key. The first time I tried this functionality, it worked. But then I closed the modal then opened it again, the functionality is gone. I'd like to know how to fix this. I put the JavaScript code on the webscreen. Attached is the oml file. Please help me. 

PS working steps:

1. Click the Open Modal button

2. Select one checkbox as a start point

3. Press the shift key and hold

4. Select the last checkbox as an endpoint

Thank you.

MultiSelectCheckboxes.oml

mvp_badge
MVP
Solution

Hi Kay,

I also had the same observation while implementing the mentioned use case. One of the tweaks which you could do to make it work is...

  • Instead of defining the JQuery script in the Screen JavaScript section, you will have to define the same script in the expression widget (Escape Content set to No) within the Content container in the Modal
  • Cause for the issue: On the modal close button click, you call an Ajax refresh node that refreshes the content container, including the Table Record widget and the checkboxes for which the associated/registered event handler gets disassociated/detached.

@Ajay: Hi, instead of selecting the Table Header check box for bulk selection. Check any of the checkboxes in the table row (e.g. 2-row checkbox), and then by pressing the shift key, check any one of the consecutive checkbox with an interval (e.g. 5-row checkbox). As per the implementation, you will observe that the in-between check box (i.e. 3,4-row checkboxes) will get selected automatically due to the defined jQuery script.


See this sample screen CheckBoxSelectionJS

Refer to the attached updated .oml file


I hope this helps you!


Kind regards,

Benjith Sam

MultiSelectCheckboxes.oml

Hi Kay Macey,

Can you please elaborate what functionality you are trying to achieve in detail.

I tried opening the Modal, the following was my observation

  1. Select one checkbox as a start point - once first checkbox is selected it automatically enables all the checkbox
  2. Press the shift key and hold - Nothing happened
  3. Select the last checkbox as an endpoint - Only last checkbox got disabled

Regards

AJay A

mvp_badge
MVP
Solution

Hi Kay,

I also had the same observation while implementing the mentioned use case. One of the tweaks which you could do to make it work is...

  • Instead of defining the JQuery script in the Screen JavaScript section, you will have to define the same script in the expression widget (Escape Content set to No) within the Content container in the Modal
  • Cause for the issue: On the modal close button click, you call an Ajax refresh node that refreshes the content container, including the Table Record widget and the checkboxes for which the associated/registered event handler gets disassociated/detached.

@Ajay: Hi, instead of selecting the Table Header check box for bulk selection. Check any of the checkboxes in the table row (e.g. 2-row checkbox), and then by pressing the shift key, check any one of the consecutive checkbox with an interval (e.g. 5-row checkbox). As per the implementation, you will observe that the in-between check box (i.e. 3,4-row checkboxes) will get selected automatically due to the defined jQuery script.


See this sample screen CheckBoxSelectionJS

Refer to the attached updated .oml file


I hope this helps you!


Kind regards,

Benjith Sam

MultiSelectCheckboxes.oml

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.