Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Next »

Panels may be used to group information on a form.  Depending the form and use case, it may be desirable to "collapse" a panel, allowing the user of the form to minimize the number of fields and/or data viewable.  For example, a form with many logical sections might use panels to contain the form elements for each section, and the user can expand and collapse sections as they move through the form.  

This demo form illustrates panels that work this way.  The caret character in the top right corner of each panel can be used to expand and collapse it.

Implementation

Setting up collapsing panels on a form does involve a small amount of Javascript and CSS.  Once your GlobalForms system is setup to support it, adding collapsing panels is very straightforward.

  1. Create a new CSS file on your server called PanelStyles.css.
  2. Add the following CSS to the file, and save it to the GlobalForms\client\dist\view folder on the server.

    PanelStyles.css
    .clickable{
        cursor: pointer;   
    }
    
    .panel-heading span {
    	margin-top: -20px;
    	font-size: 15px;
    }
  3. Create a new Javascript file on your server, called panleLogic.js.

  4. Add the following Javascript to the file, and save it to the GlobalForms\client\dist\view folder on the server.

    panelLogic.js
    jQuery(document).ready(function(){
    	jQuery(".panel-body-open .panel-heading").append("<span class='pull-right clickable'><i class='glyphicon glyphicon-chevron-up'></i></span>");
    	jQuery(".panel-body-closed .panel-heading").append("<span class='pull-right clickable panel-collapsed'><i class='glyphicon glyphicon-chevron-down'></i></span>");
    	jQuery(".panel-body-closed .panel-body").addClass('collapse'); //Collapse specific panels by default.
    });
    
    
    jQuery(document).on('click', '.panel-heading span.clickable', function(e){
    	var $panel = jQuery(this);
    	if(!$panel.hasClass('panel-collapsed')) {
    		$panel.parents('.panel').find('.panel-body').slideUp();
    		$panel.addClass('panel-collapsed');
    		$panel.find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
    	} else {
    		$panel.parents('.panel').find('.panel-body').slideDown();
    		$panel.removeClass('panel-collapsed');
    		$panel.find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
    	}
    })
    
    
    
    
  • No labels