Closed amolsp777 closed 1 year ago
There are 2 ways to do it:
If you are in control you can work around things. I use either New-HTMLPage or New-HTMLFrame all the time.
I tried to use New-HTMLPage but had no luck. Maybe I am not using the correct syntaxes.
I think it's a bug. I'll fix it.
Actually no bug.
$DataTable1 = @(
[PSCustomObject] @{ Test = 'Name'; Test2 = 'Name2'; Test3 = 'Name3'; Test4 = 1.42 }
[PSCustomObject] @{ Test = 'Name'; Test2 = 'Name2'; Test3 = 'Name3'; Test4 = 1.72 }
[PSCustomObject] @{ Test = 'Name'; Test2 = 'Name2'; Test3 = 'Name3'; Test4 = 1.22 }
[PSCustomObject] @{ Test = 'Name'; Test2 = 'Name2'; Test3 = 'Name3'; Test4 = 2.73 }
)
New-HTML -TitleText 'Testing Navigation' {
New-HTMLNavTop -Logo 'https://evotec.xyz/wp-content/uploads/2021/04/Logo-evotec-bb.png' -LogoLinkHome {
New-NavTopMenu -Name 'Domains' -IconRegular address-book {
New-NavLink -IconMaterial airplane -Name 'This is internal link 1' -InternalPageID 'Page 1'
New-NavLink -IconSolid address-book -Href 'https://evotec.xyz' -Name 'This is link to evotec' -IconColor Pink -NameColor Red
New-NavLink -Name 'This is link 3' -IconBrands apple-pay {
New-NavLink -IconMaterial airplane -Href 'https://evotec.xyz' -Name 'This is link 5'
New-NavLink -IconSolid address-book -Name 'This is link 6' {
New-NavLink -Name 'This is link 3' -IconBrands confluence {
New-NavLink -IconMaterial airplane -Href 'https://evotec.xyz' -Name 'This is link 5'
New-NavLink -IconSolid address-book -Href 'https://evotec.xyz' -Name 'This is link 6'
}
}
}
}
New-NavTopMenu -Name 'Domain Controllers' -IconSolid ambulance {
New-NavLink -IconMaterial airplane -Name 'This is link 1 (internal)' -InternalPageID 'Page 2'
New-NavLink -IconSolid address-book -Href 'https://evotec.xyz' -Name 'This is link 2'
New-NavLink -IconBrands codiepie -Href 'https://evotec.xyz' -Name 'This is link 3'
}
New-NavTopMenu -Name 'Office 365' {
New-NavLink -IconMaterial airplane -Href 'https://evotec.xyz' -Name 'This is link 1'
New-NavLink -IconSolid address-book -Href 'https://evotec.xyz' -Name 'This is link 2'
New-NavLink -IconBrands codiepie -Href 'https://evotec.xyz' -Name 'This is link 4'
}
} #-MenuColor Black -MenuColorBackground Pink -HomeColorBackground Black -HomeColor Red
New-HTMLHeader {
New-HTMLText -Text 'In header - main page'
}
New-HTMLTab -Name 'Test 21' {
New-HTMLText -Text "This is first page - tab 1" -Color Red -FontSize 40px -Alignment center
}
New-HTMLTab -Name 'Test 22' {
New-HTMLText -Text "This is first page - tab 2" -Color Red -FontSize 40px -Alignment center
}
New-HTMLFooter {
New-HTMLText -Text 'In footer - main page'
}
New-HTMLPage -Name 'Page 1' {
New-HTMLHeader {
New-HTMLText -Text 'In header'
}
New-HTMLTab -Name 'Test 1' {
New-HTMLSection -HeaderText 'Test 0' {
New-HTMLTable -DataTable $DataTable1 -Title 'Test2' -PagingLength 2
}
New-HTMLSection -HeaderText 'Test 1' {
New-HTMLTable -DataTable $DataTable1 -Title 'Test2' -PagingLength 2
}
}
New-HTMLTab -Name 'Test 2' {
}
New-HTMLFooter {
New-HTMLText -Text 'In footer'
}
}
New-HTMLPage -Name 'Page 2' {
New-HTMLSection -HeaderText 'Test2' {
New-HTMLTable -DataTable $DataTable1 -Title 'Test2' -PagingLength 2
}
}
} -ShowHTML -Online -FilePath $PSScriptRoot\Example41-Navigation03.html
Thanks for sharing this Example. Now what is I need to load the HTML page which is output of Dashimo. I want to load the exported HTML output in the Page 1 content body, so by that it will not leave the make Menu page.
I tried replacing
New-HTMLPage -Name 'Page 1' {
New-HTMLHeader {
New-HTMLText -Text 'In header'
}
New-HTMLTab -Name 'Test 1' {
New-HTMLSection -HeaderText 'Test 0' {
New-HTMLTable -DataTable $DataTable1 -Title 'Test2' -PagingLength 2
}
New-HTMLSection -HeaderText 'Test 1' {
New-HTMLTable -DataTable $DataTable1 -Title 'Test2' -PagingLength 2
}
}
New-HTMLTab -Name 'Test 2' {
}
New-HTMLFooter {
New-HTMLText -Text 'In footer'
}
}
With this as testing, I know this is incorrect but just looking to see if we can use any command to load the other HTML page here without creating a new HTML page from this Master script. So the idea is to have this as the Master page with small checks, but other heavy scripts will run separately and generate the output then we can call those from this master page
New-HTMLPage -Name 'Page 1' {
New-HTMLHeader {
New-HTMLText -Text 'In header'
New-HTMLContent -Content "P:\_Scripts\Dashboards_Testing\VMinventory.html"
}
New-HTMLFooter {
New-HTMLText -Text 'In footer'
}
}
Here is the complete code
$DataTable1 = @(
[PSCustomObject] @{ Test = 'Name'; Test2 = 'Name2'; Test3 = 'Name3'; Test4 = 1.42 }
[PSCustomObject] @{ Test = 'Name'; Test2 = 'Name2'; Test3 = 'Name3'; Test4 = 1.72 }
[PSCustomObject] @{ Test = 'Name'; Test2 = 'Name2'; Test3 = 'Name3'; Test4 = 1.22 }
[PSCustomObject] @{ Test = 'Name'; Test2 = 'Name2'; Test3 = 'Name3'; Test4 = 2.73 }
)
New-HTML -TitleText 'Testing Navigation' {
New-HTMLNavTop -Logo 'https://evotec.xyz/wp-content/uploads/2021/04/Logo-evotec-bb.png' -LogoLinkHome {
New-NavTopMenu -Name 'Domains' -IconRegular address-book {
New-NavLink -IconMaterial airplane -Name 'This is internal link 1' -InternalPageID 'Page 1'
New-NavLink -IconSolid address-book -Href 'https://evotec.xyz' -Name 'This is link to evotec' -IconColor Pink -NameColor Red
New-NavLink -Name 'This is link 3' -IconBrands apple-pay {
New-NavLink -IconMaterial airplane -Href 'https://evotec.xyz' -Name 'This is link 5'
New-NavLink -IconSolid address-book -Name 'This is link 6' {
New-NavLink -Name 'This is link 3' -IconBrands confluence {
New-NavLink -IconMaterial airplane -Href 'https://evotec.xyz' -Name 'This is link 5'
New-NavLink -IconSolid address-book -Href 'https://evotec.xyz' -Name 'This is link 6'
}
}
}
}
New-NavTopMenu -Name 'Domain Controllers' -IconSolid ambulance {
New-NavLink -IconMaterial airplane -Name 'This is link 1 (internal)' -InternalPageID 'Page 2'
New-NavLink -IconSolid address-book -Href 'https://evotec.xyz' -Name 'This is link 2'
New-NavLink -IconBrands codiepie -Href 'https://evotec.xyz' -Name 'This is link 3'
}
New-NavTopMenu -Name 'Office 365' {
New-NavLink -IconMaterial airplane -Href 'https://evotec.xyz' -Name 'This is link 1'
New-NavLink -IconSolid address-book -Href 'https://evotec.xyz' -Name 'This is link 2'
New-NavLink -IconBrands codiepie -Href 'https://evotec.xyz' -Name 'This is link 4'
}
} #-MenuColor Black -MenuColorBackground Pink -HomeColorBackground Black -HomeColor Red
New-HTMLHeader {
New-HTMLText -Text 'In header - main page'
}
New-HTMLTab -Name 'Test 21' {
New-HTMLText -Text "This is first page - tab 1" -Color Red -FontSize 40px -Alignment center
}
New-HTMLTab -Name 'Test 22' {
New-HTMLText -Text "This is first page - tab 2" -Color Red -FontSize 40px -Alignment center
}
New-HTMLFooter {
New-HTMLText -Text 'In footer - main page'
}
New-HTMLPage -Name 'Page 1' {
New-HTMLHeader {
New-HTMLText -Text 'In header'
New-HTMLContent -Content "P:\_Scripts\Dashboards_Testing\VMinventory.html"
}
New-HTMLFooter {
New-HTMLText -Text 'In footer'
}
}
New-HTMLPage -Name 'Page 2' {
New-HTMLSection -HeaderText 'Test2' {
New-HTMLTable -DataTable $DataTable1 -Title 'Test2' -PagingLength 2
}
}
#} -ShowHTML -Online -FilePath $PSScriptRoot\Example41-Navigation03.html
}-ShowHTML -Online -FilePath "P:\_Scripts\Dashboards_Testing\Home.html"
So the thing is you can't modify existing HTML document without heavy parsing. When I created the NavBars (3 kinds) what I did is actually thought on how to address the issue that you are having. Essentially all my modules GPOZaurr/Testimo and so on, all generrate HTML reports and how to combine them into a single Dashboard.
The problem is:
So I did entertain the idea that I would have PSWriteHTML use PSParseHTML to get current scripts, compare with new scripts, merge NavBar at the top which may or may not work. But then I was thinking - ok, this will require the reports to be generrated by PSWriteHTML and if you try to merge anything else it will be bonkers. There's just too many unknowns. Like I wanted to integrated PingCastle to it.
So what I did instead is use New-HTMLFrame. Basically you create pages as you do above, that link to existing HTML files that are displayed within a frame. And it works.
I've created project TheDashboard which takes existing files, and history of the reports and merges it into a dashboard
And then if you choose report, you go to next page, which then shows you newest report, but with ability to go back in time and check older reports (if present). The marked rectangle is basically a frame that displays HTML that sits somewhere else. So the main page is small (if you use links, not include full CSS/JS), that links to a much larger document.
I guess you're trying to build something similar, and I have this working on IIS/SharePoint for a long time now where I've learnt what works, what doesn't. I do plan on releasing TheDashboard, but I'm thinking on it as "sponsorware" at the moment. But I have not decided yet on how to do it. If you want to do it yourself, New-HTMLFrame is what you need.
Thanks. Let me digest this and test it.
That worked, as I wanted to. Thanks for giving this life saver Module. So what I tried and what is the concern now.
I tried the below code I working perfectly fine as the mentioned page opens in the same master page panel.
> Working
New-HTML {
New-HTMLNavTop -Logo 'https://evotec.xyz/wp-content/uploads/2021/04/Logo-evotec-bb.png' -LogoLinkHome -MenuColorBackground LightBlue -HomeColor black -MenuColor Black -HomeColorBackground White -HomeLinkHome {
#endregion Top Menu part
#region All the Menus
New-NavTopMenu -Name 'Report' -IconSolid receipt {
New-NavLink -IconMaterial accounts-alt -Name 'VM Inventory' -InternalPageID 'Page 1'
New-NavLink -IconMaterial alarm-check -Name 'Server reboot' -InternalPageID 'Page 2'
New-NavLink -Name 'Inventory' -IconBrands blogger {
New-NavLink -IconMaterial airplane -Href 'https://evotec.xyz' -Name 'This is link 5'
New-NavLink -IconSolid address-book -Name 'This is link 6' {
New-NavLink -Name 'This is link 3' -IconBrands confluence {
New-NavLink -IconMaterial airplane -Href 'https://evotec.xyz' -Name 'This is link 5'
New-NavLink -IconSolid address-book -Href 'https://evotec.xyz' -Name 'This is link 6'
}
}
}
}
New-NavTopMenu -Name ' Bookmarks' -IconSolid bookmark {
New-NavLink -IconSolid address-book -Href 'https://portal.azure.com' -Name 'Azure'
New-NavLink -IconBrands codiepie -Href 'https://www.vmware.com/support/services.html' -Name 'VMware Support'
New-NavLink -IconBrands codiepie -Href 'https://github.com/' -Name 'GitHub'
}
New-NavTopMenu -Name 'IntraLinks' {
New-NavLink -IconMaterial airplane -Href 'https://evotec.xyz' -Name 'This is link 1'
New-NavLink -IconSolid address-book -Href 'https://evotec.xyz' -Name 'This is link 2'
New-NavLink -IconBrands codiepie -Href 'https://evotec.xyz' -Name 'This is link 4'
}
#endregion All the Menus
} #-MenuColor Black -MenuColorBackground Pink -HomeColorBackground Black -HomeColor Red
New-HTMLPage -Name 'Page 1' {
New-HTMLSection {
New-HTMLFrame -SourcePath "P:\InfraWeb\VMInventory\Home.html" -Scrolling Auto -Height 1500px
} -HeaderText 'VM Inventory'
}
New-HTMLPage -Name 'Page 2' {
New-HTMLSection {
New-HTMLFrame -SourcePath "P:\InfraWeb\RebootCheck\Home.html" -Scrolling Auto -Height 1500px
} -HeaderText 'Server reboot'
}
<#
New-HTMLSection {
New-HTMLFrame -SourcePath "https://google.com"
} -HeaderText 'Test' -Height 100px
#>
} -Online -TitleText 'Test Inline' -ShowHTML -FilePath "$PSScriptRoot\Example-InlineHTML01.html" -AddComment
Now if I am trying to add the Tab or Section its not working properly and data also not showing in formated way.
New-HTML {
New-HTMLNavTop -Logo 'https://evotec.xyz/wp-content/uploads/2021/04/Logo-evotec-bb.png' -LogoLinkHome -MenuColorBackground LightBlue -HomeColor black -MenuColor Black -HomeColorBackground White -HomeLinkHome {
#endregion Top Menu part
#region All the Menus
New-NavTopMenu -Name 'Report' -IconSolid receipt {
New-NavLink -IconMaterial accounts-alt -Name 'VM Inventory' -InternalPageID 'Page 1'
New-NavLink -IconMaterial alarm-check -Name 'Server reboot' -InternalPageID 'Page 2'
New-NavLink -Name 'Inventory' -IconBrands blogger {
New-NavLink -IconMaterial airplane -Href 'https://evotec.xyz' -Name 'This is link 5'
New-NavLink -IconSolid address-book -Name 'This is link 6' {
New-NavLink -Name 'This is link 3' -IconBrands confluence {
New-NavLink -IconMaterial airplane -Href 'https://evotec.xyz' -Name 'This is link 5'
New-NavLink -IconSolid address-book -Href 'https://evotec.xyz' -Name 'This is link 6'
}
}
}
}
New-NavTopMenu -Name ' Bookmarks' -IconSolid bookmark {
New-NavLink -IconSolid address-book -Href 'https://portal.azure.com' -Name 'Azure'
New-NavLink -IconBrands codiepie -Href 'https://www.vmware.com/support/services.html' -Name 'VMware Support'
New-NavLink -IconBrands codiepie -Href 'https://github.com/' -Name 'GitHub'
}
New-NavTopMenu -Name 'IntraLinks' {
New-NavLink -IconMaterial airplane -Href 'https://evotec.xyz' -Name 'This is link 1'
New-NavLink -IconSolid address-book -Href 'https://evotec.xyz' -Name 'This is link 2'
New-NavLink -IconBrands codiepie -Href 'https://evotec.xyz' -Name 'This is link 4'
}
#endregion All the Menus
} #-MenuColor Black -MenuColorBackground Pink -HomeColorBackground Black -HomeColor Red
New-HTMLPage -Name 'Page 1' {
New-HTMLSection {
New-HTMLFrame -SourcePath "P:\InfraWeb\VMInventory\Home.html" -Scrolling Auto -Height 1500px
} -HeaderText 'VM Inventory'
}
New-HTMLPage -Name 'Page 2' {
New-HTMLSection {
New-HTMLFrame -SourcePath "P:\InfraWeb\RebootCheck\Home.html" -Scrolling Auto -Height 1500px
} -HeaderText 'Server reboot'
}
New-HTMLTab -Name 'Dashboard' -IconRegular chart-bar {
New-HTMLSection -Name 'Block info' -Width 10% {
New-HTMLSection -Name 'Sub-Block info' -Margin 10 -Width 15% {
New-HTMLPanel -Margin 10 {
New-HTMLPanel -BackgroundColor lightgreen -AlignContentText right -BorderRadius 10px {
New-HTMLText -TextBlock {
# New-HTMLText -Text $UserDisabled -Alignment justify -FontSize 25 -FontWeight bold
New-HTMLText -Text 50 -Alignment justify -FontSize 25 -FontWeight bold
New-HTMLText -Text 'Active Test' -Alignment justify -FontSize 15
New-HTMLTag -Tag 'i' -Attributes @{ class = "fas fa-user-slash fa-3x" }
}
}
New-HTMLPanel -BackgroundColor yellowgreen -AlignContentText right -BorderRadius 10px {
New-HTMLText -TextBlock {
#New-HTMLText -Text $userinactive -Alignment justify -FontSize 25 -FontWeight bold
New-HTMLText -Text 130 -Alignment justify -FontSize 25 -FontWeight bold
New-HTMLText -Text 'Failed Test' -Alignment justify -FontSize 15
New-HTMLTag -Tag 'span' -Attributes @{ class = "fas fa-user-clock fa-3x" }
}
}
}
}
}
}
} -Online -TitleText 'Test Inline' -ShowHTML -FilePath "$PSScriptRoot\Example-InlineHTML01.html" -AddComment
Just move New-HTMLPage to the end, as it's supposed to be processed as last.
New-HTML {
New-HTMLNavTop -Logo 'https://evotec.xyz/wp-content/uploads/2021/04/Logo-evotec-bb.png' -LogoLinkHome -MenuColorBackground LightBlue -HomeColor black -MenuColor Black -HomeColorBackground White -HomeLinkHome {
#endregion Top Menu part
#region All the Menus
New-NavTopMenu -Name 'Report' -IconSolid receipt {
New-NavLink -IconMaterial accounts-alt -Name 'VM Inventory' -InternalPageID 'Page 1'
New-NavLink -IconMaterial alarm-check -Name 'Server reboot' -InternalPageID 'Page 2'
New-NavLink -Name 'Inventory' -IconBrands blogger {
New-NavLink -IconMaterial airplane -Href 'https://evotec.xyz' -Name 'This is link 5'
New-NavLink -IconSolid address-book -Name 'This is link 6' {
New-NavLink -Name 'This is link 3' -IconBrands confluence {
New-NavLink -IconMaterial airplane -Href 'https://evotec.xyz' -Name 'This is link 5'
New-NavLink -IconSolid address-book -Href 'https://evotec.xyz' -Name 'This is link 6'
}
}
}
}
New-NavTopMenu -Name ' Bookmarks' -IconSolid bookmark {
New-NavLink -IconSolid address-book -Href 'https://portal.azure.com' -Name 'Azure'
New-NavLink -IconBrands codiepie -Href 'https://www.vmware.com/support/services.html' -Name 'VMware Support'
New-NavLink -IconBrands codiepie -Href 'https://github.com/' -Name 'GitHub'
}
New-NavTopMenu -Name 'IntraLinks' {
New-NavLink -IconMaterial airplane -Href 'https://evotec.xyz' -Name 'This is link 1'
New-NavLink -IconSolid address-book -Href 'https://evotec.xyz' -Name 'This is link 2'
New-NavLink -IconBrands codiepie -Href 'https://evotec.xyz' -Name 'This is link 4'
}
#endregion All the Menus
} #-MenuColor Black -MenuColorBackground Pink -HomeColorBackground Black -HomeColor Red
New-HTMLTab -Name 'Dashboard' -IconRegular chart-bar {
New-HTMLSection -Name 'Block info' -Width 10% {
New-HTMLSection -Name 'Sub-Block info' -Margin 10 -Width 15% {
New-HTMLPanel -Margin 10 {
New-HTMLPanel -BackgroundColor lightgreen -AlignContentText right -BorderRadius 10px {
New-HTMLText -TextBlock {
# New-HTMLText -Text $UserDisabled -Alignment justify -FontSize 25 -FontWeight bold
New-HTMLText -Text 50 -Alignment justify -FontSize 25 -FontWeight bold
New-HTMLText -Text 'Active Test' -Alignment justify -FontSize 15
New-HTMLTag -Tag 'i' -Attributes @{ class = "fas fa-user-slash fa-3x" }
}
}
New-HTMLPanel -BackgroundColor yellowgreen -AlignContentText right -BorderRadius 10px {
New-HTMLText -TextBlock {
#New-HTMLText -Text $userinactive -Alignment justify -FontSize 25 -FontWeight bold
New-HTMLText -Text 130 -Alignment justify -FontSize 25 -FontWeight bold
New-HTMLText -Text 'Failed Test' -Alignment justify -FontSize 15
New-HTMLTag -Tag 'span' -Attributes @{ class = "fas fa-user-clock fa-3x" }
}
}
}
}
}
}
New-HTMLPage -Name 'Page 1' {
New-HTMLSection {
New-HTMLFrame -SourcePath "P:\InfraWeb\VMInventory\Home.html" -Scrolling Auto -Height 1500px
} -HeaderText 'VM Inventory'
}
New-HTMLPage -Name 'Page 2' {
New-HTMLSection {
New-HTMLFrame -SourcePath "P:\InfraWeb\RebootCheck\Home.html" -Scrolling Auto -Height 1500px
} -HeaderText 'Server reboot'
}
} -Online -TitleText 'Test Inline' -ShowHTML -FilePath "$PSScriptRoot\Example-InlineHTML01.html" -AddComment
The way it works that way is that when you add New-HTMLPage, it basically treats anything that comes before New-HTMLPage, as not defined New-HTMLPage that is the primary page. If you mix it up it gets confused what goes where. I am not sure if it's worth my effort to do anything about it. Probably not.
That worked. Thank you so much once again. Now I will build my Dashboard and see what other challenges I face.
Hello, I was testing some code and found that this New-NavTopMenu used and found that these Menus are very impressive and useful. I was trying if I click on Sub-menu link and give some URL link, can that open in same page with continuing Top Menu as header, without leaving the page?
Sample code
Here if I click on Vm Inventory sub-menu it will redirect to that page but if there a way to open the target page with same menus so I can navigate to other menus/tabs?