Changes for page Form Builder

Last modified by Sachin Patil on 2024/08/30 07:28
From version 15.1
edited by Admin
on 2022/10/11 15:15
Change comment: There is no comment for this version
To version 16.1
edited by rijo
on 2022/12/07 06:21
Change comment: introduced heading for the Extra Script/Style sample code; introduced sample code for hidding options in form

Summary

Details

Page properties
Author
... ... @@ -1,1 +1,1 @@
1 -XWiki.Admin
1 +XWiki.rijo
Content
... ... @@ -500,10 +500,16 @@
500 500  
501 501  One use for these boxes is to add Javascript code to your form that will change the questions and/or question responses based on a user’s response to a question on the form.
502 502  
503 -**Code for altering responses based on select type demographics:**
503 += ADVANCED FORM TECHNIQUES: =
504 504  
505 +With Extra Scripts/Extra Styles, you can add features to your form or popup to enhance its look-and-feel as well as features.  Following are examples of how this can be achieved.
506 +
505 505  \\
506 506  
509 +**Example 1: Code for altering responses based on select type demographics:**
510 +
511 +\\
512 +
507 507  **Example:** If a form contains a question which ask whether the user is a doctor or a patient. If the user selects doctor the demographic fields which are related to doctor will appear (type of specialty, NPI #, medical degree achieved, etc.). Otherwise, demographic fields for a patient will appear on the form. This modifications helps to show user only those demographic fields which are related to their previous answers.
508 508  
509 509  \\
... ... @@ -575,6 +575,59 @@
575 575  * removeInitial is assigned only once at the beginning of the script.
576 576  * All the code must be included in form extra script area.
577 577  
584 +**Example 2: Code for removing an option from the form**
585 +
586 +\\
587 +
588 +**Example:** A form contains a collection of questions.  If the need to get rid of a question or option, you may want to have it removed.  You can make this field invisible without changing anything else about the form, using the Extra Script option.  Without re-designing the form, we are able to remove the unwanted option by using the sample code below. 
589 +
590 +\\
591 +
592 +**Example Sample Code:**
593 +
594 +(% class="p1" style="" %)
595 +var removeId = document.getElementsByClassName("labelId");
596 +
597 +(% class="p1" style="" %)
598 +for(var i = 0; i < removeId.length; i++){
599 +
600 +(% class="p1" style="" %)
601 +if(removeId[i].innerText(% class="apple-converted-space" %)  (%%)== "RemoveMePlaceHolder"){
602 +
603 +(% class="p1" style="" %)
604 +removeId[i].parentNode.style.display="none";
605 +
606 +(% class="p1" style="" %)
607 +}
608 +
609 +(% class="p1" style="" %)
610 +}~/~/end of for loop
611 +
612 +\\
613 +
614 +**Steps:**
615 +
616 +* Initialize a variable to grab all the instances of the id from the form you want hidden. 
617 +** var removeId = document.getElementsByClassName("labelId");
618 +** removeId: name of variable (you can choose a name of your choice, but remember to be consistent with the use through the code)
619 +** labelId: replace this with the id of the field you want checked/removed
620 +** getElementsByClassName: property of javascript that allows you to get elements by the class name property
621 +* Traverse through the array of the gathered instances (of removeId), and check for the corresponding text by comparing the innerText property to  "RemoveMePlaceHolder"
622 +** removeId[i].innerText(% class="apple-converted-space" %)  (%%)== "RemoveMePlaceHolder" (check for matches)
623 +** RemoveMePlaceHolder: replace this with the text you want hidden
624 +* If a match is found, then grab its parentNode
625 +** removeId[i].parentNode
626 +** i is the index of the array where the match was found
627 +* Change the style of the parentNode to display it as none.  This keeps the field hidden in your forms.
628 +** removeId[i].parentNode.style.display="none";
629 +
630 +\\
631 +
632 +**Note:**
633 +
634 +* All the code must be included in form extra script area.
635 +* The code is to be inserted in the forms in which the value need not been shown or hidden
636 +
578 578  = DYNAMIC/PROGRESSIVE LOOK-UP: =
579 579  
580 580  This is a feature provided by ONECount.
Confluence.Code.ConfluencePageClass[0]
id
... ... @@ -1,1 +1,1 @@
1 -77496614
1 +77496616
url
... ... @@ -1,1 +1,1 @@
1 -https://info.onecount.net//wiki/spaces/OD/pages/77496614/Copy of New Form Builder
1 +https://info.onecount.net//wiki/spaces/OD/pages/77496616/Copy of New Form Builder