Hide Next & Previous buttons on Certain Tabs

[Bryan R Babbitt]

Hi Alex,

I have been trying to hide the Next and Previous button on certain tabs. I also have a redirect set up on the New form to redirect to the Edit form in which I have added a Preview button. I have set these up using the options within DFFS.

However, I want to hide the “Preview” button all tabs except the last available. I want to hid the Next Button on the Last Tab available. In addition, on the first available tab, I want to hide the Previous button.

I am having the hardest do this. I have tried using Case statements and if statements but with only partial achievement. Currently I have a 5 tabs on the New form and 7 on the Edit with a couple of those tabs hidden based on values.

Can you help me with this issue? I tried using the 1 solution found in the forum, but again, I didn’t have much luck implementing it.

here is a snippet of some of the code I am trying use…

function hideButtons(tab){
if (tab == 0 ) {
jQuery(“input[value*=’Previous’]”).css(‘display’,’none’)
jQuery(“#TTDD”).val(jQuery(“#TTDD1”).val())
} else {
jQuery(“input[value*=’Previous’]”).css(‘display’,’block’)
} //end if
if (tab == 1 ) {
jQuery(“#TTDD1”).val(jQuery(“#TTDD”).val())
}
if (tab == 3) {
jQuery(“input[value*=’Next’]”).css(‘display’,’none’)
} else {
jQuery(“input[value*=’Next’]”).css(‘display’,’block’)
} //end if
} //end function
——

Here is case statement that I tried…

function hideButtons(tab) {

switch (tab) {
case ‘0’: //Incident Details
//Hide Previous Show Next

jQuery(“input[value*=’Previous’]”).css(‘display’, ‘none’);
jQuery(“input[value*=’Next’]”).css(‘display’, ‘block’);
//Sync Timezone with time tracking page
jQuery(“#TTDD”).val(jQuery(“#TTDD1”).val());
break;
case ‘1’: //Time Tracking
//Show Previous Show Next
jQuery(“input[value*=’Previous’]”).css(‘display’, ‘block’);
jQuery(“input[value*=’Next’]”).css(‘display’, ‘block’);
//Sync with Incident Details
jQuery(“#TTDD1”).val(jQuery(“#TTDD”).val());
break;
case ‘2’: //SIR CBLs
//Show Previous Show Next
jQuery(“input[value*=’Previous’]”).css(‘display’, ‘block’);
jQuery(“input[value*=’Next’]”).css(‘display’, ‘block’);
break;
case ‘3’: //Impact Matrix
//If FFC is required, show Previous and Next, otherwise only show Previous
jQuery(“input[value*=’Previous’]”).css(‘display’, ‘block’);

if (getFieldValue(“FullFormCommunicationRequired”) == “Yes”) {
jQuery(“input[value*=’Next’]”).css(‘display’, ‘block’);
} else {
jQuery(“input[value*=’Next’]”).css(‘display’, ‘none’);
}
break;
case ‘4’: //Admin
//Show Previous Show Next
jQuery(“input[value*=’Previous’]”).css(‘display’, ‘block’);
jQuery(“input[value*=’Next’]”).css(‘display’, ‘block’);
break;
case ‘5’: //Turnover
//If FFC is required, show Previous and Next, otherwise only show Previous

jQuery(“input[value*=’Previous’]”).css(‘display’, ‘block’);
if (getFieldValue(“FullFormCommunicationRequired”) == “Yes”) {
jQuery(“input[value*=’Next’]”).css(‘display’, ‘block’);
} else {
jQuery(“input[value*=’Next’]”).css(‘display’, ‘none’);
}
break;
case ‘6’: //Full Form Communication
//Show Previous Show Next
jQuery(“input[value*=’Previous’]”).css(‘display’, ‘block’);
jQuery(“input[value*=’Next’]”).css(‘display’, ‘block’);
break;
case ‘7’: //ait tab
//Show Previous Show Next
jQuery(“input[value*=’Previous’]”).css(‘display’, ‘block’);
jQuery(“input[value*=’Next’]”).css(‘display’, ‘none’);
break;
case ‘8’: //ait tab
//Show Previous Show Next
jQuery(“dffs_navTabBtn_next input [value=’Previous’]”).css(‘display’, ‘block’);
jQuery(“dffs_navTabBtn_next input [value=’Next’]”).css(‘display’, ‘none’);
break;
} //end switch
} //end function

[Alexander Bautz]

Hi,
Try it like this:

var selectedTab;
setInterval(function(){
    var st = spjs.dffs.data.selectedTab;
    if(st !== selectedTab){
        selectedTab = st;
        // First tab
        if(st === Number(jQuery(".tabBase:visible:first").attr("tabindex"))){
            // Hide prev tab
            jQuery("#dffs_navTabBtn_prev").hide();
        }else{
            // Show prev tab
            jQuery("#dffs_navTabBtn_prev").show();
        }
        // Last tab
        if(st === Number(jQuery(".tabBase:visible:last").attr("tabindex"))){
            // Hide next tab
            jQuery("#dffs_navTabBtn_next").hide();
            // add your Preview button "show" code here
        }else{
            // Show next tab
            jQuery("#dffs_navTabBtn_next").show();
            // add your Preview button "hide" code here
        }
    }
},100);

Hope this gets you started – let me know how it works out.

Alexander

• This reply was modified 5 years, 3 months ago by Alexander Bautz. Reason: fixed code snippet

[Bryan R Babbitt]

Thanks Alex! I’ll give it a shot a let you know.

[Bryan R Babbitt]

Hi Alex,
well I gave it a shot and I guess I didn’t do something right because I still couldn’t get it to work. Do I need to change any parts of your example code?

Sorry, still learning about how all this works.

Thanks again sir.

[Alexander Bautz]

You shouldn’t have to change anything in the snippet, but which version of DFFS are you running? – I don’t recall exactly, but I think I might have added the ID on the back and forward buttons in a later version. You can right click one of them and select “Inspect” and see if you find the ID attribute in the HTML code show in the developer console.

Alexander

[Bryan R Babbitt]

Hi Alex,

I have version Dynamic Forms for SharePoint DFFS Backend v4.4.3.47|CSS version: 4.43 / 4.43|spjs-utility version: 1.323.

<input class=”ms-ButtonHeightWidth” id=”dffs_navTabBtn_next” style=”display: block;” onclick=”spjs.dffs.navTab(1);” type=”button” value=”Next”>

or

<input class=”ms-ButtonHeightWidth” id=”saveAndStayInFormBtn” style=”margin-right: 4px;” onclick=”spjs.dffs.saveAndStayInForm();” type=”button” value=”Preview/Save”>

[Alexander Bautz]

Your version looks good and there is no reason the code should not work, but you must insert your own code where I have written “// add your Preview button “hide” code here” and “// add your Preview button “show” code here”.

You can add a console.log (or an alert if you like) here to ensure the code runs:

var selectedTab;
setInterval(function(){
    var st = spjs.dffs.data.selectedTab;
    if(st !== selectedTab){
        selectedTab = st;
console.log("Selected tab: " + st);
// or use alert
        // First tab
        if(st === Number(jQuery(".tabBase:visible:first").attr("tabindex"))){
            // Hide prev tab
...
...

Alexander

[Bryan R Babbitt]

Hi Alex,
I was able to get your snippet of code to work and it worked well! Thanks! However, the issue I had was that my end Tab isn’t always the same. I have a couple of hidden tabs that show based off a radio button on the first tab. So with that, I reverted back to one of my original code snippets. I actually have it working exactly like I want (I think) except for one thing… It only works properly when I click the tabs. If I use the buttons, or change an option on a radio button, it adds back buttons that that should be hidden. Can you possibly adjust this to also work when the user uses the buttons to got the next or previous page?
I have attached a couple of screen shots as well. I can get the buttons to reset the way they should be by just clicking the tab at the top.

Oh, the runFun function is set to run when the tabs change.

Thank you for all your help with this!

Attachments:

1. 

   ss1.png
   

2. 

   ss2.png
   

[Alexander Bautz]

The code snippet I posted on January 7 runs on an interval, but only triggers when you change tabs. You can get it to detect new tabs being shown by your rules if you remove this line:

if(st !== selectedTab){

If you do, I suggest changing the interval (last line) from 100 to maybe 500.

Try it and see if it helps.

Alexander

[Bryan R Babbitt]

Thank you! With a couple added if statements, I was able to this to work exactly like I wanted.!

[Author]

Posts