You are viewing limited content. For full access, please sign in.

Question

Question

Show field on all pages

asked on November 3, 2017

I recently upgraded to Forms 10.2 and I am using the integrated pagination and it is working great.  A feature I’m looking for is to show a field or group of fields (maybe a section) at the top of every page.  Is this possible natively or via JavaScript?  

Your help is much appreciated!  

Nate

0 0

Answer

SELECTED ANSWER
replied on November 7, 2017

What you need to do is that every time when you change the page, add the field/group to current page. In this way, you only keep one copy of the actual field/group, but it shows on every current page you are on. We need following steps:

 

1. first add the designated field/group to the top of the first page in the Layout tab.

 

2. we will add a function that achieves the functionality to move current field/group to the target page. Get the ids of the field/group you added in the first step, you can find the ids in the forms Designer, CSS and Javascript tab, as the screenshot below

1) if you are moving a field to a page, then following script should work, replace q1 in the script with the id of your designated field.

  var moveToPage = function(curPage) {
    // make sure current page doesn't already has the element
    if (curPage.find('#q1').length <= 0){
    	var ele = $(curPage).find('.cf-section-block ul');
      	if (ele.length > 0) {
       		// append the element to this page inside the first section
        	$('#q1').prependTo(ele[0]);
      	} else {
       		// append the section container if the container doesn't exist
        	$("<div class='cf-section-block' readonlysection='false'></div>").prepend($('<ul></ul>').prepend($('#q1'))).prependTo($(curPage));
      	}
    }
  }

2) if you are moving a bunch of fields, define a variable to contain all the field ids, such as listOfIdsToMove below, then use a loop to add the elements.

  var listOfIdsToMove = ['q1', 'q5'];
  
  var moveToPage = function(curPage) {
  	// make sure current page doesn't already has the element
    if (curPage.find('#' + listOfIdsToMove[0]).length <= 0){
    	var ele = $(curPage).find('.cf-section-block ul');
      	if (ele.length > 0) {
       		// append the element to this page inside the first section
          	listOfIdsToMove.forEach(function(id) {
				$('#' + id).prependTo(ele[0]);
          	});
      	} else {
       		// append the section container if the container doesn't exist
          	var ulEle = $('<ul></ul>');
          	listOfIdsToMove.forEach(function(id) {
            	    $('#' + id).prependTo(ulEle);
	        });
        	$("<div class='cf-section-block' readonlysection='false'></div>").prepend(ulEle).prependTo($(curPage));
      	}
    }
  }

3)if you are moving a section with all the wanted fields inside, then it's much easier, replace the q6 in the script with your designated section id. 

  var moveToPage = function(curPage) {
    // make sure current page doesn't already has the element
    if (curPage.find('#q6').length <= 0) {
    	$('#q6').prependTo(curPage);
    }
  }

3. Now we need to trigger the function in step 2 when we clicking on either the Previous or Next button, or the page tabs. So we just find the target page, and then pass the page to the function we defined in step 2.

1) registering the event for the buttons

  // move elements to page by clicking buttons
  $(".cf-next-btn, .cf-prev-btn").on("click", function (event) {
    var oldTab = $($(event.target).parents(".cf-page"));
  	var curPage = $('#' + ($(event.target).hasClass("cf-next-btn") ? $(oldTab.nextAll(".cf-page:not(.hidden)")).attr("id") : $(oldTab.prevAll(".cf-page:not(.hidden)")).attr("id")));
  	moveToPage(curPage);
  });

2) registering event when clicking tabs

  // move elements to page by clicking tabs
  $('.cf-pagination-tabs li').on('click', function (event) {
    var curPage = $('#' + $(event.currentTarget).attr("page"));
    moveToPage(curPage);
  });

 

So maybe you wanna try below script for section, if you wanna show a field or a bunch of random fields, just replace the function with the according one in step 2.

$(document).ready(function(){
  var moveToPage = function(curPage) {
    // make sure current page doesn't already has the element
    if (curPage.find('#q6').length <= 0) {
    	$('#q6').prependTo(curPage);
    }
  }

  // move elements to page by clicking buttons
  $(".cf-next-btn, .cf-prev-btn").on("click", function (event) {
    var oldTab = $($(event.target).parents(".cf-page"));
  	var curPage = $('#' + ($(event.target).hasClass("cf-next-btn") ? $(oldTab.nextAll(".cf-page:not(.hidden)")).attr("id") : $(oldTab.prevAll(".cf-page:not(.hidden)")).attr("id")));
  	moveToPage(curPage);
  });
     
  // move elements to page by clicking tabs
  $('.cf-pagination-tabs li').on('click', function (event) {
    var curPage = $('#' + $(event.currentTarget).attr("page"));
    moveToPage(curPage);
  });
});

 

Let me know if you run into any issues or have more questions.

1 0
replied on November 8, 2017

This worked great.  Thank you.  

0 0
replied on June 27, 2018

There is so much good stuff here, Ming Tan!

Can you help me figure out how to make the my last page (tab) the "target" page when my process is at a certain Step ID?  I only know enough about Javascript to be stupid/dangerous (depending on your definition), so I've pieced together how to find the Step ID and use the "IF" function, but I can't figure out what I need to set my target. 

Here's what I've got so far: 

$(document).ready(
function() { 
  if($('input[name="stepid"]').val() =="53") {
	 $('#q12')..../*now what?*/;
  }
});

Thank you so much for your help! 
 

0 0

Replies

replied on January 10, 2019

Hi Ming,

Thanks for the JQuery. I just came across another scenario though.

If a user clicks an action button without filling in a required field, Forms automatically navigates the user to the field. If the required fields is on another page then the jQuery is not triggered as we have not accounted for this.

Is there a rule/event we can add to capture this?

Thanks,

Dom

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.