pict-section-recordset 1.0.52 → 1.0.54

package/source/views/read/RecordSet-Read.js

@@ -1,11 +1,5 @@
 const libPictRecordSetRecordView = require('../RecordSet-RecordBaseView.js');
 
-
-const viewHeaderRead = require('./RecordSet-Read-HeaderRead.js');
-const viewRecordRead = require('./RecordSet-Read-RecordRead.js');
-const viewRecordReadExtra = require('./RecordSet-Read-RecordReadExtra.js');
-const viewTabBarRead = require('./RecordSet-Read-TabBarRead.js');
-
 /** @type {Record<string, any>} */
 const _DEFAULT_CONFIGURATION__Read = (
 	{
@@ -34,16 +28,195 @@ const _DEFAULT_CONFIGURATION__Read = (
 		Templates:
 			[
 				{
-					Hash: 'PRSP-Read-Template',
+					Hash: 'PRSP-Read-RecordRead-Template',
+					Template: /*html*/`
+						<!-- DefaultPackage pict view template: [PRSP-Read-RecordRead-Template] -->
+						<div>
+							{~TSWP:PRSP-Read-RecordRead-Template-Row:Record.DisplayFields:Record.Record~}
+						</div>
+						{~T:PRSP-Read-RecordButtonBar-Template~}
+						<!-- DefaultPackage end view template:  [PRSP-Read-RecordRead-Template] -->
+					`
+				},
+				{
+					Hash: 'PRSP-Read-RecordRead-Template-Row',
+					Template: /*html*/`
+						<!-- DefaultPackage pict view template: [PRSP-Read-RecordRead-Template] -->
+						<div>
+							<span style="font-style: italic;">{~D:Record.Data.DisplayName~}</span>
+							<span style="font-weight: bold;">{~DVBK:Record.Payload:Record.Data.Key~}</span>
+						</div>
+						<!-- DefaultPackage end view template:  [PRSP-Read-RecordRead-Template] -->
+					`
+				},
+				{
+					Hash: 'PRSP-Read-RecordButtonBar-Template',
 					Template: /*html*/`
-	<!-- DefaultPackage pict view template: [PRSP-Read-Template] -->
-	<h1>{~D:Record.RecordSet~} {~D:Record.GUIDAddress~} [{~D:Record.RecordConfiguration.GUIDRecord~}]</h1>
-	<!--
-	{~DJ:Record~}
-	-->
-	{~T:PRSP-Read-RecordRead-Template~}
-	<!-- DefaultPackage end view template:  [PRSP-Read-Template] -->
-	`
+						<style>
+							.record-button-bar-hidden
+							{
+								display: none;
+							}
+							.record-button-bar
+							{
+								display: flex;
+								margin-top: 15px;
+							}
+							.record-button-bar > button
+							{
+								margin-right: 10px;
+							}
+						</style>
+						<div class="record-button-bar">
+							<button id="PRSP-Read-CancelButton" type="button" onclick="_Pict.views['RSP-RecordSet-Read'].cancel()">Cancel</button>
+							<button id="PRSP-Read-SaveButton" type="button" onclick="_Pict.views['RSP-RecordSet-Read'].save()">Save</button>
+							<button id="PRSP-Read-EditButton" type="button" onclick="_Pict.views['RSP-RecordSet-Read'].edit()">Edit</button>
+						</div>
+					`
+				},
+				{
+					Hash: 'PRSP-Read-RecordTab-Template',
+					Template: /*html*/`<!-- Placeholder for tabs, something has gone wrong if this comment is rendered. -->`
+				},
+				{
+					Hash: 'PRSP-Read-RecordTabNav-Template',
+					Template: /*html*/`<!-- Placeholder for tabs, something has gone wrong if this comment is rendered. -->`
+				},
+				{
+					Hash: 'PRSP-Read-Basic-Template',
+					Template: /*html*/`
+						<!-- DefaultPackage pict view template: [PRSP-Read-Basic-Template] -->
+						<h1>{~D:Record.RecordSet~} {~D:Record.GUIDAddress~} [{~D:Record.RecordConfiguration.GUIDRecord~}]</h1>
+						<!--
+						{~DJ:Record~}
+						-->
+						<div>
+							{~T:PRSP-Read-RecordRead-Template~}
+						</div>
+						<!-- DefaultPackage end view template:  [PRSP-Read-Basic-Template] -->
+						`
+				},
+				{
+					Hash: 'PRSP-Read-Split-Template',
+					Template: /*html*/`
+						<!-- DefaultPackage pict view template: [PRSP-Read-Split-Template] -->
+						<h1>{~D:Record.RecordSet~} {~D:Record.GUIDAddress~} [{~D:Record.RecordConfiguration.GUIDRecord~}]</h1>
+						<!--
+						{~DJ:Record~}
+						-->
+						<style>
+							.psrs-split-view
+							{
+								display: flex;
+								height: 100%;
+							}
+							.psrs-left-panel
+							{
+								overflow: scroll;
+							}
+							.psrs-right-panel
+							{
+								overflow: scroll;
+							}
+							#psrs-resize
+							{
+								width: 1px; 
+								padding-left: 10px;
+								padding-right: 10px;
+								cursor: col-resize;
+							}
+							#psrs-resize > div
+							{
+								width: 1px;
+								height: 100%;
+								background-color: rgba(0,0,0,0.5);
+							}
+							#PRSP-Read-Tab-Nav
+							{
+								display: flex;
+								border-bottom: 1px solid rgba(0,0,0,0.5);
+								margin-bottom: 20px;
+								width: 100%;
+							}
+							.psrs-tab.is-active
+							{
+								border: 1px solid rgba(0,0,0,0.5);
+							}
+							.psrs-tab
+							{
+								border-right: 1px solid rgba(0,0,0,0.5);
+								border-left: 1px solid rgba(0,0,0,0.5);
+								padding: 10px;
+							}
+							.psrs-tab-body
+							{
+								display: none;
+							}
+							.psrs-tab-body.is-active
+							{
+								display: inherit;
+							}
+						</style>
+						<div class="psrs-split-view">
+							<div class="psrs-left-panel" style="min-width: 50%;">
+								{~T:PRSP-Read-RecordRead-Template~}
+							</div>
+							<div id="psrs-resize">
+								<div></div>
+							</div>
+							<div class="psrs-right-panel" style="width: 100%;">
+								<div id="PRSP-Read-Tabs-Container">
+									{~T:PRSP-Read-RecordTabNav-Template~}
+									{~T:PRSP-Read-RecordTab-Template~}
+								</div>
+							</div>
+						</div>
+						<!-- DefaultPackage end view template:  [PRSP-Read-Split-Template] -->
+						`
+				},
+				{
+					Hash: 'PRSP-Read-Tab-Template',
+					Template: /*html*/`
+						<!-- DefaultPackage pict view template: [PRSP-Read-Tab-Template] -->
+						<h1>{~D:Record.RecordSet~} {~D:Record.GUIDAddress~} [{~D:Record.RecordConfiguration.GUIDRecord~}]</h1>
+						<!--
+						{~DJ:Record~}
+						-->
+						<style>
+							#PRSP-Read-Tab-Nav
+							{
+								display: flex;
+								border-bottom: 1px solid rgba(0,0,0,0.5);
+								margin-bottom: 20px;
+								width: 100%;
+							}
+							.psrs-tab.is-active
+							{
+								border: 1px solid rgba(0,0,0,0.5);
+							}
+							.psrs-tab
+							{
+								padding: 10px;
+								border-right: 1px solid rgba(0,0,0,0.5);
+								border-left: 1px solid rgba(0,0,0,0.5);
+							}
+							.psrs-tab-body
+							{
+								display: none;
+							}
+							.psrs-tab-body.is-active
+							{
+								display: inherit;
+							}
+						</style>
+						<div class="psrs-tab-view">
+							<div id="PRSP-Read-Tabs-Container">
+								{~T:PRSP-Read-RecordTabNav-Template~}
+								{~T:PRSP-Read-RecordTab-Template~}
+							</div>
+						</div>
+						<!-- DefaultPackage end view template:  [PRSP-Read-Tab-Template] -->
+						`
 				},
 				{
 					Hash: 'PRSP-Read-Link-Name-Template',
@@ -52,15 +225,27 @@ const _DEFAULT_CONFIGURATION__Read = (
 				{
 					Hash: 'PRSP-Read-Link-URL-Template',
 					// TODO: Double payload pattern...
-					Template: `#/PSRS/{~D:Record.Payload.Payload.RecordSet~}/Read/{~DVBK:Record.Payload.Data:Record.Payload.Payload.GUIDAddress~}`
+					Template: `#/PSRS/{~D:Record.Payload.Payload.RecordSet~}/View/{~DVBK:Record.Payload.Data:Record.Payload.Payload.GUIDAddress~}`
 				},
 			],
 
 		Renderables:
 			[
 				{
-					RenderableHash: 'PRSP_Renderable_Read',
-					TemplateHash: 'PRSP-Read-Template',
+					RenderableHash: 'PRSP_Renderable_Read_Basic',
+					TemplateHash: 'PRSP-Read-Basic-Template',
+					DestinationAddress: '#PRSP_Container',
+					RenderMethod: 'replace'
+				},
+				{
+					RenderableHash: 'PRSP_Renderable_Read_Split',
+					TemplateHash: 'PRSP-Read-Split-Template',
+					DestinationAddress: '#PRSP_Container',
+					RenderMethod: 'replace'
+				},
+				{
+					RenderableHash: 'PRSP_Renderable_Read_Tab',
+					TemplateHash: 'PRSP-Read-Tab-Template',
 					DestinationAddress: '#PRSP_Container',
 					RenderMethod: 'replace'
 				}
@@ -76,14 +261,66 @@ class viewRecordSetRead extends libPictRecordSetRecordView
 		let tmpOptions = Object.assign({}, _DEFAULT_CONFIGURATION__Read, pOptions);
 		super(pFable, tmpOptions, pServiceHash);
 
-		this.childViews = {
-			viewHeaderRead: null,
-			viewTabBarRead: null,
-			viewRecordRead: null,
-			viewRecordReadExtra: null
-		};
+		this.layoutType = 'Basic';
+		this.action = 'View';
+		this.tabs = [];
+		this.RecordSet = null;
+		this.providerHash = null;
+		this.activeTab = null;
+		this.mouseHandler = null;
+		this.manifest = null;
+		this.defaultManifest = null;
+		this.GUID = null;
+	}
+
+	initializeDragListener()
+	{
+		let isResizing = false;
+		const handleMouseMove = (event) =>
+		{
+			const resizer = document.getElementById("psrs-resize");
+			const leftPanel = document.querySelector(".psrs-left-panel");
+			const rightPanel = document.querySelector(".psrs-right-panel");
+			if (!isResizing || !(resizer.parentNode instanceof HTMLElement && leftPanel instanceof HTMLElement && rightPanel instanceof HTMLElement))
+			{
+				return;
+			}
+			const containerRect = resizer.parentNode.getBoundingClientRect();
+			const newLeftWidth = event.clientX - containerRect.left;
+			const newRightWidth = containerRect.width - newLeftWidth - resizer.offsetWidth;
+			leftPanel.style.width = `${newLeftWidth}px`;
+			leftPanel.style.minWidth = `${newLeftWidth}px`;
+			rightPanel.style.width = `${newRightWidth}px`;
+		}
+		if (!this.mouseHandler)
+		{
+			this.mouseHandler = (event) =>
+			{
+				isResizing = true;
+				document.body.style.userSelect = "none";
+				document.addEventListener("mousemove", handleMouseMove);
+				document.addEventListener("mouseup", () =>
+				{
+					isResizing = false;
+					document.body.style.userSelect = "";
+					document.removeEventListener("mousemove", handleMouseMove);
+				});
+			};
+		}
+		const resizer = document.getElementById("psrs-resize");
+		resizer.removeEventListener('mousedown', this.mouseHandler);
+		resizer.addEventListener("mousedown", this.mouseHandler);
 	}
 
+	onAfterRender(pRenderable)
+	{
+		if (this.layoutType == 'Split')
+		{
+			this.initializeDragListener();
+		}
+		
+		return super.onAfterRender(pRenderable);
+	}
 
 	handleRecordSetReadRoute(pRoutePayload)
 	{
@@ -92,7 +329,28 @@ class viewRecordSetRead extends libPictRecordSetRecordView
 			throw new Error(`Pict RecordSet Read view route handler called with invalid route payload.`);
 		}
 
+		this.action = 'View';
 		const tmpProviderConfiguration = this.pict.PictSectionRecordSet.recordSetProviderConfigurations[pRoutePayload.data.RecordSet];
+		this.layoutType = tmpProviderConfiguration?.ReadLayout || 'Basic'; 
+		const tmpProviderHash = `RSP-Provider-${pRoutePayload.data.RecordSet}`;
+
+		tmpProviderConfiguration.RoutePayload = pRoutePayload;
+		tmpProviderConfiguration.RecordSet = pRoutePayload.data.RecordSet;
+		tmpProviderConfiguration.GUIDRecord = pRoutePayload.data.GUIDRecord;
+
+		return this.renderRead(tmpProviderConfiguration, tmpProviderHash, pRoutePayload.data.GUIDRecord);
+	}
+
+	handleRecordSetEditRoute(pRoutePayload)
+	{
+		if (typeof(pRoutePayload) != 'object')
+		{
+			throw new Error(`Pict RecordSet Read view route handler called with invalid route payload.`);
+		}
+
+		this.action = 'Edit';
+		const tmpProviderConfiguration = this.pict.PictSectionRecordSet.recordSetProviderConfigurations[pRoutePayload.data.RecordSet];
+		this.layoutType = tmpProviderConfiguration?.ReadLayout || 'Basic'; 
 		const tmpProviderHash = `RSP-Provider-${pRoutePayload.data.RecordSet}`;
 
 		tmpProviderConfiguration.RoutePayload = pRoutePayload;
@@ -104,10 +362,31 @@ class viewRecordSetRead extends libPictRecordSetRecordView
 
 	addRoutes(pPictRouter)
 	{
-		pPictRouter.addRoute('/PSRS/:RecordSet/Read/:GUIDRecord', this.handleRecordSetReadRoute.bind(this));
+		pPictRouter.addRoute('/PSRS/:RecordSet/View/:GUIDRecord', this.handleRecordSetReadRoute.bind(this));
+		pPictRouter.addRoute('/PSRS/:RecordSet/Edit/:GUIDRecord', this.handleRecordSetEditRoute.bind(this));
 		return true;
 	}
 
+	async cancel()
+	{
+		await this.onBeforeView();
+		this.fable.providers.RecordSetRouter.pictRouter.navigate(`/PSRS/${ this.RecordSet }/View/${ this.GUID }`);
+	}
+
+	async save()
+	{
+		await this.onBeforeSave();
+		await this.pict.providers[this.providerHash].updateRecord(this.pict.AppData[`${ this.RecordSet }Details`]);
+		await this.onBeforeView();
+		this.fable.providers.RecordSetRouter.pictRouter.navigate(`/PSRS/${ this.RecordSet }/View/${ this.GUID }`);
+	}
+
+	async edit()
+	{
+		await this.onBeforeEdit();
+		this.fable.providers.RecordSetRouter.pictRouter.navigate(`/PSRS/${ this.RecordSet }/Edit/${ this.GUID }`);
+	}
+
 	onBeforeRenderRead(pRecordReadData)
 	{
 		this.formatDisplayData(pRecordReadData);
@@ -130,6 +409,26 @@ class viewRecordSetRead extends libPictRecordSetRecordView
 		return pRecordListData;
 	}
 
+	async onBeforeEdit()
+	{
+		// Hook that is called when transitioning to edit mode. 
+	}
+
+	async onBeforeSave()
+	{
+		// Hook that is called before saving.
+	}
+
+	async onBeforeView()
+	{
+		// Hook that is called when transitioning to view mode. 
+	}
+
+	async onBeforeTabChange()
+	{
+		// Hook that is called when transitioning between tabs.
+	}
+
 	async renderRead(pRecordConfiguration, pProviderHash, pRecordGUID)
 	{
 		// Get the records
@@ -140,27 +439,76 @@ class viewRecordSetRead extends libPictRecordSetRecordView
 		}
 
 		let tmpRecordReadData =
-			{
-				"RecordSet": pRecordConfiguration.RecordSet,
+		{
+			"RecordSet": pRecordConfiguration.RecordSet,
 
-				"RecordConfiguration": pRecordConfiguration,
+			"RecordConfiguration": pRecordConfiguration,
 
-				"RenderDestination": this.options.DefaultDestinationAddress,
+			"RenderDestination": this.options.DefaultDestinationAddress,
 
-				"Record": false,
-			};
+			"Record": false,
+		};
+
+		this.GUID = pRecordGUID;
+
+		if (pRecordConfiguration.RecordSet !== this.RecordSet)
+		{
+			this.RecordSet = pRecordConfiguration.RecordSet;
+			this.activeTab = null;
+		}
+
+		this.providerHash = pProviderHash;
 
 		// If the record configuration does not have a GUID, try to infer one from the RecordSet name
 		// TODO: This should be coming from the schema but that can come after we discuss how we deal with default routing
-		tmpRecordReadData.GUIDAddress = `GUID${this.pict.providers[pProviderHash].options.Entity}`;
+		tmpRecordReadData.GUIDAddress = this.pict.providers[pProviderHash].getGUIDField();
 
 		tmpRecordReadData.Record = await this.pict.providers[pProviderHash].getRecordByGUID(pRecordGUID);
 		tmpRecordReadData.RecordSchema = await this.pict.providers[pProviderHash].getRecordSchema();
+		this.pict.AppData[`${ tmpRecordReadData.RecordSet }Details`] = tmpRecordReadData.Record;
+
+		if (pRecordConfiguration.RecordSetReadManifestOnly)
+		{
+			this.pict.TemplateProvider.addTemplate(`PRSP-Read-RecordRead-Template`, /*html*/`
+				<!-- Manifest dynamic pict template: [PRSP-Read-RecordRead-Template] -->
+				<div>${ this._generateManifestTemplate(pRecordConfiguration, 'RecordRead', null, true) }</div>
+				{~T:PRSP-Read-RecordButtonBar-Template~}
+				<!-- Manifest dynamic pict end template: [PRSP-Read-RecordRead-Template] -->
+			`);
+		}
+		else
+		{
+			// Construct a default manifest based on the RecordSchema:
+			this.defaultManifest = await this._buildDefaultManifest(tmpRecordReadData.RecordSet);
+			this.pict.TemplateProvider.addTemplate(`PRSP-Read-RecordRead-Template`, /*html*/`
+				<!-- Manifest dynamic pict template: [PRSP-Read-RecordRead-Template] -->
+				<div>${ this._generateManifestTemplate(pRecordConfiguration, 'RecordRead', null, true, this.action, this.defaultManifest) }</div>
+				{~T:PRSP-Read-RecordButtonBar-Template~}
+				<!-- Manifest dynamic pict end template: [PRSP-Read-RecordRead-Template] -->
+			`);
+		}
+
+		if (this.layoutType !== 'Basic')
+		{
+			this.tabs = await this._structureTabs(pRecordConfiguration, tmpRecordReadData.Record);
+			this.pict.TemplateProvider.addTemplate('PRSP-Read-RecordTab-Template', /*html*/`
+				<!-- DefaultPackage pict view template: [PRSP-Read-RecordTab-Template] -->
+				${ this.tabs.map((t) => t.Template).join('') }
+				<!-- DefaultPackage end view template:  [PRSP-Read-RecordTab-Template] -->
+			`);
+			this.pict.TemplateProvider.addTemplate('PRSP-Read-RecordTabNav-Template', /*html*/`
+				<!-- DefaultPackage pict view template: [PRSP-Read-RecordTabNav-Template] -->
+				<div id="PRSP-Read-Tab-Nav">
+					${ this.tabs.map((t) => t.TabTemplate).join('') }
+				</div>
+				<!-- DefaultPackage end view template:  [PRSP-Read-RecordTabNav-Template] -->
+			`);
+		}
 
 		tmpRecordReadData = this.onBeforeRenderRead(tmpRecordReadData);
 
-		this.renderAsync('PRSP_Renderable_Read', tmpRecordReadData.RenderDestination, tmpRecordReadData,
-			function (pError)
+		this.renderAsync(`PRSP_Renderable_Read_${ this.layoutType }`, tmpRecordReadData.RenderDestination, tmpRecordReadData,
+			async function (pError)
 			{
 				if (pError)
 				{
@@ -176,22 +524,390 @@ class viewRecordSetRead extends libPictRecordSetRecordView
 				{
 					this.pict.log.info(`RecordSetRead: Rendered read ${tmpRecordReadData.RecordSet} with ${tmpRecordReadData.RecordConfiguration.GUIDRecord} []`);
 				}
+				for (const s of this.manifest?.Sections || [])
+				{
+					this.pict.views[`PictSectionForm-${ s.Hash }`].render();
+					this.pict.views[`PictSectionForm-${ s.Hash }`].marshalToView();
+				}
+				for (const t of this.tabs)
+				{
+					if (t.renderAsync)
+					{
+						await t.renderAsync();
+					}
+					else
+					{
+						t.render();
+					}
+				}
+				if (this.action == 'Edit')
+				{
+					document.getElementById('PRSP-Read-EditButton').classList.add('record-button-bar-hidden');
+					document.getElementById('PRSP-Read-SaveButton').classList.remove('record-button-bar-hidden');
+					document.getElementById('PRSP-Read-CancelButton').classList.remove('record-button-bar-hidden');
+				}
+				else
+				{
+					document.getElementById('PRSP-Read-EditButton').classList.remove('record-button-bar-hidden');
+					document.getElementById('PRSP-Read-SaveButton').classList.add('record-button-bar-hidden');
+					document.getElementById('PRSP-Read-CancelButton').classList.add('record-button-bar-hidden');
+				}
+				this.setTab(this.activeTab || this.tabs?.[0]?.Hash);
 				return true;
 			}.bind(this));
 	}
 
-	onInitialize()
+	async setTab(t)
 	{
-		this.childViews.headerRead = this.pict.addView('PRSP-Read-HeaderRead', viewHeaderRead.default_configuration, viewHeaderRead);
-		this.childViews.recordRead = this.pict.addView('PRSP-Read-RecordRead', viewRecordRead.default_configuration, viewRecordRead);
-		this.childViews.recordReadExtra = this.pict.addView('PRSP-Read-RecordReadExtra', viewRecordReadExtra.default_configuration, viewRecordReadExtra);
-		this.childViews.tabBarRead = this.pict.addView('PRSP-Read-TabBarRead', viewTabBarRead.default_configuration, viewTabBarRead);
+		if (this.activeTab !== t)
+		{
+			await this.onBeforeTabChange();
+		}
+		this.activeTab = t;
+		const tabSet = document.querySelectorAll('.psrs-tab');
+		const tabBodySet = document.querySelectorAll('.psrs-tab-body');
+		for (const tb of tabSet)
+		{
+			tb.classList.remove('is-active');
+			if (tb.id == `PSRS-TabNav-${ t }`)
+			{
+				tb.classList.add('is-active');
+			}
+		}
+		for (const tb of tabBodySet)
+		{
+			tb.classList.remove('is-active');
+			if (tb.id == `PSRS-Tab-${ t }`)
+			{
+				tb.classList.add('is-active');
+			}
+		}
+	}
+
+	async _buildDefaultManifest(recordSet)
+	{
+		// Construct a default manifest based on the RecordSchema:
+		const defaultManifest = 
+		{
+			"Form": "DefaultManifest",
+			"Scope": "Default",
+			"Descriptors": {},
+			"Sections": 
+			[
+				{
+					"Name": "",
+					"Hash": "DefaultSection",
+					"Solvers": [],
+					"ShowTitle": false,
+					"Groups": [
+						{
+							"Name": "",
+							"Hash": "DefaultGroup",
+							"Rows": [],
+							"RecordSetSolvers": [],
+							"ShowTitle": false
+						}
+					]
+				}
+			]
+		}
+		let rowCounter = 1;
+		const providerHash = `RSP-Provider-${ recordSet }`;
+		const schema = await this.pict.providers[providerHash].getRecordSchema();
+		for (const p of Object.keys(schema.properties))
+		{
+			const exclusionSet = [this.pict.providers[this.providerHash].getIDField(), this.pict.providers[this.providerHash].getGUIDField(), 'CreatingIDUser', 'UpdatingIDUser', 'DeletingIDUser', 'Deleted', 'CreateDate', 'UpdateDate', 'DeleteDate', 'Deleted'];
+			if (exclusionSet.includes(p))
+			{
+				continue;
+			}
+			const tmpDescriptor =
+			{
+				"Name": `${ this.pict.providers[providerHash].getHumanReadableFieldName?.() || p }`,
+				"Hash": `${ this.pict.providers[this.providerHash].options.Entity  }-${ p }`,
+				"DataType": "String",
+				"PictForm": 
+				{
+					"Row": `${ rowCounter }`,
+					"Section": "DefaultSection",
+					"Group": "DefaultGroup"
+				}
+			};
+			rowCounter += 1;
+			switch (schema.properties[p].type)
+			{
+				case 'string':
+				case 'autoguid':
+					tmpDescriptor.DataType = 'String';
+					break;
+				case 'datetime':
+				case 'date':
+				case 'createdate':
+				case 'updatedate':
+					tmpDescriptor.DataType = 'String';
+					tmpDescriptor.PictForm.InputType = 'DateTime'
+					break;
+				case 'boolean':
+				case 'deleted':
+					tmpDescriptor.DataType = 'Boolean';
+				case 'integer':
+				case 'decimal':
+				case 'autoidentity':
+				case 'createiduser':
+				case 'updateiduser':
+				case 'deleteiduser':
+					tmpDescriptor.DataType = 'Number';
+					break;
+				default:
+					tmpDescriptor.DataType = 'String';
+			}
+
+			defaultManifest.Descriptors[`${ recordSet }Details.${ p }`] = tmpDescriptor;
+		}
+		return defaultManifest;
+	}
 
-		// // Initialize the subviews
-		this.childViews.headerRead.initialize();
-		this.childViews.recordRead.initialize();
-		this.childViews.recordReadExtra.initialize();
-		this.childViews.tabBarRead.initialize();
+	_generateManifestTemplate(config, section, specificManifest, setBaseManifest, action = this.action, defaultManifest)
+	{
+		// Look for a manifest by the action (if there is no specific manifest passed) and fallback to view if the action manifest isn't present.
+		const tmpManifestHash = specificManifest || config[`RecordSetReadDefaultManifest${ action }`] || config[`RecordSetReadManifests${ action }`]?.[0] || config[`RecordSetReadDefaultManifestView`] || config[`RecordSetReadManifestsView`]?.[0];
+		// Make sure the copy of the manifest doesn't mutate the original (for read only handling).
+		const tmpManifest = JSON.parse(JSON.stringify(defaultManifest ? defaultManifest : this.pict.PictSectionRecordSet.getManifest(tmpManifestHash)));
+		if (!tmpManifest)
+		{
+			this.pict.log.error(`RecordSetRead: No manifest found for ${ config.RecordSet }. Read Render failed.`);
+			return '';
+		}
+		if (!tmpManifest.Descriptors)
+		{
+			this.pict.log.error(`RecordSetRead: No manifest descriptors found for manifest ${ tmpManifestHash }. Read Render failed.`);
+			return '';
+		}
+		else if (action == 'View' && !config.RecordSetReadOverrideReadOnly)
+		{
+			// If we are in view mode, apply the read only type unless overriden.
+			for (const x of Object.keys(tmpManifest.Descriptors))
+			{
+				if (!tmpManifest.Descriptors[x].PictForm)
+				{
+					tmpManifest.Descriptors[x].PictForm = {};
+				}
+				tmpManifest.Descriptors[x].PictForm.InputType = 'ReadOnly';
+			}
+		}
+		if (setBaseManifest)
+		{
+			this.manifest = tmpManifest;
+		}
+		let sectionsTemplate = '';
+		// Clear any stale views in PictSectionForm before reinstantiating (if we don't the read only state doesn't get cleared).
+		for (const s of tmpManifest?.Sections || [])
+		{
+			delete this.pict.views[`PictSectionForm-${ s.Hash }`]
+		}
+		this.pict.views.PictFormMetacontroller.bootstrapPictFormViewsFromManifest(tmpManifest);
+
+		for (const pickList of tmpManifest?.PickLists || [])
+		{
+			this.pict.providers.DynamicMetaLists.rebuildListByHash(pickList.Hash);
+		}
+
+		for (const s of tmpManifest?.Sections || [])
+		{
+			const viewSectionID = `PSRS-Read-${ section }-Section-${ s.Hash }`;
+			sectionsTemplate += /*html*/`<div id="${ viewSectionID }"></div>`;
+			this.pict.views[`PictSectionForm-${ s.Hash }`].viewMarshalDestination = 'AppData';
+			this.pict.views[`PictSectionForm-${ s.Hash }`].options.DefaultDestinationAddress = `#${ viewSectionID }`;
+			this.pict.views[`PictSectionForm-${ s.Hash }`].rebuildCustomTemplate();
+		}
+		return sectionsTemplate
+	}
+
+	async _structureTabs(config, record)
+	{
+		const validTabs = config.ReadLayout == 'Tab' ? 
+		[
+			{
+				Type: 'Record',
+				RecordSet: config.RecordSet,
+				Title: config.RecordSetReadTabTitle || 'Record',
+				Hash: 'Record',
+				Template: /*html*/`
+					<div id="PSRS-Tab-Record" class="psrs-tab-body">{~T:PRSP-Read-RecordRead-Template~}</div>
+				`,
+				TabTemplate: /*html*/`
+					<div class="psrs-tab" id="PSRS-TabNav-Record" onclick="_Pict.views['RSP-RecordSet-Read'].setTab('Record')">${ config.RecordSetReadTabTitle || 'Record' }</div>
+				`,
+				render: () => {}
+			}
+		] : [];
+
+		for (const t of config.RecordSetReadTabs)
+		{
+			if (!t.Title)
+			{
+				this.pict.log.info('Skipping tab that is missing title.');
+				continue;
+			}
+			if (!t.Hash)
+			{
+				t.Hash = t.Title.replaceAll(' ', '');
+			}
+			if (t.Type == 'Manifest' || t.Type == 'AttachedRecord')
+			{
+				let recordSetConfig = null;
+				let tmpManifest = null;
+				if (t.Type == 'AttachedRecord')
+				{
+					const getMethod = async (remote, id) => {
+						if (this.pict.providers[`RSP-Provider-${ remote }`])
+						{
+							return await this.pict.providers[`RSP-Provider-${ remote }`].getRecord(id);
+						}
+						else
+						{
+							return await new Promise((resolve, reject) =>
+							{
+								this.pict.EntityProvider.getEntity(remote, id, (pError, pResult) =>
+								{
+									if (pError)
+									{
+										resolve(null);
+									}
+									resolve(pResult);
+								});
+							});
+						}
+					};
+
+					const getJoin = async (remote, field, value) => {
+						let result = null;
+						if (this.pict.providers[`RSP-Provider-${ remote }`])
+						{
+							result = await this.pict.providers[`RSP-Provider-${ remote }`].getRecordsInline(`FBV~${ field }~EQ~${ value }`);
+						}
+						else
+						{
+							result = await new Promise((resolve, reject) =>
+							{
+								this.pict.EntityProvider.getEntitySet(remote, `FBV~${ field }~EQ~${ value }`, (pError, pResult) =>
+								{
+									if (pError)
+									{
+										resolve(null);
+									}
+									resolve(pResult);
+								});
+							});
+						}
+						return result?.[0] || null;
+					};
+					
+					if (!t.RecordSet)
+					{
+						this.pict.log.info(`Skipping attached record tab because no recordset was included.`);
+					}
+					recordSetConfig = this.pict.PictSectionRecordSet.recordSetProviderConfigurations[t.RecordSet];
+					if (!recordSetConfig)
+					{
+						this.pict.log.info(`Skipping attached record tab because recordset ${ t.RecordSet } is not registered.`);
+						continue;
+					}
+					t.Manifest = recordSetConfig.RecordSetReadDefaultManifestView || recordSetConfig.RecordSetReadManifestsView?.[0];
+					tmpManifest = recordSetConfig.RecordSetReadManifestOnly ? this.pict.PictSectionRecordSet.getManifest(t.Manifest) : await this._buildDefaultManifest(recordSetConfig.RecordSetMeadowEntity || recordSetConfig.RecordSet);
+					if (!tmpManifest)
+					{
+						this.pict.log.info(`Skipping manifest tab because manifest ${ t.Manifest } is not registered or default manifest could not be constructed.`);
+						continue;
+					}
+					if (!t.JoinField)
+					{
+						t.JoinField = this.pict.providers[`RSP-Provider-${ t.RecordSet }`].getIDField();
+					}
+					if (t.JoiningRecordSet)
+					{
+						if (!t.BaseField)
+						{
+							t.BaseField = this.pict.providers[`RSP-Provider-${ config.RecordSet }`].getIDField();
+						}
+						if (!record[t.BaseField])
+						{
+							this.pict.log.info(`Skipping attached record tab because field ${ t.BaseField } does not exist on this record.`);
+							continue;
+						}
+						const tempJoin = await getJoin(t.JoiningRecordSet, t.BaseField, record[t.BaseField]);
+						if (!tempJoin?.[t.JoinField])
+						{
+							this.pict.log.info(`Skipping attached record tab because joining field ${ t.JoinField } does not exist on this record.`);
+							continue;
+						}
+						const tempRecord = await getMethod(recordSetConfig.RecordSetMeadowEntity || recordSetConfig.RecordSet, tempJoin[t.JoinField]);
+						this.pict.AppData[`${ t.RecordSet }Details`] = tempRecord;
+					}
+					else
+					{
+						if (!record[t.Joinfield])
+						{
+							this.pict.log.info(`Skipping attached record tab because joining field ${ t.JoinField } does not exist on this record.`);
+							continue;
+						}
+						const tempRecord = await getMethod(recordSetConfig.RecordSetMeadowEntity || recordSetConfig.RecordSet, record[t.Joinfield]);
+						this.pict.AppData[`${ t.RecordSet }Details`] = tempRecord;
+					}
+				}
+				if (!tmpManifest)
+				{
+					tmpManifest = this.pict.PictSectionRecordSet.getManifest(t.Manifest);
+				}
+				t.Template = /*html*/`
+					<div id="PSRS-Tab-${ t.Hash }" class="psrs-tab-body">${ this._generateManifestTemplate(config, 'RecordTab', t.Manifest, false, 'View', recordSetConfig && !recordSetConfig.RecordSetReadManifestOnly ? tmpManifest : null) }</div>
+				`;
+				t.TabTemplate = /*html*/`
+					<div class="psrs-tab" id="PSRS-TabNav-${ t.Hash }" onclick="_Pict.views['RSP-RecordSet-Read'].setTab('${ t.Hash }')">${ t.Title }</div>
+				`;
+				t.render = () =>
+				{
+					// @ts-ignore
+					for (const s of tmpManifest?.Sections || [])
+					{
+						this.pict.views[`PictSectionForm-${ s.Hash }`].render();
+						this.pict.views[`PictSectionForm-${ s.Hash }`].marshalToView();
+					}
+				};
+				validTabs.push(t);
+			}
+			else if (t.Type == 'View')
+			{
+				if (!t.View)
+				{
+					this.pict.log.info(`Skipping view tab because no view was included.`);
+					continue;
+				}
+				const tmpView = this.pict.views[t.View];
+				if (!tmpView)
+				{
+					this.pict.log.info(`Skipping view tab because view ${ t.View } is not registered.`);
+					continue;
+				}
+				t.Template = /*html*/`
+					<div id="PSRS-Tab-${ t.Hash }" class="psrs-tab-body"></div>
+				`;
+				t.TabTemplate = /*html*/`
+					<div class="psrs-tab" id="PSRS-TabNav-${ t.Hash }" onclick="_Pict.views['RSP-RecordSet-Read'].setTab('${ t.Hash }')">${ t.Title }</div>
+				`;
+				tmpView.options.DefaultDestinationAddress = `#PSRS-Tab-${ t.Hash }`;
+				t.render = () =>
+				{
+					this.pict.views[`${ t.View }`].renderAsync();
+				};
+				validTabs.push(t);
+			}
+		}
+		return validTabs;
+	}
+
+	onInitialize()
+	{
 
 		// Add the route templates for the read view
 		this.pict.PictSectionRecordSet.addRecordLinkTemplate('PRSP-Read-Link-Name-Template', 'PRSP-Read-Link-URL-Template', true);