Building custom form containers
Changes in the interaction between Container and form controls
In WorkZone Process 2014 R2, interaction between the container and form controls has been changed in order to support the error handling interface.
A new 'wzpContainerHelper' module has been implemented and this must be used instead of 'wzpContainer'.
'wzpContainerHelper' module has the same structure as the container, but it will contain additional functionality for event handling and dynamic capability (not implemented yet).
Changes in the form controllers
-
You should still inject the WorkZone Process control in the form module in the form controller as before:
angular.module('wzput').constant('wzpContainer', wzpContainer); - You no longer need to inject the addition
‘localContainer’(and related js-definitions):angular.module('wzput').constant('localContainer', localContainer); - You must add the new angular service
'wzpContainerHelper':angular.module('wzput',['ngResource', 'ngProgressLite', 'ngUtilities', 'localize', 'wzpContainerHelper', 'wzp.filters', 'settings' … ]); - Use
'wzpContainerHelper'in all controls and controllers to work with the Container API instead of'wzpContainer', which is obsolete.
Support of custom containers
If your form needs to use some custom properties of the functions, then either extend 'wzpContainerHelper' or create a new custom module and use this instead of 'wzpContainerHelper'.
Example: The extension 'wzpContainerHelper' module.
angular.module('wzp').config(function ($provide) {
//decorator to wrap uiHelper service
$provide.decorator('wzpContainerHelper', function ($delegate) {
// override or add any functions in uiHelper
$delegate.CustomFunction = function (options, value) {
// put overwriting code here
this.wzpContainer.customFunction(options, value)
}
return $delegate;
})
});
Example: Definition of the custom ContainerHelper module.
angular.module('wzpContainerHelper').factory('wzpContainerHelperCustom',
['wzpContainerHelper', 'wzpContainer', function (wzpContainerHelper, wzpContainer) { wzpContainer.customFunction = function (){
return wzpContainer.customFunction();
}
return wzpContainer;
}]);