Tech Talk: Intro to OrderCloud Spec Forms

February 4, 2015

Category: Development

The Four51 OrderCloud solution introduces the concept of products with configurable options, we’ll call them variable products. These products can be used to drive any number of solutions: Configure Price Quote, Customizable Variable Documents and Variable Specs. The default functionality is robust, and frequently the only necessary step. However, there are times that creating additional functionality around these forms is required. Let’s take a look at that process and touch on some of the capabilities:

AngularJS

AngularJs is the single page application framework used in the reference applications of OrderCloud. The customizable points within the administrative interface are designed for this framework. So, when you are in the app and click into the “OrderCloud 2.0 tab” within a product template you are actually altering a “view” defined in the Angular routing table. When your user navigates to the product, this custom view will be loaded onto the screen.

Spec Forms

The first major point is the $scope variable that defined the product, or in this case, more specifically the “Variant”. The Variant is the data model of the product and contains all the specifications that drive the customizable variations. The specific spec objects belong to the “Variant.Specs” object collection within the app. Those objects are displayed for input through a custom directive library which enhance the data input through enhanced data input controls. For example, if you wanted the user to have a calendar to select a date you could use the “customdatefield” directive.

Building Additional Functionality into the Spec Form

Angular revolves around the concept of “two way binding”. Meaning that any model value bound to the UI will be maintained between the view and the controller. In the case of our spec form, we’re accessing the “Value” property of the spec object to leverage this two way binding capability. Let’s take a look at an example of how this works:


function SpecController($scope) {
	$scope.Variant.Specs.Name.Value = “My Name”;
});
	

<section class="specform-default" ng-controller='SpecController'>
	

Notice the attribute added to the section element named ng-controller. This is defining the controller that will be associated with the view. Within the same view is the SpecController function that matches the attribute definition. We inject the $scope object by adding it as a function parameter, and we have full access to all the objects loaded into the $scope. One of which is the “Variant” object that represents the product we want to customize for ordering.

In the example, I’m simply setting the value of the Name spec. You would see that value set in the input control exposed in the UI.

Capabilities to hook into events exist and expose more capabilities. The most common of which would be to react to the change event of a spec value. Here is a simple example of how that can be accomplished:


function SpecController($scope) {
	$scope.$watch(‘Variant.Specs.Name.Value’, function(value) {
	if (!value) return; // only respond if the value is set
		Variant.Specs.Title.Value = value; // example of setting the value of another spec during this change event.
	});
}
	

The key point of this example is the usage of the $watch function exposed on $scope by the Angular framework. The $watch function is the data change event, and the function parameter (in this case named “value”) is the new value that was changed.

This is only the introduction to spec forms. The capabilities are nearly limitless, and we’ll continue to examine them as they relate to OrderCloud.