Collapsing all or a few nominated Sections Collapsed

  • 0
  • 1
  • Question
  • Updated 2 years ago
  • Answered

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? 

Photo of Arshad Khwaja

Arshad Khwaja

  • 3,152 Points 3k badge 2x thumb

Posted 3 years ago

  • 0
  • 1
Photo of QuickBaseCoach App Dev./Training

QuickBaseCoach App Dev./Training, Champion

  • 67,760 Points 50k badge 2x thumb
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.
Photo of Blake Harrison - DataBlender

Blake Harrison - DataBlender, Champion

  • 100 Points 100 badge 2x thumb
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.
Photo of Arshad Khwaja

Arshad Khwaja

  • 3,152 Points 3k badge 2x thumb
Thanks. Could Ihave some help t set this up?
Photo of Blake Harrison - DataBlender

Blake Harrison - DataBlender, Champion

  • 100 Points 100 badge 2x thumb
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.
Photo of Arshad Khwaja

Arshad Khwaja

  • 3,152 Points 3k badge 2x thumb
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.
Photo of Arshad Khwaja

Arshad Khwaja

  • 3,152 Points 3k badge 2x thumb
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.
Photo of Arshad Khwaja

Arshad Khwaja

  • 3,152 Points 3k badge 2x thumb
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!
Photo of Patty

Patty

  • 0 Points
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?
Photo of Alex Wilkinson

Alex Wilkinson

  • 1,146 Points 1k badge 2x thumb
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.
(Edited)