npm - pict-section-form - Versions diffs - 1.0.131 → 1.0.133 - Mend

pict-section-form 1.0.131 → 1.0.133

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (29) hide show

package/example_applications/complex_table/Complex-Tabular-Application.js CHANGED Viewed

@@ -88,7 +88,7 @@ module.exports.default_configuration.pict_configuration = {
 					{
 						//onclick="{~D:Record.Macro.DataRequestFunction~}"
 						"HashPostfix": "-Template-Wrap-Prefix",
-						"Template": "<h1>Rectangular Area Solver Micro-app</h1><div><a href=\"#\" onclick=\"{~Pict~}.PictApplication.solve()\">[ solve ]</a> <a href=\"#\" onclick=\"{~P~}.views.PictFormMetacontroller.showSupportViewInlineEditor()\">[ editor ]</a></div><hr />"
+						"Template": "<h1>Rectangular Area Solver Micro-app</h1><div><a href=\"#\" onclick=\"{~Pict~}.PictApplication.solve()\">[ solve ]</a> <a href=\"#\" onclick=\"{~P~}.views.PictFormMetacontroller.showSupportViewInlineEditor()\">[ debug ]</a></div><hr />"
 					}
 				],

package/example_applications/complex_table/html/index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 	<head>
 		<title>Complex Table.</title>
 		<style id="PICT-CSS"></style>
-		<script src="./pict.min.js" type="text/javascript"></script>
+		<script src="./pict.js" type="text/javascript"></script>
 		<script type="text/javascript">Pict.safeOnDocumentReady(() => { Pict.safeLoadPictApplication(ComplexTabularApplication, 0)});</script>
 		<!-- CSS placed here to simulate an external collection where we can leverage existing class names/patterns -->
 		<style type="text/css">
@@ -34,7 +34,7 @@
 		</style>
 	</head>
 	<body>
-		<button type="button" onclick="_Pict.views.PictFormMetacontroller.injectManifestsByHash(['DynamicSection1'], 'FruitGrid'); _Pict.views.PictFormMetacontroller.updateMetatemplateInDOM();">Add Dynamic Section</button>
+		<button type="button" onclick="_Pict.views.PictFormMetacontroller.injectManifestsByHash(['DynamicSection1'], 'FruitGrid');">Add Dynamic Section</button>
 		<div id="Pict-Form-Container"></div>
 		<script src="./complex_tabular_application.js" type="text/javascript"></script>
 	</body>

package/example_applications/simple_form/Simple-Form_Default_Manifest.json CHANGED Viewed

@@ -30,7 +30,7 @@
 				[
 					{
 						"HashPostfix": "-Template-Wrap-Prefix",
-						"Template": "<h1>Rectangular Area Solver Micro-app</h1><div><a href=\"#\" onclick=\"{~P~}.PictApplication.solve()\">[ solve ]</a> <a href=\"#\" onclick=\"{~P~}.views.PictFormMetacontroller.showSupportViewInlineEditor()\">[ editor ]</a></div><hr />"
+						"Template": "<h1>Rectangular Area Solver Micro-app</h1><div><a href=\"#\" onclick=\"{~P~}.PictApplication.solve()\">[ solve ]</a> <a href=\"#\" onclick=\"{~P~}.views.PictFormMetacontroller.showSupportViewInlineEditor()\">[ debug ]</a></div><hr />"
 					}
 				]
 		}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "pict-section-form",
-    "version": "1.0.131",
+    "version": "1.0.133",
     "description": "Pict dynamic form sections",
     "main": "source/Pict-Section-Form.js",
     "directories": {
@@ -31,12 +31,12 @@
         "browser-env": "^3.3.0",
         "eslint": "^9.36.0",
         "jquery": "^3.7.1",
-        "pict": "^1.0.311",
+        "pict": "^1.0.312",
         "pict-application": "^1.0.29",
         "pict-service-commandlineutility": "^1.0.15",
         "quackage": "^1.0.42",
         "tui-grid": "^4.21.22",
-        "typescript": "^5.9.2"
+        "typescript": "^5.9.3"
     },
     "dependencies": {
         "fable-serviceproviderbase": "^3.0.15",

package/source/views/Pict-View-Form-Metacontroller.js CHANGED Viewed

@@ -41,7 +41,10 @@ class PictFormMetacontroller extends libPictViewClass
 		this.SupportViewPrototypes = (
 		{
 			LifecycleVisualization: require('./support/Pict-View-PSF-LifeCycle-Visualization.js'),
-			DebugViewer: require('./support/Pict-View-PSF-DebugViewer.js')
+			DebugViewer: require('./support/Pict-View-PSF-DebugViewer.js'),
+			AppDataViewer: require('./support/Pict-View-PSF-AppData-Visualization.js'),
+			SolverVisualization: require('./support/Pict-View-PSF-Solver-Visualization.js'),
+			SpecificSolveVisualization: require('./support/Pict-View-PSF-SpecificSolve-Visualization.js'),
 		});
 	}
@@ -195,11 +198,38 @@ class PictFormMetacontroller extends libPictViewClass
 	/**
 	 * @param {Record<string, any>} pManifest - The manifest to add
 	 * @param {string} [pAfterSectionHash] - The hash of the section to add after. Omit to add to the start.
+	 * @param {string} [pUUID] - (optional) The UUID to use for uniqueness. If not provided, a new one will be generated.
+	 *
+	 * @return {Array<import('./Pict-View-DynamicForm.js')>} the views that correspond to the newly added sections
+	 */
+	injectManifestAndRender(pManifest, pAfterSectionHash, pUUID)
+	{
+		const tmpManifest = pUUID ? this.createDistinctManifest(pManifest, pUUID) : pManifest;
+		const tmpViewsToRender = this.injectManifest(tmpManifest, pAfterSectionHash);
+		this.updateMetatemplateInDOM();
+		//FIXME: for some reason, DOM append is not synchronous, so we need to delay the render....................?
+		setTimeout(() =>
+		{
+			for (const tmpViewToRender of tmpViewsToRender)
+			{
+				tmpViewToRender.render();
+			}
+		}, 0);
+		return tmpViewsToRender;
+	}
+	/**
+	 * @param {Record<string, any>} pManifest - The manifest to add
+	 * @param {string} [pAfterSectionHash] - The hash of the section to add after. Omit to add to the start.
+	 *
+	 * @return {Array<import('./Pict-View-DynamicForm.js')>} the views that correspond to the newly added sections; note that these views are NOT rendered yet
 	 */
 	injectManifest(pManifest, pAfterSectionHash)
 	{
+		const tmpAfterSectionHash = pAfterSectionHash ? (pAfterSectionHash.startsWith('PictSectionForm-') ? pAfterSectionHash : `PictSectionForm-${pAfterSectionHash}`) : null;
 		const tmpAllViewKeys = Object.keys(this.pict.views);
-		const tmpReferenceManifestViewIndex = pAfterSectionHash ? tmpAllViewKeys.indexOf(`PictSectionForm-${pAfterSectionHash}`) : -1;
+		const tmpReferenceManifestViewIndex = tmpAfterSectionHash ? tmpAllViewKeys.indexOf(tmpAfterSectionHash) : -1;
 		const tmpViewsToShift = [];
 		if (tmpReferenceManifestViewIndex >= 0)
 		{
@@ -211,22 +241,20 @@ class PictFormMetacontroller extends libPictViewClass
 				delete this.pict.views[tmpKey];
 			}
 		}
-		const tmpViewsToRender = this.bootstrapAdditiveManifest(pManifest, pAfterSectionHash);
+		const tmpViewsToRender = this.bootstrapAdditiveManifest(pManifest, tmpAfterSectionHash);
 		for (const tmpViewToShift of tmpViewsToShift)
 		{
 			this.pict.views[tmpViewToShift.key] = tmpViewToShift.view;
 		}
 		// this ensures if we re-render everything, we have the new sections in the template
 		this.generateMetatemplate();
-		this.regenerateFormSectionTemplates();
-		//FIXME: for some reason, DOM append is not synchronous, so we need to delay the render....................?
-		setTimeout(() =>
+		for (const tmpViewToRender of tmpViewsToRender)
 		{
-			for (const tmpViewToRender of tmpViewsToRender)
-			{
-				tmpViewToRender.render();
-			}
-		}, 0);
+			tmpViewToRender.rebuildCustomTemplate();
+		}
+		this.pict.CSSMap.injectCSS();
+		return tmpViewsToRender;
 	}
 	/**
@@ -284,15 +312,25 @@ class PictFormMetacontroller extends libPictViewClass
 	 */
 	injectManifestsByHash(pManifestHashes, pAfterSectionHash, pUUID)
 	{
+		let tmpViewsToRender = [];
 		for (const tmpManifestHash of pManifestHashes)
 		{
 			const tmpManifest = this.findDynamicSectionManifestDefinition(tmpManifestHash);
 			if (tmpManifest)
 			{
 				const tmpUniqueManifest = this.createDistinctManifest(tmpManifest, pUUID);
-				this.injectManifest(tmpUniqueManifest, pAfterSectionHash);
+				const tmpViews = this.injectManifest(tmpUniqueManifest, pAfterSectionHash);
+				tmpViewsToRender = tmpViewsToRender.concat(tmpViews);
 			}
 		}
+		this.updateMetatemplateInDOM();
+		setTimeout(() =>
+		{
+			for (const tmpViewToRender of tmpViewsToRender)
+			{
+				tmpViewToRender.render();
+			}
+		}, 0);
 	}
 	/**
@@ -1113,12 +1151,13 @@ class PictFormMetacontroller extends libPictViewClass
 	showSupportViewInlineEditor()
 	{
-		// 1. See if the Inline Editor support view is loaded
-		if (!("Pict-Form-DebugViewer" in this.pict.views))
-		{
-			// 2. Load the support view if it isn't
-			this.pict.addView("Pict-Form-DebugViewer", {}, this.SupportViewPrototypes.DebugViewer);
-		}
+		// 1. See if the Support views are loaded
+		// 2. Load the support view if it isn't
+		this.pict.addViewSingleton("Pict-Form-DebugViewer", {}, this.SupportViewPrototypes.DebugViewer);
+		this.pict.addViewSingleton("Pict-Form-AppDataViewer", {}, this.SupportViewPrototypes.AppDataViewer);
+//		this.pict.addViewSingleton("Pict-Form-LifecycleVisualization", {}, this.SupportViewPrototypes.LifecycleVisualization);
+		this.pict.addViewSingleton("Pict-Form-SolverVisualization", {}, this.SupportViewPrototypes.SolverVisualization);
+//		this.pict.addViewSingleton("Pict-Form-SpecificSolveVisualization", {}, this.SupportViewPrototypes.SpecificSolveVisualization);
 		// 3. See if the container for the support view is loaded
 		// 4. Render the container for the support view if it isn't loaded

package/source/views/support/Pict-Provider-PSF-Support.js ADDED Viewed

@@ -0,0 +1,314 @@
+const libPictProvider = require('pict-provider');
+/** @type {Record<string, any>} */
+const _DefaultProviderConfiguration = (
+{
+	"ProviderIdentifier": "Pict-Form-SupportExtensions",
+	"AutoInitialize": true,
+	"AutoInitializeOrdinal": 0,
+	"AutoSolveWithApp": false
+});
+/**
+ * Represents a class that provides dynamic templates for the Pict form section provider.
+ * @extends libPictProvider
+ */
+class PictSupportExtension extends libPictProvider
+{
+	/**
+	 * Constructs a new instance of the PictProviderDynamicTemplates class.
+	 * @param {Object} pFable - The pFable object.
+	 * @param {Object} pOptions - The options object.
+	 * @param {Object} pServiceHash - The service hash object.
+	 */
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		let tmpOptions = Object.assign({}, JSON.parse(JSON.stringify(_DefaultProviderConfiguration)), pOptions);
+		super(pFable, tmpOptions, pServiceHash);
+		// These next blocks of code manually do what views often do, to support sharing of this across multiple views.
+		// Only add this css if it doesn't exist already in the css map
+		if (!('Pict-Support' in this.pict.CSSMap.inlineCSSMap))
+		{
+			this.pict.CSSMap.addCSS('Pict-Support',
+				/*css*/`
+					:root{
+						--PSF-Global-background-color: #dcdce5;
+						--PSF-Global-text-color: #333333;
+						--PSFExt-gutter-size: 5px;
+						--PSFExt-indentation-size: calc(2 * var(--PSFExt-gutter-size));
+						--PSFExt-Global-background-color: #dedede;
+						--PSFExt-Global-text-color: #333333;
+						--PSFExt-Section-background-color: #efefef;
+						--PSFExt-Section-button-color: #5A52A3;
+						--PSFExt-Section-button-text-color: #D8D7E5;
+						--PSFExt-Section-token-color: #eAf3a2;
+						--PSFExt-Section-label-color: #999;
+						--PSFExt-Section-Data-background-color: #fafafa;
+						--PSFExt-Section-Group-Header-background-color: #ebebff;
+						--PSFExt-Section-Group-Row-Header-background-color: #dcf0f0;
+						--PSFExt-Solver-Entry-text-color: #bb4a9c;
+						--PSFExt-Section-DynamicInput-background-color: #a3ccd8;
+						--PSFExt-Section-DynamicInput-button-color: #2b89a4;
+						--PSFExt-Section-DynamicInput-button-text-color: #D8D7E5;
+					}
+					/** Wrapping container	*/
+					#Pict-Form-Extensions-Wrap {
+						display:flex;
+						flex-direction: column;
+						height: 75vh;
+						overflow: hidden;
+						position: absolute;
+						left: 50%;
+						top: 0px;
+						width: 20vw;
+						min-width: 340px;
+						min-height: 200px;
+					}
+					#Pict-Form-Extension-DragControl {
+						background-color: #eae;
+						cursor: move;
+						padding: 4px 6px;
+						border-radius: 3px;
+						border: 1px solid #111;
+					}
+					#Pict-Form-Extensions-Container {
+						flex-grow: 1;
+						overflow: auto;
+						margin-top: 2px;
+						color: var(--PSF-Global-text-color);
+						background-color: var(--PSF-Global-background-color);
+						padding: 10px;
+						border: 4px double #111;
+						border-radius: 8px;
+						box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
+						font-size: 14px;
+						font-family: Arial, sans-serif;
+						font-size: 14px;
+					}
+					#Pict-Form-Extension-ResizeControl {
+						background-color: #eae;
+						cursor: move;
+						padding: 4px 4px;
+						border-radius: 3px;
+						border: 1px solid #111;
+					}
+					.PSFExt-Extension-Footer {
+						text-align: right;
+						font-size: 10px;
+						font-weight: bold;
+						margin-top: 8px;
+					}
+					/** Headers	*/
+					.PSFExt-Extension-Header {
+						font-size: 10px;
+						font-weight: bold;
+						margin-bottom: var(--PSFExt-gutter-size);
+					}
+					.PSFExt-Global-Header {
+						padding: var(--PSFExt-gutter-size);
+						margin: 0;
+					}
+					.PSFExt-Section-Header {
+						padding: var(--PSFExt-gutter-size);
+						margin: 0;
+					}
+					.PSFExt-Content-Header {
+						padding: var(--PSFExt-gutter-size);
+						margin: 0;
+						background-color: var(--PSFExt-Section-background-color);
+					}
+					.PSFExt-Data-Header {
+						font-weight: bold;
+						border-bottom: 1px dotted #ccc;
+						padding: var(--PSFExt-gutter-size);
+					}
+					/** Section content */
+					.PSFExt-Section {
+						margin: var(--PSFExt-gutter-size);
+						padding: var(--PSFExt-gutter-size);
+						background-color: var(--PSFExt-Section-background-color);
+						border-radius: 4px;
+					}
+					.PSFExt-Section-Descriptors {
+						padding: var(--PSFExt-gutter-size) 0;
+					}
+					.PSFExt-Section-Group {
+						padding: var(--PSFExt-gutter-size);
+					}
+					.PSFExt-Section-Buttons {
+						list-style-type: none;
+						padding: 0;
+						padding-bottom: var(--PSFExt-gutter-size);
+						margin: calc(var(--PSFExt-gutter-size) * 2) var(--PSFExt-gutter-size);
+					}
+					.PSFExt-Section-Button {
+						display: inline;
+						margin-right: calc(var(--PSFExt-gutter-size) * 0.25);
+						text-decoration: none;
+						background-color: var(--PSFExt-Section-button-color);
+						padding: var(--PSFExt-gutter-size);
+						border-radius: var(--PSFExt-gutter-size);
+					}
+					.PSFExt-Section-Button a {
+						text-decoration: none;
+						color: var(--PSFExt-Section-button-text-color);
+					}
+					.PSFExt-Section-Button a:hover {
+						text-decoration: underline;
+					}
+					.PSFExt-Section-Solver-Entry:not(:last-child) {
+						border-bottom: 1px solid #ccc;
+					}
+					.PSFExt-Solver-Entry {
+						font-family: "Courier New", "Lucida Console", monospace;
+						font-weight: bold;
+						margin-top: var(--PSFExt-gutter-size);
+						padding: var(--PSFExt-gutter-size);
+						line-height: 1.2;
+						color: var(--PSFExt-Solver-Entry-text-color);
+						border-bottom: 1px dotted #ccc;
+					}
+					.PSFExt-Solver-Result {
+						font-family: "Courier New", "Lucida Console", monospace;
+						font-weight: bold;
+						margin-top: var(--PSFExt-gutter-size);
+						padding: 0 var(--PSFExt-gutter-size);
+						line-height: 1.2;
+					}
+					.PSFExt-Section-ExtraData {
+						padding-top: calc(var(--PSFExt-gutter-size) / 2);
+						padding-bottom: calc(var(--PSFExt-gutter-size) / 2);
+						background-color: var(--PSFExt-Section-Data-background-color);
+					}
+					.PSFExt-Section-Group .PSFExt-Content-Header.PSFExt-Section-Group-Header {
+						background-color: var(--PSFExt-Section-Group-Header-background-color);
+					}
+					.PSFExt-Section-Group .PSFExt-Content-Header.PSFExt-Section-Group-Row-Header {
+						background-color: var(--PSFExt-Section-Group-Row-Header-background-color);
+					}
+					.PSFExt-DeEmphasize {
+						color: var(--PSFExt-Section-label-color);
+						font-size: smaller;
+					}
+					.PSFExt-Data {
+						margin-left: var(--PSFExt-indentation-size);
+						line-height: 0.85;
+						font-size: smaller;
+					}
+					.PSFExt-Data-Table {
+						width: 100%;
+						border-collapse: collapse;
+						margin-left: var(--PSFExt-indentation-size);
+						margin-top: var(--PSFExt-gutter-size);
+						margin-bottom: var(--PSFExt-gutter-size);
+						overflow-x: auto;
+					}
+					.PSFExt-Label {
+						min-width: 15%;
+						color: var(--PSFExt-Section-label-color);
+						margin: var(--PSFExt-gutter-size) 0;
+					}
+					.PSFExt-Label::after {
+						content: ": ";
+					}
+					.PSFExt-Hidden {
+						display: none;
+					}
+					.PSFExt-Section-Solver-DynamicInput {
+						background-color: #ffffff;
+					}
+					/** empty states */
+					.PSFExt-Section-Solvers:empty::before {
+						content: "No Section Solvers Defined";
+						font-style: italic;
+						color: var(--PSFExt-Section-label-color);
+						margin-left: var(--PSFExt-indentation-size);
+						text-align: center;
+						padding: var(--PSFExt-gutter-size);
+						display: block;
+						font-size: smaller;
+					}
+					.PSFExt-Group-Solvers:empty::before {
+						content: "No Group/RecordSet Solvers Defined";
+						font-style: italic;
+						color: var(--PSFExt-Section-label-color);
+						margin-left: var(--PSFExt-indentation-size);
+						text-align: center;
+						padding: var(--PSFExt-gutter-size);
+						display: block;
+						font-size: smaller;
+					}
+					.PSFExt-ExpressionEditbox {
+						width: calc(100% - 20px);
+						resize: vertical;
+						min-height: 80px;
+						font-family: monospace;
+						font-size: 0.9em;
+					}
+					.PSFExt-Token {
+						background-color: var(--PSFExt-Section-token-color);
+					}
+				`, 1000, 'Pict-Form-SupportBase');
+		}
+		// Only add these templates if they doesn't exist
+		if (this.pict.TemplateProvider.getTemplate('Pict-Form-Support-Container') == null)
+		{
+			this.pict.TemplateProvider.addTemplate('Pict-Form-Support-Container',
+				/*html*/`
+			<div id="Pict-Form-Extensions-Wrap">
+				<p class="PSFExt-Extension-Header"><span id="Pict-Form-Extension-DragControl" class="PSDV-Extension-Header-Controlbar">Pict.Extensions {~TS:Pict-Form-Support-Container-Link:Pict.providers[Pict-Form-SupportExtensions].getSupportViewLinks()~} <a href="javascript:void(0);" onclick="{~P~}.ContentAssignment.toggleClass('#Pict-Form-Extensions-Container', 'PSFExt-Hidden');{~P~}.ContentAssignment.toggleClass('#Pict-Form-Extensions-Footer', 'PSFExt-Hidden');">toggle</a></span></p>
+				<div id="Pict-Form-Extensions-Container"></div>
+				<p id="Pict-Form-Extensions-Footer" class="PSFExt-Extension-Footer"><span id="Pict-Form-Extension-ResizeControl">Pict.Extensions Resize</span></p>
+			</div>
+				`);
+		}
+		if (this.pict.TemplateProvider.getTemplate('Pict-Form-Support-Container-Link') == null)
+		{
+			this.pict.TemplateProvider.addTemplate('Pict-Form-Support-Container-Link',
+				/*html*/` [ <a href="{~D:Record.Link~}" onclick="{~D:Record.OnClick~}" data-shortname="{~D:Record.ShortName~}" data-longname="{~D:Record.LongName~}">{~D:Record.ShortName~}</a> ] `);
+		}
+		this.SupportViews = {};
+	}
+	registerSupportView(pView)
+	{
+		this.pict.log.info(`Registering support view ${pView.Hash} with Pict Support Extension provider.`);
+		this.SupportViews[pView.Hash] = pView;
+	}
+	getSupportViewLinks()
+	{
+		let tmpLinks = [];
+		let tmpSupportViewHashes = Object.keys(this.SupportViews);
+		for (let i = 0; i < tmpSupportViewHashes.length; i++)
+		{
+			let tmpViewHash = tmpSupportViewHashes[i];
+			let tmpView = this.SupportViews[tmpViewHash];
+			tmpLinks.push(
+				{
+					Hash: tmpView.Hash,
+					Link: `javascript:void(0);`,
+					ShortName: tmpView.DisplayShortName,
+					LongName: tmpView.DisplayLongName,
+					OnClick: `${this.pict.browserAddress}.views['${tmpView.Hash}'].render()`
+				}
+			);
+		}
+		return tmpLinks;
+	}
+}
+module.exports = PictSupportExtension;
+module.exports.default_configuration = _DefaultProviderConfiguration;

package/source/views/support/Pict-View-PSF-AppData-Visualization.js ADDED Viewed

@@ -0,0 +1,137 @@
+const libPictViewFormSupportBase = require(`./Pict-View-PSF-SupportBase.js`);
+const defaultViewConfiguration = (
+{
+	ViewIdentifier: "Pict-Form-AppData",
+	DefaultRenderable: 'Pict-Form-AppData-Renderable',
+	DefaultDestinationAddress: "#Pict-Form-Extensions-Container",
+	RenderOnLoad: false,
+	CSS: /*css*/``,
+	Templates: [
+		{
+			Hash: "Pict-Form-AppData-Content",
+			Template: /*html*/`
+<div id="Pict-Form-AppData-Content">
+	<h2 class="PSFAD-Global-Header">Pict Form Data Visualization</h2>
+	<p class="PSFExt-Data">
+		<span class="PSFExt-Label">Form Marshal Destination</span> {~D:Pict.views.PictFormMetacontroller.viewMarshalDestination~}
+	</p>
+	<p class="PSFExt-Data">
+		<span class="PSFExt-Label">Form Data</span> [<a href="javascript:void(0);" onclick="{~P~}.views['{~D:Context[0].Hash~}'].downloadJSONObjectAsFile('Pict.{~D:Pict.views.PictFormMetacontroller.viewMarshalDestination~}')">Download JSON</a>]
+	</p>
+	<p class="PSFExt-Data">
+		<span class="PSFExt-Label">AppData</span> [<a href="javascript:void(0);" onclick="{~P~}.views['{~D:Context[0].Hash~}'].downloadJSONObjectAsFile('Pict.AppData')">Download AppData JSON</a>]
+	</p>
+	<p class="PSFExt-Data">
+		<span class="PSFExt-Label">Fable Settings</span> [<a href="javascript:void(0);" onclick="{~P~}.views['{~D:Context[0].Hash~}'].downloadJSONObjectAsFile('Pict.settings')">Download fable settings JSON</a>]
+	</p>
+	<p class="PSFExt-Data">
+		<span class="PSFExt-Label">Application Options</span> [<a href="javascript:void(0);" onclick="{~P~}.views['{~D:Context[0].Hash~}'].downloadJSONObjectAsFile('Pict.PictApplication.options')">Download Application options JSON</a>]
+	</p>
+	<div id="PSFExt-Data-Browser" class="PSFExt-Section">
+		{~TVS:Pict-Form-AppData:Context[0].flattenMarshalDestination()~}
+	</div>
+`
+		},
+		{
+			Hash: "Pict-Form-AppData",
+			Template: /*html*/`
+	<div class="PSFExt-Section">
+		<h3 class="PSFExt-Section-Header"><span class="PSFExt-DeEmphasize">Address:</span>
+			{~D:Record.Key~}
+		</h3>
+		<div id="PSFExt-AD-{~D:Record.Key~}-Extra" class="PSFExt-Section-ExtraData">
+			{~TIfAbs:Pict-Form-AppData-ObjectValueDisplay:Record:Record.Value.DataType^==^Object~}
+			{~TIfAbs:Pict-Form-AppData-NotObjectValueDisplay:Record:Record.Value.DataType^!=^Object~}
+		</div>
+	</div>
+`
+		},
+		{
+			Hash: "Pict-Form-AppData-NotObjectValueDisplay",
+			Template: /*html*/`
+				<!-- Not Object Value Display -->
+				{~TIfAbs:Pict-Form-AppData-ArrayValueDisplay:Record:Record.Value.DataType^==^Array~}
+				{~TIfAbs:Pict-Form-AppData-PrimitiveValueDisplay:Record:Record.Value.DataType^!=^Array~}
+`
+		},
+		{
+			Hash: "Pict-Form-AppData-ObjectValueDisplay",
+			Template: /*html*/`
+			<!-- Object Value Display -->
+			<p class="PSFExt-Data">
+				<span class="PSFExt-Label">Type</span> Javascript Object {~T:Pict-Form-AppData-ObjectDownloadLink~}
+			</p>
+`
+		},
+		{
+			Hash: "Pict-Form-AppData-ArrayValueDisplay",
+			Template: /*html*/`
+			<!-- Array Value Display -->
+			<p class="PSFExt-Data">
+				<span class="PSFExt-Label">Type</span> Array {~TIfAbs:Pict-Form-AppData-ArrayDownloadLink~}
+			</p>
+`
+		},
+		{
+			Hash: "Pict-Form-AppData-PrimitiveValueDisplay",
+			Template: /*html*/`
+			<!-- Primitive Value Display -->
+			<p class="PSFExt-Data">
+				<span class="PSFExt-Label">Value</span> {~D:Record.Value.Default~}
+			</p>
+`
+		},
+		{
+			Hash: "Pict-Form-AppData-ObjectDownloadLink",
+			Template: /*html*/`[<a href="javascript:void(0);" onclick="{~P~}.views['{~D:Context[0].Hash~}'].downloadJSONObjectAsFile('Pict.{~D:Pict.views.PictFormMetacontroller.viewMarshalDestination~}')">Download JSON</a>]`
+		},
+		{
+			Hash: "Pict-Form-AppData-ArrayDownloadLink",
+			Template: /*html*/`[<a href="javascript:void(0);" onclick="{~P~}.views['{~D:Context[0].Hash~}'].downloadJSONObjectAsFile('Pict.{~D:Pict.views.PictFormMetacontroller.viewMarshalDestination~}')">Download Array</a>]`
+		}
+	],
+	Renderables: [
+		{
+			RenderableHash: "Pict-Form-AppData-Renderable",
+			TemplateHash: "Pict-Form-AppData-Content"
+		}
+	]
+});
+class PictFormsAppData extends libPictViewFormSupportBase
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+		this.DisplayShortName = 'FD';
+		this.DisplayLongName = 'FormData';
+	}
+	flattenMarshalDestination()
+	{
+		return this.flattenAddress(this.pict.views.PictFormMetacontroller.viewMarshalDestination);
+	}
+	flattenAppData()
+	{
+		return this.flattenAddress('AppData');
+	}
+	flattenAddress(pAddress)
+	{
+		let tmpData = this.pict.resolveStateFromAddress(pAddress);
+		// Now flatten the entire data structure...
+		return this.pict.manifest.objectAddressGeneration.generateAddressses(tmpData);
+	}
+}
+module.exports = PictFormsAppData;
+module.exports.default_configuration = defaultViewConfiguration;