Open form on specific tab

Jump to solution

Inspired by Rhia Wieclawek‌ blog Targeting a Panel via URL (or: How to Idiot-Proof Notifications)

I have a form with tabs and panels etc.and I'd like to be able to open the form on a specific tab if the URL contains a query string. So an email is sent via workflow to a user and the link to the item is appended with a query string to open a specific tab on the form. 

In my mind, I should be able to use the choice controls default value to use the GetQueryString inline function to set the default value of the choice control and therefore the tab.

My query string is simply someform.aspx?ID=1&OpenTab=SalaryDetails

and then function in the default value of the tabs was just 


This doesn't seem to work though (yes one of the options in the Choice control is SalaryDetails).

Ultimately I'd want an If function in there as well to tell the form to open on the default tab if there is no query string (i.e. a new form or opened direct from the SharePoint list. Something like this...

fn-If(fn-IsNullOrEmpty(fn-GetQueryString(OpenTab)),"Employee Information",fn-GetQueryString(OpenTab))

If anyone has any suggestions as to where I'm going wrong, I'd appreciate it.

4 Replies

Re: Open form on specific tab

Jump to solution

your question seems to me to be very similar to this one


0 Kudos

Re: Open form on specific tab

Jump to solution

Ryan Greenaway

This should sort it for you

Choice field on the form with a display format of Options buttons and Render as buttons set to Yes. Add a Client ID Javascript variable name, this instance varButtons.

Then i have my panels set up as required using the formula buttons!="Option1", hide etc

Then i added this javascript code to load the form to the correct tab based on the querystring of &OpenTab=OptionX where X is the tab you want

NWF.FormFiller.Events.RegisterAfterReady(function () {
    NWF$(document).ready(function () {
        //if url contains a querystring paramater of OpenTab
        if ("OpenTab") > -1) {
            //Run function getParameterByName to get value of OpenTab
            var qsValue = getParameterByName('OpenTab');
            // the buttons object
            var rad = NWF$('#' + varButtons);
            //set tabNumber to 0
            var tabNumber = 0;
            //ensure checked = false
            rad.prop('checked', false);
            //foreach input option
            rad.find('input').each(function () {
                //increment tabNumber
                //if input value == querystring value
                if (this.value == qsValue) {
                    //check th correct radio button
                    NWF$(':radio[value="' + qsValue + '"]').attr('checked', true);
                    //remove class from buttons
                    NWF$('#' + varButtons).find('span').find('label').removeClass('ui-state-active');
                    //add active class to correct button
                    NWF$('#' + varButtons).find('span:nth-of-type(' + tabNumber + ')').find('label').addClass('ui-state-active');
            //ensure rules are fired after javascript update
            NWF.FormFiller.Functions.ProcessOnChange(NWF$('#' + varButtons));

//get querystring parameter function
function getParameterByName(name, url) {
    if (!url) {
        url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
    results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));

This is my result

I'm sure the code will need some tweaking for your requirement but i think it should set you on the right road.

Let me know how you get on


View solution in original post

0 Kudos

Re: Open form on specific tab

Jump to solution

Thanks ‌. Great solution. You'll go far young man.

I've missed that dark blue strip across the top of my screen.


Re: Open form on specific tab

Jump to solution

Hi Paul, 


This is what i am looking for and your solution is great but i cannot switch the tabs(other tabs are not selectable). how can i look other tabs content?, i mean, if i open option 2 as default tab Option 1 and Option 3 are not selectable. 


Thank you in Advance

0 Kudos