PolarisPowerShellPSHTML

Using Metro 4 UI in PSHTML for Polaris Web App

Happy Holidays!

Closing of the year 2018, I learnt many new stuffs and one of that is metro 4 UI – Many knows, that I am a great fan of Polaris and PSHTML modules. And with no doubt I will demo using metro 4 UI in PSHTML and Polaris stands as my web application. Yes, it’s all loosely coupled, and I MEAN IT.

Here is the output!

Follow the steps to achieve it!

  • Create Project folder and organize as shown

  • Download the metro-4.2.31 source files as ZIP
  • Unzip and use it in root folder (project folder) – Copy only CSS, JS and MIF and place it under assets

  • Home.ps1 – (Views Folder)
Import-Module .\assemblies\PSHTML\PSHTML.psd1
html -Content {
    head -Content {
        Title -Content "iCMS | Home"
        Link -href "./../assets/css/metro.min.css" -rel "stylesheet"
        Link -href "./../assets/css/metro-colors.min.css" -rel "stylesheet"
        Link -href "./../assets/css/metro-rtl.min.css" -rel "stylesheet"
        Link -href "./../assets/css/metro-icons.min.css" -rel "stylesheet"
        script -src "./../assets/js/jquery-3.3.1.min.js"
        script -src "./../assets/js/metro.min.js"
    }
    body -Content {
        # Menu Bar
        Div -Class "container-fluid bg-magenta fg-white pos-fixed fixed-top z-top" -Content {
            header -Class "app-bar container bg-magenta fg-white pos-relative" `
                -Attributes @{'data-role' = 'appbar'; 'data-expand-point' = 'md'} -Content {
                a -href "#" -Class "brand fg-white no-hover" -Content "iCMS | Home" -Target "_blank"
                ul -Class "app-bar-menu ml-auto text-upper" -Content {
                    li -Content {a -href "http://localhost:1337/about" -Content "About"}
                    li -Content {a -href "http://localhost:1337/azure" -Content "Azure"}
                    li -Content {a -href "http://localhost:1337/office365" -Content "Office 365"}
                    li -Content {a -href "http://localhost:1337/powershell" -Content "PowerShell"}
                }
            }
        }
        (1..3).ForEach( {br})
        p -Class "indent-letter" -Content {
            "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."
        }
        p -Content {
            "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."
        }
    }
}
  • Home.ps1 (Routes Folder)
New-PolarisGetRoute -Path "/" -Scriptblock {
    $Response.SetContentType('text/html')
    $Html = .\views\home.ps1
    $Response.Send($Html)
}

About.ps1 (Views Folder)

Import-Module .\assemblies\PSHTML\PSHTML.psd1
html -Content {
    head -Content {
        Title -Content "iCMS | Home"
        Link -href "./../assets/css/metro.min.css" -rel "stylesheet"
        Link -href "./../assets/css/metro-colors.min.css" -rel "stylesheet"
        Link -href "./../assets/css/metro-rtl.min.css" -rel "stylesheet"
        Link -href "./../assets/css/metro-icons.min.css" -rel "stylesheet"
        script -src "./../assets/js/jquery-3.3.1.min.js"
        script -src "./../assets/js/metro.min.js"
    }
    body -Content {
        # Menu Bar
        Div -Class "container-fluid bg-magenta fg-white pos-fixed fixed-top z-top" -Content {
            header -Class "app-bar container bg-magenta fg-white pos-relative" `
                -Attributes @{'data-role' = 'appbar'; 'data-expand-point' = 'md'} -Content {
                a -href "#" -Class "brand fg-white no-hover" -Content "iCMS | Home" -Target "_blank"
                ul -Class "app-bar-menu ml-auto text-upper" -Content {
                    li -Content {a -href "http://localhost:1337/about" -Content "About"}
                    li -Content {a -href "http://localhost:1337/azure" -Content "Azure"}
                    li -Content {a -href "http://localhost:1337/office365" -Content "Office 365"}
                    li -Content {a -href "http://localhost:1337/powershell" -Content "PowerShell"}
                }
            }
        }
        (1..3).ForEach( {br})
        Div -Class "card" -Content {
            Div -Class "card-header " -Content {
                div -Class "avatar" -Content {
                    img -src "./../assets/images/ChenV.jpg"
                }
                Div -Class "name" -Content "Chendrayan Venkatesan"
                Div -Class "date" -Content {Get-Date}
                p -Class "indent-letter" -Content {
                    "Chendrayan Venkatesan also known as Chen V is a Cloud and Datacenter Management MVP, author of Windows PowerShell 5.0 for .NET Developers - Second Edition, TechNet Wiki Ninja, blogger, speaker, automation lover and a fun-loving person. Chen V started his career as Technical Support Representative to support Windows XP SP3 a year later he moved on as Sr. Technical Support Representative to support Hewlett-Packard laptops." 
                }
                p -Content {
                    "July 2007, he joined House of FLSmidth as a support engineer, in which he gained some knowledge about infrastructure and ITIL process. January 2008, joined Tata and got few SharePoint projects. After gaining good experience he moved to Netherlands (Western Europe) in the year 2009 as Assistant SharePoint Consultant. Datacenter management is his secondary skill set and that made him to travel in and around Europe to support diversified customers."
                }
            }
        }
        br
        Div -Attributes @{
            'data-role'          = 'panel'
            'data-title-caption' = 'Social Networking | Contact'
            "data-cls-title"     = 'bg-magenta fg-white'
            'data-collapsed'     = 'true'
            'data-collapsible'   = 'true'
        } -Content {
            p -content {
                div -Class "h-10" -Attributes @{'data-role' = 'splitter'} -Content {
                    div -Class "d-flex flex-justify-center flex-align-center" -Content {
                        a -href "https://twitter.com/chendrayanv" -Content {
                            '<span class="mif-twitter mif-5x fg-black"></span>'
                        }
                    }
                    div -Class "d-flex flex-justify-center flex-align-center" -Content {
                        '<span class="mif-facebook mif-5x fg-black"></span>'
                    }
                    div -Class "d-flex flex-justify-center flex-align-center" -Content {
                        '<span class="mif-linkedin mif-5x fg-black"></span>'
                    }
                    div -Class "d-flex flex-justify-center flex-align-center" -Content {
                        '<span class="mif-youtube mif-5x fg-black"></span>'
                    }
                }
            }
        }
        br 
        Div -Attributes @{
            'data-role'          = 'panel'
            'data-title-caption' = 'Registration Form'
            "data-cls-title"     = 'bg-magenta fg-white'
            'data-collapsed'     = 'true'
            'data-collapsible'   = 'true'
        } -Content {
            Form -action "/demo" -method "get" -target "_blank" -Content {
                Div -Class "form-group" -Content {
                    input -type 'text' -name "firstname" -Attributes @{
                        'placeholder' = 'First Name'
                    }
                    br
                    input -type 'text' -name "lastname" -Attributes @{
                        'placeholder' = 'Last Name'
                    }
                    br
                    input -type "text" -name "emailaddress" -Attributes @{
                        'placeholder' = 'Email Address'
                    }
                    br
                    input -type 'text' -name "phonenumber" -Attributes @{
                        'placeholder' = 'Phone Number'
                    }
                    br
                    button -Class "button mif-checkmark bg-magenta" -Content {
                        "Submit to Register" 
                    } -Attributes @{
                        'style' = 'font-family:Segoe UI'
                    }
                }
            }
        }
    }
}

About.ps1 (Routes Folder)

New-PolarisGetRoute -Path "/about" -Scriptblock {
    $Response.SetContentType('text/html')
    $Html = .\views\about.ps1
    $Response.Send($Html)
}

Enjoy PowerShell! Hope this helps to style your web server using Polaris and PSHTML modules!

Leave a Reply

Your email address will not be published. Required fields are marked *