Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Table Styling and Formatting should work for non-js use cases #300

Open
jojiklmts opened this issue Dec 7, 2021 · 6 comments
Open

Table Styling and Formatting should work for non-js use cases #300

jojiklmts opened this issue Dec 7, 2021 · 6 comments
Labels
CSS CSS related enhancement New feature or request JS JavaScript related

Comments

@jojiklmts
Copy link

jojiklmts commented Dec 7, 2021

I have issues related to formatting:

  1. Custom column widths. As you can see I am trying to set column width to 50 but whatever number I put in, nothing changes
  2. Custom font size. I am trying to set the font size to 12 but it keeps being 8
  3. Would like to define font info / formatting only once per whole HTML object and not multiple times.
    I tried to use New-HTMLTableStyle with hopes that I could set my fonts for whole table in one place but it does not work and I have to set the fonts by using New-HTMLTableHeader and New-HTMLTableContent. That way I can actually set the font type but custom font size never works.
$UniqueRecipients | ForEach-Object {
        $Mail = $_
        # Construct HTML object
        $EmailTable = $Table | Where-Object {$_.Mail -eq $Mail}
        $Html = New-HTML {           
            New-HTMLText -Text "Your server(s) just started patching." -FontFamily 'Calibri' -FontStyle 'normal' -FontSize 12            
            New-HTMLTable -DataTable $EmailTable -HideFooter {
                New-HTMLTableStyle -Type Table -FontFamily 'Calibri' -FontStyle 'normal' -FontSize 12
                New-HTMLTableColumnOption -AllColumns -Width 50
                New-HTMLTableHeader -Names ServerFQDN,PatchingStartDateTime,SkipXmonths,UtcOffset -FontFamily 'Calibri' -FontStyle 'normal' -FontSize 12
                New-HTMLTableContent -ColumnIndex 1,2,3,4 -FontFamily 'Calibri' -FontStyle 'normal' -FontSize 12
            }
        }        
       Send-MailMessage -From "[email protected]" -To $Mail -Subject "OnDemand Patching - Startup notification" -Body $Html -SmtpServer smtp.server.com -Credential $Creds -BodyAsHtml
    }
@PrzemyslawKlys
Copy link
Member

Short answer:
First thing to notice is that New-HTMLTableColumnOption works on JS level which means - no email support.
2nd thing to notice is that New-HTMLTableStyle currently only supports DataTables (and it's "CSS") and won't work for email which uses different CSS

Long answer:
PSWriteHTML supports 2 table types (or 3 if you really go into details). JS version based on DataTables.net, CSS version when JS is not available and Simplify version to force it to non-js version.

This brings several limitations. If you would run the code above without Send-MailMessage and simply use -ShowHTML switch for New-HTML you may see that it actually does what it should, but once you push it to email things get side ways for two reasons. No JS in Email Clients, and CSS support in emails is some crippled version that needs 50 workarounds to be usable.

We should get those commands such as style, column options to be applicable to all 3 options - but it requires lots of testing and different approaches. New-HTMLTableContent should work but it's pretty heavy to be honest.

@PrzemyslawKlys PrzemyslawKlys added CSS CSS related enhancement New feature or request JS JavaScript related labels Dec 8, 2021
@PrzemyslawKlys PrzemyslawKlys changed the title Issues with formatting Table Styling and Formatting should work for non-js use cases Dec 8, 2021
@jojiklmts
Copy link
Author

I ended up using this:

$UniqueRecipients | ForEach-Object {
        $Mail = $_
        # Send email
        $EmailTable = $Table | Where-Object {$_.Mail -eq $Mail}
        $Html = New-HTML {
            New-HTMLSpanStyle -Content {
                New-HTMLText -Text "Text field 1."
                New-HTMLText -Text "Text field 2"
                New-HTMLTable -DataTable $EmailTable -HideFooter {
                    New-HTMLTableHeader -Names ServerFQDN,PatchingStartDateTime,SkipXmonths,UtcOffset -FontFamily 'Calibri' -FontStyle 'normal' -FontSize 16 -BackGroundColor SkyBlue
                    New-HTMLTableContent -ColumnIndex 1,2,3,4 -FontFamily 'Calibri' -FontStyle 'normal' -FontSize 16
                }
                New-HTMLText -Text "Text field 3"
                New-HTMLText -Text "Text field 4"
                New-HTMLText -Text "Text field 5"
                New-HTMLText -Text "Text field 6"
            } -FontFamily 'Calibri' -FontStyle 'normal' -FontSize 16
        }
        Send-MailMessage -From "[email protected]" -To $Mail -Subject "OnDemand Patching - Startup notification" -Body $Html -SmtpServer smtp.com -Credential $Creds -BodyAsHtml
    }

You still have to define the font/formatting twice. Once per table and once per the Span but I can live with that.
Also regarding the font size, it turns out it was working well all along, but to achieve real font size 12 I had to go with number 16. And the thing with resizing columns I dropped altogether because anyway the table and columns will adjust nicely according to screen/window size. So all is good. Thanks

@PrzemyslawKlys
Copy link
Member

PrzemyslawKlys commented Dec 10, 2021

You can use FontSize 12px or 12pt depending what you want. If you provide int it forces it to px hence the behavior. There is translation process below it. Also it's possible to use other values 1em, or percentages. Basically whatever CSS provides.

But email is special so your output may vary. Email CSS is really bad, so test test test.

@PrzemyslawKlys
Copy link
Member

I think you could use

EmailBody {
    New-HTMLTable 
} -FontSize 16

To get what you need without the new-htmltablecontent. EmailBody uses a bit different code and gets rid of any JS code which is useless anyways.

@jojiklmts
Copy link
Author

Thanks a lot. Ended up using EmailBody.
So there is no way of setting maximum column width for a table ?

@PrzemyslawKlys
Copy link
Member

PrzemyslawKlys commented Dec 17, 2021

Not at the moment, but lets leave this open and I'll keep thinking about it.

TableStyling should work for non-js use cases

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CSS CSS related enhancement New feature or request JS JavaScript related
Projects
None yet
Development

No branches or pull requests

2 participants