Catalog Item Sections

Add sections to your catalog item

Screenshot

View fullsize

Code

CATALOG ITEM

Name: Catalog Item Section

Variables:
Type | Question | Name |Order
Single Line Text	Current section | current_section | 0 
Macro	| Catalog Item Section Widget	| catalog_item_section | 0 | Widget: Catalog Item Section
Single Line Text | Variable 1 | variable_1 | 1
Single Line Text | Variable 2 | variable_2 | 2
Single Line Text | Variable 3 | variable_3 | 3
Single Line Text | Variable 4 | variable_4 | 4
Single Line Text | Variable 5 | variable_5 | 5
Single Line Text | Variable 6 | variable_6 | 6
Single Line Text | Variable 7 | variable_7 | 7
Single Line Text | Variable 8 | variable_8 | 8
Single Line Text | Variable 9 | variable_9 | 9
Single Line Text | Variable 10 | variable_10 | 10

Catalog Client Script

Name: Initial Section

UI Type: All
Type: onLoad
Script:
function onLoad() {
	g_form.setDisplay('current_section', false);
	//Section 1
	g_form.setDisplay('variable_1', true);
	g_form.setDisplay('variable_2', true);
	//Section 2
	g_form.setDisplay('variable_3', false);
	g_form.setDisplay('variable_4', false);
	//Section 3
	g_form.setDisplay('variable_5', false);
	g_form.setDisplay('variable_6', false);
	//Section 4
	g_form.setDisplay('variable_7', false);
	//Section 5
	g_form.setDisplay('variable_8', false);
	//Section 6
	g_form.setDisplay('variable_9', false);
	g_form.setDisplay('variable_10', false);
}

Name: Section Change

UI Type: All
Type: onChange
Script:
function onChange(control, oldValue, newValue, isLoading) {
	if (isLoading || newValue == '') {
		return;
	}
	g_form.setDisplay('variable_1', false);
	g_form.setDisplay('variable_2', false);
	g_form.setDisplay('variable_3', false);
	g_form.setDisplay('variable_4', false);
	g_form.setDisplay('variable_5', false);
	g_form.setDisplay('variable_6', false);
	g_form.setDisplay('variable_7', false);
	g_form.setDisplay('variable_8', false);
	g_form.setDisplay('variable_9', false);
	g_form.setDisplay('variable_10', false);
	if (newValue == 1) {
		g_form.setDisplay('variable_1', true);
		g_form.setDisplay('variable_2', true);
	}
	if (newValue == 2) {
		g_form.setDisplay('variable_3', true);
		g_form.setDisplay('variable_4', true);
	}
	else if (newValue == 3) {
		g_form.setDisplay('variable_5', true);
		g_form.setDisplay('variable_6', true);
	}
	else if (newValue == 4) {
		g_form.setDisplay('variable_7', true);
	}
	else if (newValue == 5) {
		g_form.setDisplay('variable_8', true);
	}
	else if (newValue == 6) {
		g_form.setDisplay('variable_9', true);
		g_form.setDisplay('variable_10', true);
	}
}

Widget

Name: Catalog Item Section

HTML


<div>
  <div class="btn-group btn-breadcrumb" >
    <a ng-click="c.setSection1Visible()" class="btn btn-default"><i class="glyphicon glyphicon-home"></i></a>
    <a ng-click="c.setSection1Visible()" class="btn btn-default">Section 1</a>
    <a ng-click="c.setSection2Visible()" class="btn btn-default">Section 2</a>
    <a ng-click="c.setSection3Visible()" class="btn btn-default">Section 3</a>
    <a ng-click="c.setSection4Visible()" class="btn btn-default">Section 4</a>
    <a ng-click="c.setSection5Visible()" class="btn btn-default">Section 5</a>
    <a ng-click="c.setSection6Visible()" class="btn btn-default">Section 6</a>
  </div>
</div>


CSS


.btn-breadcrumb .btn:not(:last-child):after {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
  border-left: 10px solid white;
  position: absolute;
  top: 50%;
  margin-top: -17px;
  left: 100%;
  z-index: 3;
}
.btn-breadcrumb .btn:not(:last-child):before {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
  border-left: 10px solid rgb(173, 173, 173);
  position: absolute;
  top: 50%;
  margin-top: -17px;
  margin-left: 1px;
  left: 100%;
  z-index: 3;
}

/** The Spacing **/
.btn-breadcrumb .btn {
  padding:6px 12px 6px 24px;
  font-size:16px;
}
.btn-breadcrumb .btn:first-child {
  padding:6px 6px 6px 10px;
}
.btn-breadcrumb .btn:last-child {
  padding:6px 18px 6px 24px;
}

/** Default button **/
.btn-breadcrumb .btn.btn-default:not(:last-child):after {
  border-left: 10px solid #fff;
}
.btn-breadcrumb .btn.btn-default:not(:last-child):before {
  border-left: 10px solid #ccc;
}
.btn-breadcrumb .btn.btn-default:hover:not(:last-child):after {
  border-left: 10px solid #ebebeb;
}
.btn-breadcrumb .btn.btn-default:hover:not(:last-child):before {
  border-left: 10px solid #adadad;
}

Server Script


(function() {
  /* populate the 'data' object */
  /* e.g., data.table = $sp.getValue('table'); */

})();

Client Script

function($scope) {
	var c = this;
	c.setSection1Visible = function() {
		var g_form = $scope.page.g_form;
		g_form.setValue('current_section','1');
	},
		c.setSection2Visible = function() {
		var g_form = $scope.page.g_form;
		g_form.setValue('current_section','2');
	},
		c.setSection3Visible = function() {
		var g_form = $scope.page.g_form;
		g_form.setValue('current_section','3');
	},
		c.setSection4Visible = function() {
		var g_form = $scope.page.g_form;
		g_form.setValue('current_section','4');
	},
		c.setSection5Visible = function() {
		var g_form = $scope.page.g_form;
		g_form.setValue('current_section','5');
	},
		c.setSection6Visible = function() {
		var g_form = $scope.page.g_form;
		g_form.setValue('current_section','6');
	}
}