Variable-Length Line Item Edits

Overview

Describes how to add modules to CMS edit pages where variable-length arrays of objects can be added to a content record.

Markup

Edit form

Simple include directive to insert entire module into the edit form.

include (SECTION_BASE_DIR."_templates/forms/[CONTENT_DESCRIPTION]_container.php");

Module container include

• Header followed by an anchor or button element to be used as button to add new line items.
• Error container for AJAX errors specific to this module.
• div element to serve as container for the line items.
  • class="form-section" to contain the listings and control their position within the flow of the page.
  • And addition attribute to be used to reference the container and update its contents. E.g. class="related-products"
• Test for array of line item objects and test for its size.
• Iteration through array, inserting static content for each existing line item along with buttons to edit and delete the line items, depending on the circumstances.

<div class="line-item-module">
    <h3>[CONTENT_LABEL] <button class="add-[CONTENT_CODE]-btn" title="add [CONTENT_LABEL]">add [CONTENT_LABEL]</button></h3>
	<div id="[CONTENT_CODE]-error-container" class="error"><!-- --></div>
	<div class="form-section [CONTENT_CODE]-container">
<?
if(!isset($content)) {
	$content = &$input;
}
if (is_array($content->[CONTENT_CODE]_array) && count($content->[CONTENT_CODE]_array)>0):
	foreach ($content->[CONTENT_CODE]_array as &$[CONTENT_VAR]):
		include (CONTENT_BASE_DIR."_templates/forms/[CONTENT_CODE]_line.php");
	endforeach;
else: ?>
		<div class="no-results"><i>No [CONTENT_LABEL] have been added.</i></div>
<? endif; ?>		
	</div>
</div>

CSS

• .line-item-module Defines how the entire module will fit into the flow of the page.
• .line-item-module h3 T module title.
• .form-section Styling of the actual line items and how they are arranged relative to each other.
• .form-section div Styling of individual line items.

.line-item-module {
	clear: both;
	overflow: hidden;
	margin: 12px 0 8px 0;
	width: 500px;
}
.line-item-module h3 {
	font-weight: normal;
	font-size: 11px;
	padding: 0 0 2px 0;
	border-bottom: 1px solid #999;
	margin: 0 0 4px 0;
}
.form-section div {
	line-height: 16px;
}

JavaScript

Binding handlers and buttons

• Assign handler for $('.add-[CONTENT_CODE]-btn')
• Apply JQueryUI button to $('.add-[CONTENT_CODE]-btn')

bindEditHandlers: function() {
			return this.each(function() {
				$(this)
				.off('click', '.add-history-btn', LITTLED.Contacts.editHistoryEvent)
				.on('click', '.add-history-btn', LITTLED.Contacts.editHistoryEvent)
				$('.add-history-btn', $(this)).iconButton('plus');
				$('#history-events').contacts('bindHistoryHandlers');
			});
		},
		
		/**
		 * line item handlers
		 */
		bindHistoryHandlers: function() {
			return this.each(function() {				
				$(this)
				.off('click', '.trash-history-btn', LITTLED.Contacts.deleteHistoryEvent)
				.on('click', '.trash-history-btn', LITTLED.Contacts.deleteHistoryEvent);
				$('.trash-history-btn', $(this)).iconButton('trash');
			});
		},

• Handler routines.

deleteHistoryEvent: function() {
            var $p = $(this).closest('.event-row');
            $p.remove();
        },

PHP

Collecting form data

Parent content class doesn't require any form data collection for the line item data.

Validating form data

Parent class doesn't require any form data validation for the line item data.

Examples

• Luzern Labs Advice CMS