How to create a Master - Detail using File Listing

[BrooksV]

I am creating a Static Website which displays a list of HTML Files on the left and when clicking on the filename which is linked using New-HTMLLink and New-HtmlTable -InvokeHTMLTags to hyper link the filenames

When the link is clicked, I would link the html file to display on the right panel / sections

Here is the basic code

$PolicyData = $FileData | Select-Object -Property @{name="List of Documentation Files"; expression={(New-HTMLLink -Text $_.DisplayName -HrefLink "$($urlPath)$($_.FileName)" -Target '_details' -Id $_.PolicyId)}}
New-HTML -TitleText 'Documentation Files' -Online -Author 'me' -FilePath "c:/temp/test-01.html" -ShowHTML -AddComment {
    New-HTMLSection -HeaderText 'Documentation Files' {
        New-HTMLSection -HeaderText "Select File to View" -HeaderTextColor Black -HeaderBackGroundColor "#EA8B05" -Content {
            New-HTMLPanel {
                New-HTMLTable -DataTableID 'master' -InvokeHTMLTags -DataTable $PolicyData -Title 'Policy Docs' -FilteringLocation Both -Filtering {

                } -Buttons @('copyHtml5', 'excelHtml5', 'csvHtml5', 'pdfHtml5', 'pageLength', 'searchPanes') -PagingLength 5
            }
        }
        New-HTMLSection -HeaderText "Selected Policy Details" -Content {
            New-HTMLPanel -AnchorName '_details' {
            }
        }
    }
}

Unable to attach screen shot

I am a novice when it comes to HTML and I am at a loss on how to make this work.

Any Suggestions?

[BrooksV]

I got it to work by having to replace the iFrame Id='' with iFrame Name=''

From what I have read, iFrame Name attribute was deprecated. I guess no one told the Chrome and MS Edge Teams.

Any plans to support the iFrame Name attribute? Or how about a -Custom property so we can add any missing attributes to the tag?

Here is the updated code:

$PolicyData = $FileData | Select-Object -Property @{name="List of Documentation Files"; expression={(New-HTMLLink -Text $_.DisplayName -HrefLink "$($urlPath)$($_.FileName)" -Target 'details_a' -Id $_.PolicyId)}}
New-HTML -TitleText 'Documentation Files' -Online -Author 'me' -FilePath "c:/temp/test-01.html" -ShowHTML -AddComment {(
    New-HTMLSection -HeaderText 'Documentation Files' {
        New-HTMLSection -HeaderText "Select File to View" -HeaderTextColor Black -HeaderBackGroundColor "#EA8B05" -Content {
            New-HTMLTable -DataTableID 'master' -InvokeHTMLTags -DataTable $PolicyData -Title 'Policy Docs' -FilteringLocation Both -Filtering {

            } -Buttons @('copyHtml5', 'excelHtml5', 'csvHtml5', 'pdfHtml5', 'pageLength', 'searchPanes') -PagingLength -1
        }
        New-HTMLSection -HeaderText "Selected Policy Details" -AnchorName 'details_section' -Height 'calc(100vh - 20px)' -Content {
            New-HTMLFrame -Id 'details_a' -UseiFrameResizer -FrameBorder 2 -Height 'calc(100vh - 20px)'
        }
    }
 ) -replace '<iframe id="details_a"','<iframe name="details_a"'}

[PrzemyslawKlys]

I am not sure what you're exactly doing, but there's no need to do any replacements or things like that

Which gives you this:

Where the iFrame refers to a an existing file on disk (highlighted red)

[BrooksV]

I needed to create an Index of HTML files on the left sections uses html links with target="details-a" and when clicked the link it needs to open in the iFrame in the right section.

If I use for the iFrame in the right section <iframe id="details_a" it does not work, if I use <iframe name="details_a" it works