pict-section-form 1.0.101 → 1.0.103

package/example_applications/postcard_example/README.md

@@ -18,3 +18,9 @@ how you can also use configuration to display basic content or other html templa
 
 By leveraging some of the more rich `{~Entity:` and such jellyfish templates, these
 configuration-only views can be fairly capable (not just static HTML content).
+
+## Data Marhsalling
+
+Note for long time enjoyers of Postkard, the data marshalling has changed a bit. You
+no longer need to manually marshal using the navigation. Look forward to a new manual
+marhsalling example in the future.

package/example_applications/postcard_example/providers/PictProvider-BestPostcardTheme.js

@@ -76,7 +76,7 @@ Glug glug CUSTOMIZED glug Oo... -->
 				"Template": /*HTML*/`
             <div class="pure-u-1 pure-u-md-1-3">
                 <label {~D:Record.Macro.HTMLForID~}>{~D:Record.Name~}:</label>
-                <input type="text" {~D:Record.Macro.HTMLID~} {~D:Record.Macro.InputFullProperties~} class="pure-u-23-24" />
+                <input type="text" {~D:Record.Macro.HTMLID~} {~D:Record.Macro.InputFullProperties~} {~D:Record.Macro.InputChangeHandler~} class="pure-u-23-24" />
             </div>
 	`
 			},
@@ -85,7 +85,7 @@ Glug glug CUSTOMIZED glug Oo... -->
 				"Template": /*HTML*/`
             <div class="pure-u-1 pure-u-md-1-3">
                 <label {~D:Record.Macro.HTMLForID~}>{~D:Record.Name~}:</label>
-                <input type="text" {~D:Record.Macro.HTMLID~} {~D:Record.Macro.InputFullProperties~} class="pure-u-23-24" />
+                <input type="text" {~D:Record.Macro.HTMLID~} {~D:Record.Macro.InputFullProperties~} {~D:Record.Macro.InputChangeHandler~} class="pure-u-23-24" />
             </div>
 	`
 			},
@@ -113,7 +113,7 @@ Glug glug CUSTOMIZED glug Oo... -->
 				"Template": /*HTML*/`
             <div class="pure-u-1 pure-u-md-1-3">
                 <label {~D:Record.Macro.HTMLForID~}><em>{~D:Record.Name~}:</em></label>
-				<input type="text" {~D:Record.Macro.CustomPictSettingsProperty~} {~D:Record.Macro.DirectAssignment~} {~D:Record.Macro.HTMLID~} {~D:Record.Macro.InputFullProperties~} class="pure-u-23-24" />
+				<input type="text" {~D:Record.Macro.CustomPictSettingsProperty~} {~D:Record.Macro.DirectAssignment~} {~D:Record.Macro.HTMLID~} {~D:Record.Macro.InputFullProperties~} {~D:Record.Macro.InputChangeHandler~} class="pure-u-23-24" />
 				<a href="#" onclick="{~P~}.views['{~D:Context[0].Hash~}'].inputEvent('{~D:Record.Hash~}', 'BestEventEvarrrr')" class="pure-button">Sign</a>
             </div>
 	`

package/example_applications/postcard_example/providers/PictProvider-Dynamic-Sections.js

@@ -1,6 +1,7 @@
 const libPictProvider = require('pict-provider');
+const libPictViewDynamicForm = require('../../../source/views/Pict-View-DynamicForm.js');
 
-const _DEFAULT_PROVIDER_CONFIGURATION = 
+const _DEFAULT_PROVIDER_CONFIGURATION =
 {
 	ProviderIdentifier: 'Postcard-DynamicSection-Provider',
 
@@ -18,6 +19,45 @@ class PostcardDynamicSectionProvider extends libPictProvider
 
 	onInitializeAsync(fCallback)
 	{
+		const tmpDynamicInputViewSection = (
+		{
+			"Hash": "PostkardDynamicInputs",
+			"Name": "Custom Dynamic Inputs",
+			"ViewHash": "MyDynamicView",
+
+			"AutoMarshalDataOnSolve": true,
+			"IncludeInMetatemplateSectionGeneration": false,
+
+			"Manifests": {
+				"Section": {
+					"Scope": "PostkardDyanmic",
+					"Sections": [
+						{
+							"Hash": "PostkardDynamicInputs",
+							"Name": "Dynamic Inputs"
+						}
+					],
+					"Descriptors": {
+						"Postkard.DynamicInputPlaceholder": {
+							"Name": "DynamicInputPlaceholder",
+							"Hash": "DynamicInputPlaceholder",
+							"DataType": "String",
+							"Macro": {
+								"HTMLSelector": ""
+							},
+							"PictForm": {
+								"Section": "PostkardDynamicInputs"
+							}
+						}
+					}
+				}
+			}
+		});
+
+		if (!(tmpDynamicInputViewSection.ViewHash in this.pict.views))
+		{
+			this.pict.addView(tmpDynamicInputViewSection.ViewHash, Object.assign({}, tmpDynamicInputViewSection), libPictViewDynamicForm);
+		}
 		this.log.info('PostcardDynamicSectionProvider.onInitializeAsync() called --- loading dynamic section views from "server".');
 		// Load the dynamnic section views from the server
 		this.pict.settings.DefaultFormManifest = require('./PictProvider-Dynamic-Sections-MockServerResponse.json');
@@ -28,4 +68,4 @@ class PostcardDynamicSectionProvider extends libPictProvider
 }
 
 module.exports = PostcardDynamicSectionProvider;
-module.exports.default_configuration = _DEFAULT_PROVIDER_CONFIGURATION;
+module.exports.default_configuration = _DEFAULT_PROVIDER_CONFIGURATION;

package/example_applications/postcard_example/views/PictView-Postcard-DynamicInputs.js

@@ -1,5 +1,4 @@
 const libPictView = require('pict-view');
-const { isTemplateSpan } = require('typescript');
 
 const _ViewConfiguration = (
 {
@@ -26,6 +25,8 @@ and
 
 {~MTI:Second funny place for the data's storage, yo...:DynamoData.SomeFunnyPlaceForTheDataAsASignatureInputType:String:PostKardSignature~}
 
+{~IWVDA:MyDynamicView:AppData.CustomDescriptor~}
+
 <br />
 
 <a href="#" onclick="_Pict.views.PostcardDynamicInputs.makeMoreInputs();" class="button">Add More Inputs</a>
@@ -43,7 +44,7 @@ and
 		}]
 });
 
-class PostcardMainApplicationView extends libPictView
+class PostcardDynamicInputsView extends libPictView
 {
 	constructor(pFable, pOptions, pServiceHash)
 	{
@@ -52,21 +53,61 @@ class PostcardMainApplicationView extends libPictView
 		this.inputCounter = 0;
 	}
 
+	onInitialize()
+	{
+		this.pict.AppData.CustomDescriptor =
+		{
+			Hash: 'CustomPostkardData',
+			Name: 'Custom PostKard Data',
+			Address: 'CustomPostkardData',
+			DataType: 'String',
+			PictForm:
+			{
+				InputType: 'TexaArea',
+				Description: 'This is a custom descriptor for the PostKard application.',
+			},
+		};
+		return super.onInitialize();
+	}
+
+	onAfterRender()
+	{
+		this.pict.PictApplication.marshalToViews();
+		return super.onAfterRender();
+	}
+
 	makeMoreInputs()
 	{
 		let tmpDefectInput = {
 			SpecificDefectHash: this.fable.getUUID(),
 			InputCounter: this.inputCounter++
 		};
+		if (!Array.isArray(this.pict.AppData.CustomDescriptors))
+		{
+			this.pict.AppData.CustomDescriptors = [];
+		}
+		const tmpIndex = this.pict.AppData.CustomDescriptors.length;
+		this.pict.AppData.CustomDescriptors.push(
+		{
+			Hash: `CustomPostkardData${tmpIndex}`,
+			Name: `Custom PostKard Data ${tmpIndex}`,
+			Address: `CustomPostkardData${tmpIndex}`,
+			DataType: 'PreciseNumber',
+			PictForm:
+			{
+				Description: 'This is a custom descriptor for the PostKard application.',
+			},
+		});
 
-		this.pict.parseTemplate('<p>Input Numero {~D:Record.InputCounter~}: {~MTIWHA:Nombre:Record.SpecificDefectHash:String~}</p>', tmpDefectInput, 
+		this.pict.parseTemplate(`<p>Input Numero {~D:Record.InputCounter~}: {~MTIWHA:Nombre:Record.SpecificDefectHash:String~}  {~IWVDA:MyDynamicView:AppData.CustomDescriptors[${tmpIndex}]~}</p>`, tmpDefectInput, 
 			function (pError, pParsedTemplate)
 			{
 				this.pict.ContentAssignment.appendContent('#DynamicInputContainer', pParsedTemplate);
+				this.pict.PictApplication.marshalToViews();
 			}.bind(this));
 	}
 }
 
-module.exports = PostcardMainApplicationView;
+module.exports = PostcardDynamicInputsView;
 
 module.exports.default_configuration = _ViewConfiguration;

package/example_applications/postcard_example/views/PictView-Postcard-Navigation.json

@@ -11,7 +11,7 @@
     "Templates": [
         {
             "Hash": "Postcard-Top-Navigation",
-            "Template": "<span class=\"pure-menu-heading\">Postkard</span><ul class=\"pure-menu-list\"><li class=\"pure-menu-item\"><a href=\"#\" onclick=\"{~P~}.views.PostcardMainApplication.render()\" class=\"pure-menu-link\">Send a Kard</a></li><li class=\"pure-menu-item\"><a href=\"#\" onclick=\"{~P~}.views.PostcardAbout.render()\" class=\"pure-menu-link\">About</a></li><li class=\"pure-menu-item\"><a href=\"#\" onclick=\"{~P~}.views.PostcardLegal.render()\" class=\"pure-menu-link\">Legal</a></li><li class=\"pure-menu-item menu-item-divided\"><a href=\"#\" onclick=\"{~P~}.PictApplication.marshalDataFromViewToAppData()\" class=\"pure-menu-link\">Store Data</a></li><li class=\"pure-menu-item\"><a href=\"#\" onclick=\"{~P~}.PictApplication.marshalDataFromAppDataToView()\" class=\"pure-menu-link\">Read Data</a></li><li class=\"pure-menu-item menu-item-divided\"><a href=\"#\" onclick=\"{~P~}.PictApplication.changeToPostcardTheme()\" class=\"pure-menu-link\">Postkard Pure CSS Theme</a></li><li class=\"pure-menu-item\"><a href=\"#\" onclick=\"{~P~}.PictApplication.changeToDefaultTheme()\" class=\"pure-menu-link\">Pict Raw HTML Form Theme</a></li><li class=\"pure-menu-item\"><a href=\"#\" onclick=\"{~P~}.views.PostcardDynamicInputs.render()\" class=\"pure-menu-link\">Dynamo</a></li></ul>"
+            "Template": "<span class=\"pure-menu-heading\">Postkard</span><ul class=\"pure-menu-list\"><li class=\"pure-menu-item\"><a href=\"#\" onclick=\"{~P~}.views.PostcardMainApplication.render()\" class=\"pure-menu-link\">Send a Kard</a></li><li class=\"pure-menu-item\"><a href=\"#\" onclick=\"{~P~}.views.PostcardAbout.render()\" class=\"pure-menu-link\">About</a></li><li class=\"pure-menu-item\"><a href=\"#\" onclick=\"{~P~}.views.PostcardLegal.render()\" class=\"pure-menu-link\">Legal</a></li><li class=\"pure-menu-item menu-item-divided\"><a href=\"#\" onclick=\"{~P~}.PictApplication.changeToPostcardTheme()\" class=\"pure-menu-link\">Postkard Pure CSS Theme</a></li><li class=\"pure-menu-item\"><a href=\"#\" onclick=\"{~P~}.PictApplication.changeToDefaultTheme()\" class=\"pure-menu-link\">Pict Raw HTML Form Theme</a></li><li class=\"pure-menu-item\"><a href=\"#\" onclick=\"{~P~}.views.PostcardDynamicInputs.render()\" class=\"pure-menu-link\">Dynamo</a></li></ul>"
         }
     ],
     "Renderables": [
@@ -21,4 +21,4 @@
             "DestinationAddress": "#Postcard-Navigation-Container"
         }
     ]
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "pict-section-form",
-    "version": "1.0.101",
+    "version": "1.0.103",
     "description": "Pict dynamic form sections",
     "main": "source/Pict-Section-Form.js",
     "directories": {
@@ -31,7 +31,7 @@
         "browser-env": "^3.3.0",
         "eslint": "^9.26.0",
         "jquery": "^3.7.1",
-        "pict": "^1.0.275",
+        "pict": "^1.0.277",
         "pict-application": "^1.0.27",
         "pict-service-commandlineutility": "^1.0.15",
         "quackage": "^1.0.42",

package/source/providers/Pict-Provider-DynamicTemplates.js

@@ -8,6 +8,9 @@ const templateSetReadOnlyTemplates = require('./dynamictemplates/Pict-DynamicTem
 const libTemplateValueSetWithGroup = require('../templates/Pict-Template-Metacontroller-ValueSetWithGroup.js');
 const libTemplateDynamicInput = require('../templates/Pict-Template-Metatemplate-Input.js');
 const libTemplateDynamicInputWithHashAddress = require('../templates/Pict-Template-Metatemplate-InputWithHashAddress.js');
+const libTemplateDynamicInputWithView = require('../templates/Pict-Template-Metatemplate-InputWithView.js');
+const libTemplateDynamicInputWithViewAndHashAddress = require('../templates/Pict-Template-Metatemplate-InputWithViewAndHashAddress.js');
+const libTemplateDynamicInputWithViewAndDescriptorAddress = require('../templates/Pict-Template-Metatemplate-InputWithViewAndDescriptorAddress.js');
 const libTemplateControlFromDynamicManifest = require('../templates/Pict-Template-ControlFromDynamicManifest.js');
 const libTemplateControlFromDynamicManifestForHash = require('../templates/Pict-Template-ControlFromDynamicManifestForHash.js');
 const libTemplateGetViewSchemaValue = require('../templates/Pict-Template-DyanmicView-Value.js');
@@ -58,6 +61,9 @@ class PictDynamicFormsTemplates extends libPictProvider
 		this.pict.addTemplate(libTemplateValueSetWithGroup);
 		this.pict.addTemplate(libTemplateDynamicInput);
 		this.pict.addTemplate(libTemplateDynamicInputWithHashAddress);
+		this.pict.addTemplate(libTemplateDynamicInputWithView);
+		this.pict.addTemplate(libTemplateDynamicInputWithViewAndHashAddress);
+		this.pict.addTemplate(libTemplateDynamicInputWithViewAndDescriptorAddress);
 		this.pict.addTemplate(libTemplatePluckJoinUnique);
 		this.pict.addTemplate(libTemplateControlFromDynamicManifest);
 		this.pict.addTemplate(libTemplateControlFromDynamicManifestForHash);

package/source/providers/Pict-Provider-MetaLists.js

@@ -168,6 +168,13 @@ class PictMetalist extends libPictProvider
 			return false;
 		}
 
+		if (!this.pict.views.PictFormMetacontroller)
+		{
+			this.log.error(`Dynamic MetaList Provider [${this.UUID}]::[${this.Hash}] requires PictFormMetacontroller but not found. Skipping.`);
+			this.computedLists[pListObject.Hash] = [];
+			return false;
+		}
+
 		// Now try to fetch the list data
 		let tmpListData = this.pict.views.PictFormMetacontroller.getValueByHash(pListObject.ListSourceAddress);
 		if (!tmpListData)

package/source/providers/Pict-Provider-MetatemplateGenerator.js

@@ -1,6 +1,6 @@
 const libPictProvider = require('pict-provider');
 
-//const libPictViewDynamicForm = require('../views/Pict-View-DynamicForm.js');
+const libPictViewDynamicForm = require('../views/Pict-View-DynamicForm.js');
 
 /** @type {Record<string, any>} */
 const _DefaultProviderConfiguration = (
@@ -65,7 +65,8 @@ class PictMetatemplateGenerator extends libPictProvider
 		/** @type {any} */
 		this.log;
 
-		this.dynamicInputView = false;
+		/** @type {libPictViewDynamicForm} */
+		this.dynamicInputView;
 
 		this.baseTemplatePrefix = "Pict-MT-Base";
 	}
@@ -78,12 +79,16 @@ class PictMetatemplateGenerator extends libPictProvider
 
 	createOnDemandMetatemplateView()
 	{
-		let tmpViewConfiguration = JSON.parse(JSON.stringify(_DynamicInputViewSection));
+		const tmpViewConfiguration = JSON.parse(JSON.stringify(_DynamicInputViewSection));
 
-		// TODO: Go back and learn what require is doing oddly here.
-		//this.dynamicInputView = this.pict.addView(tmpViewConfiguration.ViewHash, tmpViewConfiguration, libPictViewDynamicForm);
-		//this.dynamicInputView = this.pict.addView(tmpViewConfiguration.ViewHash, tmpViewConfiguration, require('../views/Pict-View-DynamicForm.js'));
-		this.dynamicInputView = this.pict.views.PictFormMetacontroller.addDynamicView(tmpViewConfiguration.ViewHash, tmpViewConfiguration);
+		if (tmpViewConfiguration.ViewHash in this.pict.views)
+		{
+			this.dynamicInputView = this.pict.views[tmpViewConfiguration.ViewHash];
+		}
+		else
+		{
+			this.dynamicInputView = this.pict.addView(tmpViewConfiguration.ViewHash, tmpViewConfiguration, libPictViewDynamicForm);
+		}
 	}
 
 	/**

package/source/providers/inputs/Pict-Provider-Input-AutofillTriggerGroup.js

@@ -118,7 +118,7 @@ class CustomInputHandler extends libPictSectionInputExtension
 	onDataChange(pView, pInput, pValue, pHTMLSelector)
 	{
 		let tmpTriggerGroupConfigurations = this.getTriggerGroupConfigurationArray(pInput);
-		if (Array.isArray(tmpTriggerGroupConfigurations))
+		if (Array.isArray(tmpTriggerGroupConfigurations) && this.pict.views.PictFormMetacontroller)
 		{
 			for (let i = 0; i < tmpTriggerGroupConfigurations.length; i++)
 			{
@@ -144,7 +144,7 @@ class CustomInputHandler extends libPictSectionInputExtension
 	onDataChangeTabular(pView, pInput, pValue, pHTMLSelector, pRowIndex)
 	{
 		let tmpTriggerGroupConfigurations = this.getTriggerGroupConfigurationArray(pInput);
-		if (Array.isArray(tmpTriggerGroupConfigurations))
+		if (Array.isArray(tmpTriggerGroupConfigurations) && this.pict.views.PictFormMetacontroller)
 		{
 			for (let i = 0; i < tmpTriggerGroupConfigurations.length; i++)
 			{

package/source/providers/inputs/Pict-Provider-Input-EntityBundleRequest.js

@@ -245,17 +245,17 @@ class CustomInputHandler extends libPictSectionInputExtension
 		tmpAnticipate.anticipate(
 			(fNext) =>
 			{
-				if (tmpInput.PictForm.EntityBundleTriggerGroup)
+				if (tmpInput.PictForm.EntityBundleTriggerGroup && this.pict.views.PictFormMetacontroller)
 				{
 					// Trigger the autofill global event
 					this.pict.views.PictFormMetacontroller.triggerGlobalInputEvent(`AutoFill-${tmpInput.PictForm.EntityBundleTriggerGroup}`);
 				}
-				if (tmpInput.PictForm.EntityBundleTriggerMetacontrollerSolve)
+				if (tmpInput.PictForm.EntityBundleTriggerMetacontrollerSolve && this.pict.views.PictFormMetacontroller)
 				{
 					// Trigger the solve global event
 					this.pict.views.PictFormMetacontroller.solve();
 				}
-				if (tmpInput.PictForm.EntityBundleTriggerMetacontrollerRender)
+				if (tmpInput.PictForm.EntityBundleTriggerMetacontrollerRender && this.pict.views.PictFormMetacontroller)
 				{
 					// Trigger the render
 					this.pict.views.PictFormMetacontroller.render();

package/source/providers/inputs/Pict-Provider-Input-TabSectionSelector.js

@@ -47,7 +47,7 @@ class CustomInputHandler extends libPictSectionInputExtension
 
 	getSectionSelector(pTabViewSectionHash)
 	{
-		return `#Pict-${this.pict.views.PictFormMetacontroller.UUID}-${pTabViewSectionHash}-Wrap`;
+		return `#Pict-${this.UUID}-${pTabViewSectionHash}-Wrap`;
 	}
 
 	selectTabByViewHash(pViewHash, pInputHash, pTabViewHash)

package/source/templates/Pict-Template-ControlFromDynamicManifest.js

@@ -91,7 +91,7 @@ class PictTemplateControlFromDynamicManifest extends libPictTemplate
 		/** @type{import('../views/Pict-View-Form-Metacontroller.js')} */
 		const metacontroller = this.pict.views.PictFormMetacontroller;
 		/** @type {Manyfest} */
-		const manifest = metacontroller.manifest;
+		const manifest = metacontroller ? metacontroller.manifest : this.pict.manifest;
 		const descriptor = manifest.getDescriptor(tmpHash);
 		if (!descriptor)
 		{

package/source/templates/Pict-Template-ControlFromDynamicManifestForHash.js

@@ -56,7 +56,7 @@ class PictTemplateControlFromDynamicManifest extends libPictTemplate
 		/** @type{import('../views/Pict-View-Form-Metacontroller.js')} */
 		const metacontroller = this.pict.views.PictFormMetacontroller;
 		/** @type {import('./Pict-Template-ControlFromDynamicManifest.js').Manyfest} */
-		const manifest = metacontroller.manifest;
+		const manifest = metacontroller ? metacontroller.manifest : this.pict.manifest;
 		const descriptor = manifest.getDescriptorByHash(tmpHash);
 		if (!descriptor)
 		{

package/source/templates/Pict-Template-DyanmicView-Value.js

@@ -55,7 +55,7 @@ class PictTemplateGetViewSchemaValue extends libPictTemplate
 		/** @type{import('../views/Pict-View-Form-Metacontroller.js')} */
 		const metacontroller = this.pict.views.PictFormMetacontroller;
 		/** @type {import('./Pict-Template-ControlFromDynamicManifest.js').Manyfest} */
-		const manifest = metacontroller.manifest;
+		const manifest = metacontroller ? metacontroller.manifest : this.pict.manifest;
 		const descriptor = manifest.getDescriptor(tmpSchemaAddress);
 		if (!descriptor)
 		{

package/source/templates/Pict-Template-DyanmicView-ValueByHash.js

@@ -55,7 +55,7 @@ class PictTemplateGetViewSchemaValueByHash extends libPictTemplate
 		/** @type{import('../views/Pict-View-Form-Metacontroller.js')} */
 		const metacontroller = this.pict.views.PictFormMetacontroller;
 		/** @type {import('./Pict-Template-ControlFromDynamicManifest.js').Manyfest} */
-		const manifest = metacontroller.manifest;
+		const manifest = metacontroller ? metacontroller.manifest : this.pict.manifest;
 		const descriptor = manifest.getDescriptorByHash(tmpSchemaHash);
 		if (!descriptor)
 		{

package/source/templates/Pict-Template-Metatemplate-InputWithHashAddress.js

@@ -149,7 +149,7 @@ class PictTemplateMetatemplateInputTemplate extends libPictTemplate
 		let tmpDataType;
 		let tmpInputType;
 
-		// This is just a simple 2 part hash (the entity and the ID)
+		// This is just a simple 2 part hash (the Address and the DataType)
 		let tmpHashTemplateSeparator = tmpHash.split(':');
 		if (tmpHashTemplateSeparator.length < 2)
 		{

package/source/templates/Pict-Template-Metatemplate-InputWithView.js

@@ -0,0 +1,224 @@
+const libPictTemplate = require('pict-template');
+
+/**
+ * This is a template that will generate a dynamic input using a provided dynamic view (by hash)
+ */
+class PictTemplateInputWithViewTemplate extends libPictTemplate
+{
+	/**
+	 * @param {Object} pFable - The Fable Framework instance
+	 * @param {Object} pOptions - The options for the service
+	 * @param {String} pServiceHash - The hash of the service
+	 */
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+
+		/** @type {import('pict')} */
+		this.pict;
+		/** @type {import('pict') & { ManifestFactory: import('../services/ManifestFactory.js') }} */
+		this.fable;
+		/** @type {any} */
+		this.log;
+
+		this.addPattern('{~InputWithView:', '~}');
+		this.addPattern('{~IWV:', '~}');
+
+		this.currentInputIndex = 0;
+	}
+
+	/**
+	 * Renders an arbitrary PICT input by hash, with a custom data type, input type and label.  The Record reference is ignored in this template.
+	 *
+	 * @param {string} pTemplateHash - The template hash.
+	 * @param {object} pRecord - The record object.
+	 * @param {array} pContextArray - The context array.
+	 * @param {any} [pScope] - A sticky scope that can be used to carry state and simplify template
+	 * @returns {string} - The rendered template.
+	 */
+	render(pTemplateHash, pRecord, pContextArray, pScope)
+	{
+		let tmpHash = pTemplateHash.trim();
+		let tmpMetatemplateGenerator = this.pict.providers.MetatemplateGenerator;
+
+		if (this.pict.LogNoisiness > 0)
+		{
+			this.log.trace(`PICT Metacontroller Template [InputWithView]::[${tmpHash}]`);
+		}
+
+		let tmpViewHash;
+		let tmpInputName;
+		let tmpInputAddress;
+		let tmpDataType;
+		let tmpInputType;
+
+		let tmpHashTemplateSeparator = tmpHash.split(':');
+		if (tmpHashTemplateSeparator.length < 3)
+		{
+			this.log.warn(`InputWithView template requires at least three parameters (ViewHash, Address and DataType) [${tmpHash}]`);
+			return '';
+		}
+		tmpViewHash = tmpHashTemplateSeparator[0];
+		tmpInputName = tmpHashTemplateSeparator[1];
+		tmpInputAddress = tmpHashTemplateSeparator[2];
+		tmpDataType = tmpHashTemplateSeparator[3];
+		if (tmpHashTemplateSeparator.length > 4)
+		{
+			tmpInputType = tmpHashTemplateSeparator[4];
+		}
+		// Construct a fake input object
+		let tmpInput = {
+			Address: tmpInputAddress,
+			DataAddress: tmpInputAddress,
+			Name: tmpInputName,
+			Hash: this.fable.ManifestFactory.sanitizeObjectKey(tmpInputAddress),
+			DataType: tmpDataType,
+			PictForm: {
+				InformaryDataAddress: tmpInputAddress,
+				GroupIndex: 0,
+				Row: 0
+			}
+		};
+
+		this.currentInputIndex++;
+
+		if (tmpInputType)
+		{
+			tmpInput.PictForm.InputType = tmpInputType;
+		}
+
+		const tmpInputView = this.pict.views[tmpViewHash];
+
+		if (!tmpInputView || !tmpInputView.sectionManifest || typeof tmpInputView.getRow !== 'function')
+		{
+			this.log.warn(`InputWithView template requires a valid dynamic View hash [${tmpHash}]`);
+			return '';
+		}
+
+		// Check to see if the input is already in the manifest
+		let tmpRow = tmpInputView.getRow(0, 0);
+
+		for (let i = 0; i < tmpRow.Inputs.length; i++)
+		{
+			if (tmpRow.Inputs[i].Hash === tmpInput.Hash)
+			{
+				let tmpInput = tmpRow.Inputs[i];
+				return this.pict.parseTemplate(tmpMetatemplateGenerator.getInputMetatemplateTemplateReference(tmpInputView, tmpInput.DataType, tmpInput.PictForm.InputType, `getInput("0","0","${tmpInput.PictForm.InputIndex}")`), tmpInput, null, [tmpInputView], tmpInputView);
+			}
+		}
+
+		// It isn't already in the manifest, so add it.
+		tmpInput.PictForm.InputIndex = tmpRow.Inputs.length;
+		tmpInputView.sectionManifest.addDescriptor(tmpInput.Address, tmpInput);
+		tmpRow.Inputs.push(tmpInput);
+
+		this.pict.providers.MetatemplateMacros.buildInputMacros(tmpInputView, tmpInput);
+
+		// Now generate the metatemplate
+		let tmpTemplate = tmpMetatemplateGenerator.getInputMetatemplateTemplateReference(tmpInputView, tmpInput.DataType, tmpInput.PictForm.InputType, `getInput("0","0","${tmpInput.PictForm.InputIndex}")`);
+
+		// Now parse it and return it.
+		return this.pict.parseTemplate(tmpTemplate, tmpInput, null, [tmpInputView], tmpInputView);
+	}
+
+	/**
+	 * Renders an arbitrary PICT input by hash, with a custom data type, input type and label.  The Record reference is ignored in this template.
+	 *
+	 * @param {string} pTemplateHash - The schema hash of the control.
+	 * @param {object} pRecord - The record object.
+	 * @param {function | null} fCallback - The callback function.
+	 * @param {array} pContextArray - The context array.
+	 * @param {any} [pScope] - A sticky scope that can be used to carry state and simplify template
+	 *
+	 * @return {void}
+	 */
+	renderAsync(pTemplateHash, pRecord, fCallback, pContextArray, pScope)
+	{
+		let tmpHash = pTemplateHash.trim();
+		let tmpMetatemplateGenerator = this.pict.providers.MetatemplateGenerator;
+
+		if (this.pict.LogNoisiness > 0)
+		{
+			this.log.trace(`PICT Metacontroller Template [InputWithView]::[${tmpHash}]`);
+		}
+
+		let tmpViewHash;
+		let tmpInputName;
+		let tmpInputAddress;
+		let tmpDataType;
+		let tmpInputType;
+
+		// This is just a simple 2 part hash (the entity and the ID)
+		let tmpHashTemplateSeparator = tmpHash.split(':');
+		if (tmpHashTemplateSeparator.length < 3)
+		{
+			this.log.warn(`InputWithView template requires at least three parameters (ViewHash, Address and DataType) [${tmpHash}]`);
+			return fCallback(null, '');
+		}
+		tmpViewHash = tmpHashTemplateSeparator[0];
+		tmpInputName = tmpHashTemplateSeparator[1];
+		tmpInputAddress = tmpHashTemplateSeparator[2];
+		tmpDataType = tmpHashTemplateSeparator[3];
+		if (tmpHashTemplateSeparator.length > 4)
+		{
+			tmpInputType = tmpHashTemplateSeparator[4];
+		}
+		// Construct a fake input object
+		let tmpInput = {
+			Address: tmpInputAddress,
+			DataAddress: tmpInputAddress,
+			Name: tmpInputName,
+			Hash: this.fable.ManifestFactory.sanitizeObjectKey(tmpInputAddress),
+			DataType: tmpDataType,
+			PictForm: {
+				InformaryDataAddress: tmpInputAddress,
+				GroupIndex: 0,
+				Row: 0
+			}
+		};
+
+		this.currentInputIndex++;
+
+		if (tmpInputType)
+		{
+			tmpInput.PictForm.InputType = tmpInputType;
+		}
+
+		const tmpInputView = this.pict.views[tmpViewHash];
+
+		if (!tmpInputView || !tmpInputView.sectionManifest || typeof tmpInputView.getRow !== 'function')
+		{
+			this.log.warn(`InputWithView template requires a valid dynamic View hash [${tmpHash}]`);
+			return fCallback(null, '');
+		}
+
+		// Check to see if the input is already in the manifest
+		let tmpRow = tmpInputView.getRow(0, 0);
+
+		for (let i = 0; i < tmpRow.Inputs.length; i++)
+		{
+			if (tmpRow.Inputs[i].Hash === tmpInput.Hash)
+			{
+				let tmpInput = tmpRow.Inputs[i];
+				let tmpTemplate = tmpMetatemplateGenerator.getInputMetatemplateTemplateReference(tmpInputView, tmpInput.DataType, tmpInput.PictForm.InputType, `getInput("0","0","${tmpInput.PictForm.InputIndex}")`);
+				this.pict.parseTemplate(tmpTemplate, tmpInput, fCallback, [tmpInputView], tmpInputView);
+				return;
+			}
+		}
+
+		// It isn't already in the manifest, so add it.
+		tmpInput.PictForm.InputIndex = tmpRow.Inputs.length;
+		tmpInputView.sectionManifest.addDescriptor(tmpInput.Address, tmpInput);
+		tmpRow.Inputs.push(tmpInput);
+
+		this.pict.providers.MetatemplateMacros.buildInputMacros(tmpInputView, tmpInput);
+
+		// Now generate the metatemplate
+		let tmpTemplate = tmpMetatemplateGenerator.getInputMetatemplateTemplateReference(tmpInputView, tmpInput.DataType, tmpInput.PictForm.InputType, `getInput("0","0","${tmpInput.PictForm.InputIndex}")`);
+
+		this.pict.parseTemplate(tmpTemplate, tmpInput, fCallback, [tmpInputView], tmpInputView);
+		return;
+	}
+}
+
+module.exports = PictTemplateInputWithViewTemplate;