Question

Pagination URL to a particular Tab

Forms How To

Updated March 3, 2022

asked on March 2, 2022 • Show version history

Hello,

We have created a dashboard for a group of sub departments within a larger organization and we are using pagination for the tabs. Is there a way to provide a particular link to each individual tab? So the Civil team as an example would click the link and it actually be on the Civil tab? I have done something similar for action buttons like https://yourcity.gov/Forms/form/new/37?Action=Create but I haven't been able to figure out how to do it for the tabs. Any help is greatly appreciated.

0 0

Answer

SELECTED ANSWER

replied on March 3, 2022 • Show version history

There may be other ways to do it, but this is one way.

1. Add a Single Line field with the Field Label, Variable, and CSS class all set to PageNum

2. Add Field rule to always hide the PageNum field

3. Add the following Javascript

$(document).ready(function(){
  // Function to select tab by PageNum value
  $('.PageNum').on('change',function() {
    // PageNum is a Zero based page number - First page = 0
    var iPageNum = $('.PageNum input').val();
    // Get all Page tabs
    var PageTabs = document.getElementsByClassName('cf-pagination-tabs')[0];
    // Get the Page tab to select
    var SelectedPage = PageTabs.getElementsByTagName('li')[iPageNum];
    // Select the Page tab
    SelectedPage.click();
  });
  // Trigger the PageNum Change event
  $('.PageNum').trigger('change');
});

Finally, use the following URLs

Planning = https://yourcity.gov/Forms/yourform?PageNum=0

Civil = https://yourcity.gov/Forms/yourform?PageNum=1

Building = https://yourcity.gov/Forms/yourform?PageNum=2

3 0

Question

Question

Pagination URL to a particular Tab

Answer

Replies

Sign in to reply to this post.