Hide Next & Previous buttons on Certain Tabs

Forums Dynamic Forms for SharePoint Hide Next & Previous buttons on Certain Tabs

This topic contains 9 replies, has 2 voices, and was last updated by  Bryan R Babbitt 2 months ago.

  • Author
    Posts
  • #23355

    Bryan R Babbitt
    Participant

    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

  • #23370

    Alexander Bautz
    Keymaster

    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 2 months, 2 weeks ago by  Alexander Bautz. Reason: fixed code snippet
  • #23384

    Bryan R Babbitt
    Participant

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

  • #23499

    Bryan R Babbitt
    Participant

    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.

  • #23510

    Alexander Bautz
    Keymaster

    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

  • #23563

    Bryan R Babbitt
    Participant

    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”>

  • #23565

    Alexander Bautz
    Keymaster

    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

  • #23568

    Bryan R Babbitt
    Participant

    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:
  • #23579

    Alexander Bautz
    Keymaster

    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

  • #23591

    Bryan R Babbitt
    Participant

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

You must be logged in to reply to this topic.