Hide Next & Previous buttons on Certain Tabs

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

Viewing 9 reply threads
  • 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 1 year, 8 months 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.!

Viewing 9 reply threads
  • You must be logged in to reply to this topic.