Discussions

Expand all | Collapse all

Collapsing all or a few nominated Sections Collapsed

  • 1.  Collapsing all or a few nominated Sections Collapsed

    Posted 08-31-2016 04:46

    As I have a fairly long form,  I would like to make it easier for users to look at the collapsed sections and then choose to expand the ones they want.    Is there an option to achieve this? 



  • 2.  RE: Collapsing all or a few nominated Sections Collapsed

    Posted 08-31-2016 10:00
    Using form rules, checkboxes and formula URL buttons it's possible to have buttons or checkboxes to show or hide sections.  But I have never heard of a way to expand / collapse a section other than by the native interface.


  • 3.  RE: Collapsing all or a few nominated Sections Collapsed

    Posted 09-02-2016 18:33
    You can inject script into the form that would override the CSS. I've done this and had it setup as an "accordion", where only one section is open at a time, but it's a little clumsy.


  • 4.  RE: Collapsing all or a few nominated Sections Collapsed

    Posted 09-02-2016 21:25
    Thanks. Could Ihave some help t set this up?


  • 5.  RE: Collapsing all or a few nominated Sections Collapsed

    Posted 09-07-2016 14:26
    It's a 2-step process to set this up, but thankfully both are pretty easy.

    Step 1 - Create a Code Page in your app called 'accordion.js' and insert the following code into that page:

    $(function(){

    $(".sectionDiv.expanded .sectionTitle").click();

    $(".sectionTitle:eq(0)").trigger('click');

    $(".sectionTitle").click(function(){

    var $self = $(this);

    $('.sectionTitle').each(function(){

    if($(this).is($self))return true;

    var $titleWrap = $(this).parent();

    var $divWrap = $titleWrap.parent();

    if($divWrap.hasClass('expanded')){

    $divWrap.removeClass('expanded').addClass('collapsed');

    $titleWrap.removeClass('expanded').addClass('collapsed');

    $titleWrap.find('.ToggleSectionIcon').removeClass('SectionExpandedIcon').addClass('SectionCollapsedIcon');

    $divWrap.find('.Divider').next().css('display','none');

    }

    });



    });

    });



    Step 2 - Create a Formula Text field, select the "Allow HTML" checkbox, and insert the following formula:
    "<img qbu=\"module\" src=\"/i/clear2x2.gif\" " & "onload=\"javascript:if(typeof QBU=='undefined'){QBU={};$.getScript('" & URLRoot() & "db/" & Dbid() & "?a=dbpage&pagename=accordion.js&rand='+Math.random())}\">"
    Now, just put that field at the top of your form and it will implement the accordion for your users.


  • 6.  RE: Collapsing all or a few nominated Sections Collapsed

    Posted 09-07-2016 21:33
    Thanks a lot Blake.  Other than the high level of your skill, this is quite straight forward.  I put in place. This seems all good but the last part where I have to place it in the form, not too sure if I got it right.  I placed it after the first section of the form.  But it appears only as a field. (I did allow HTML tags). What should I expect? A button that can be clicked or something else.  I named code as accordion in line with the formula.


  • 7.  RE: Collapsing all or a few nominated Sections Collapsed

    Posted 09-07-2016 21:47
    Sorry, I did not name it as js file.  It is all,  It is an amazing piece of work.   I am very grateful. Would you be kind enough to get in touch with me on akhwaja....@woolworths.com.au (just remove the dots pl).  I may have a proposition for you.


  • 8.  RE: Collapsing all or a few nominated Sections Collapsed

    Posted 09-07-2016 22:02
    One improvement that could be made is to leave top sections above where the field is placed to remain open to make it more useful. This way people can see some primary sections.  Secondly, if this remembers the settings of a record and applies to other records when scrolled.  Just an idea!


  • 9.  RE: Collapsing all or a few nominated Sections Collapsed

    Posted 01-07-2017 10:13
    I tried this and it works.  I does leave the very top section open.  My question is does the top of the form have to have the accordion.js  sitting there in view?  How can I hide that word?


  • 10.  RE: Collapsing all or a few nominated Sections Collapsed

    Posted 06-22-2017 13:49
    This works beautifully. One suggested improvement:
    • At the top of the form, just below the image-onload field (your Step 2), insert a section header with the title of the section left blank.
    • Within the untitled section, place a few fields that you want to be always-displayed, such as identifiers for the record or your default fields that show in all new reports.
    • In all other sections, be sure you have a section title.
    Quick Base automatically expands sections that have no title. Thus, your default or record-identifying fields always get displayed, and all other fields are shown or hidden by the user's choice to expand a section.