Versions Compared

Old Version 1

changes.mady.by.user Brian Banet

Saved on

compared with

New Version Current

changes.mady.by.user Brian Banet

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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.

Note
titleCollapsible

Note that some versions of GlobalForms do have a "Collapsable" option in the component's properties, but this option is not intended for the purposes outlined here and this component option should be ignored.

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.

    Code Block
    languagecss
    titlePanelStyles.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.

    Code Block
    languagejs
    titlepanelLogic.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');
	}
})



;


Enabling The Form

With the Javascript and CSS saved to the server, collapsing functionality can be added to any GlobalForms simply by adding references to the files.

  1. Add a new HTML Component to the top of the form and reference the CSS file.  The properties should look like this:

    Image Added

  2. Add a new HTML Component to the top of the form and reference the JS file.  The properties should look like this:

    Image Added

  3. Add a panel to the form.  Any panel that should have Collapse / Expand ability needs a value added to the Custom CSS Class property of the component.  Possible values are panel-body-closed or panel-body-open.  Use the appropriate class to identify the panels default state of open or closed.

    Image Added