Forum Discussion

PatrickDunn's avatar
PatrickDunn
Qrew Assistant Captain
5 years ago

Magic Button - Open form to specific tab?

Hello. Is it possible via magic button to open a form to a specific tab therein (i.e. form tab, not browser tab)? Thanks!

10 Replies

  • There might be some easier solution available. Not sure whether this will be helpful, but this is what I did to find an alternate solution to this problem. 
    I moved the information that I needed to show under a tab in a form of a project to a separate table and had it show up in the tab as an 'embedded report' from the other table. E.g., I have a tab called 'documents' in a project's form and it lists (rather, pulls an 'embedded report') all the documents uploaded to QB related to a project from a separate table called 'documents' within the QB application.
    I created a button on my dashboard with a direct link to that report from the other table.
    In essence, when you click on the button it doesn't take you to the tab, but takes you to the source from where the information is pulled to show up under the tab.
    Hope I am making sense.
  • I have not found a way to do this; and I know you are not the first person to ask.

    If, however, you choose not to use TABS, and instead use Section Headings; there is a way to anchor a text element in each Section of a Form and then be able to redirect to a Form and have the form place the view at that anchored section (see portion of this post after the ***).

    There are probably other techniques; and these days I personally prefer the TAB form layout better than one long scrollable Form.

    I also do not recommend building multiple-forms, and being able to navigate to a customized form, just to provide the user a one-less-click experience; as this is a lot more work for an Admin to maintain.

    **********
    At the top of your Form Layout, insert a new row and select the form element Text.

    Then, in your Text Item Properties text: box put:

    <p id="top" style="display: block; position: relative; top: -120px; visibility: hidden;"></p>

    <a href="#nameOfYourSection" class="Vibrant Primary" style="font-weight: bold">Button Label Name</a>

    <a href="#DifferentSectionName" class="Vibrant Primary" style="font-weight: bold">Button Label Name</a>


    Then create another Form Element of Text and place it directly underneath a Section Heading form element.  In the Text Item Properties text: box put:

    <p id="nameOfYourSection" style="display: block; position: relative; top: -120px; visibility: hidden;"></p><a href="#top">^ Top</a>


    You can place these throughout your form and have a corresponding button at the top of your form to easily navigate longer forms.  This was how I would do it before TABS came into the platform.

    Remember to make sure the id is the exact same name as the href="# name value that you use at the top of the form (no spaces allowed).  i.e.  #contacts will have an id="contacts"

    You can then put these anchors in your form and make the navigation easier for Users inside a form as well as append to a URL the #anchor point when redirecting.

    To add an anchor point to the end of a redirect add the "#idNameHere" in your URL.

    Example URL output:
    https://laurahillier.quickbase.com/db/bh74wc3me?a=dr&rid=9182#contacts










    • BarryDolan1's avatar
      BarryDolan1
      Qrew Member
      I set this up how you described and all it does is move the tab page up, if you are on that tab. It does not show another tab.

      The problem I'm having is when using a tablet (with desktop site on) the tabs on my form are way too long. My users aren't savvy enough to know that they have to click on the tiny black arrow to make the tabs scroll right just a couple at a time. This gets annoying, to say the least, to have to  explain this over and over, that yes, you have to keep tapping on the tiny arrow until you see the tab you want. And frankly, it's annoying to have to tap on the tiny arrow anyway.

      I was intrigued by your solution and thought that having an array of magic buttons to tap on would work, only to find out that it doesn't. What I want seems simple in theory; tap on a button to display a specific tab. Is there anything you can suggest that corrects your initial solution?

      ------------------------------
      Barry Dolan
      ------------------------------
      • MarkShnier__You's avatar
        MarkShnier__You
        Icon for Qrew Legend rankQrew Legend
        A few years ago there was fairly intense discussion on this forum about whether it was possible to make a button to go to a particular tab.

        Nobody was able to crack that nut. I think it would take some enhancements on the QuickBase side in order to allow us to specify a tab.

        ------------------------------
        Mark Shnier (YQC)
        Quick Base Solution Provider
        Your Quick Base Coach
        http://QuickBaseCoach.com
        mark.shnier@gmail.com
        ------------------------------
  • If you mouse over the tab you want to direct the user to and look at the link displayed in your status bar, you'll see a string at the end of the URL like #tab_t1
    Append that string to the URL in your magic button and it will open the form with focus on the selected tab. 
    • QuickBaseCoachD's avatar
      QuickBaseCoachD
      Qrew Captain
      @Shannon.  It would be amazing if your simple suggestion worked, but I could not get it to work.  Have you tested this?
    • BradLemke's avatar
      BradLemke
      Qrew Assistant Captain
      Referencing: https://community.quickbase.com/quickbase/topics/custom-buttons-for-tabbed-forms-save-next-tab-save-same-tab

      I've used a modified version of this how-to guide to create a 'Save Button' inside a form that modifies a couple of hidden fields, then saves all current changes, and then re-opens the form in a targeted tab.

      My (Formula Rich Text) button code is as follows:

      [CBSc1]
      & "Modified.JS"
      & [CBSc2]
      & [CBSt - SKW]
      & "Button Text"
      & [CBE]

      My variable codes are unchanged from the original, but listed as follows:
      • [CBSc2] - "));void(0);
      • [CBSt - SKW] - ' class='Vibrant Tall' style='font-size:14px; color:white; background:#6BBD57; white-space:nowrap;'>
      • [CBE] - </a>


      On my Modified.JS page:

      $("#_fid_10").val("Unlock");
      $("#_fid_11").attr("checked", true);
      var nextTabLink=$("li.ui-tabs-selected").next("[style!='display:none']").children("a");
      $("#saveAndKeepWorkingMenuOption").click();
      var noErrorDialog=$('#qbDialog').length==0;
      if( noErrorDialog ){
      $("#tab_t2_link a").click();
      location.assign('#navTop');
      };
    • BradLemke's avatar
      BradLemke
      Qrew Assistant Captain
      My absolute favorite aspect of this method is that has the ability to edit more fields in a single button press than the typical API_editrecord formula URL - because it's all done by backend script.  Introducing this has allowed me to trim down the number of form rules present in my primary data-entry form, which increases performance on many of my companies' older workstations.

      A couple drawbacks that I know of, at the moment: I have absolutely no idea how to set certain types of fields (User, in particular) using this method, nor am I aware of a method to modify the destination url (such as loading in Ifv=1).