New-UDhtml and table data

I have HTML tables output into .html files stored for my UD site to access. What i’m attempting to do, is to pull in the tables from each individual html file and pass it as the markup to new-udhtml within a UDCollapsableItem name for each file/page.

Problem is i’m getting Minified React Error #31. Has anyone messed around with this command, or had similar scenario come up. I’m aware of the ability to work with UDgrid or UDTable, but i would prefer to make this work based off my scenario.

Hi @dcherry88 never tried this personally myself…I am sure it is possible, to help myself and other members help you, are you able to post a small code snippet of the HTML table, then are you looking to put the header in the udcollapsible heading and the row data in the body? I’m curious of why you want it in a udcollapsible, as you have mentioned grids and tables, and thinking surely that would be a better way to display the data from one table to another table…anyways, as mentioned im sure if you post some of your HTML table markup, and then how you want this displayed in a collapsible either myself or someone else can help you. Peace

Here is an example of one of the pages. I’ve tried storing the data in a variable with get-content, or just taking this code straight into @" "@ brackets, but the result always seems to be the same. I’ve even just taken the simplest single table out with no change.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>HTML TABLE</title>

</head><body>

<style>BODY{font-family: Calibri; font-size: 10pt;}TABLE{border: 1px solid black; border-collapse: collapse;}TH{border: 1px solid black;color: #FFFFFF; background: #1C6EA4; padding: 5px; }TD{border: 1px solid black; padding: 5px; }</style>

<table>

<colgroup><col/><col/><col/><col/></colgroup>

<tr><th>CollectionName</th><th>StartTime</th><th>EndTime</th><th>Duration</th></tr>

<tr><td>collection 1</td><td>4/10/2019 2:00:00 AM</td><td>4/10/2019 5:00:00 AM</td><td>3hrs 0mins</td></tr>

<tr><td>collection 2</td><td>4/10/2019 1:00:00 AM</td><td>4/10/2019 4:00:00 AM</td><td>3hrs 0mins</td></tr>

<tr><td>collection 3</td><td>4/10/2019 2:00:00 AM</td><td>4/10/2019 5:00:00 AM</td><td>3hrs 0mins</td></tr>

<tr><td>collection 4</td><td>4/10/2019 1:30:00 PM</td><td>4/10/2019 4:30:00 PM</td><td>3hrs 0mins</td></tr>

</table>

</body></html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>HTML TABLE</title>

</head><body>

<style>BODY{font-family: Calibri; font-size: 10pt;}TABLE{border: 1px solid black; border-collapse: collapse;}TH{border: 1px solid black;color: #FFFFFF; background: #1C6EA4; padding: 5px; }TD{border: 1px solid black; padding: 5px; }</style>

<table>

<colgroup><col/><col/><col/><col/><col/><col/><col/></colgroup>

<tr><th>Deployment Name</th><th>Collection Name</th><th>Available Time</th><th>Deployment Deadline</th><th>Suppress Reboot</th><th>Override Maint. Window Reboot</th><th>Override Maint. Window Install</th></tr>

<tr><td>Restart-Deployment</td><td>Collection5</td><td>4/9/2019 5:00:00 PM</td><td>4/9/2019 9:00:00 PM</td><td>Server &amp; Workstation</td><td>No</td><td>No</td></tr>

<tr><td>No Restart Deployment</td><td>Collection6</td><td>4/9/2019 5:00:00 PM</td><td>4/9/2019 9:00:00 PM</td><td>None</td><td>No</td><td>No</td></tr>

</table>

</body></html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>HTML TABLE</title>

</head><body>

<style>BODY{font-family: Calibri; font-size: 10pt;}TABLE{border: 1px solid black; border-collapse: collapse;}TH{border: 1px solid black;color: #FFFFFF; background: #1C6EA4; padding: 5px; }TD{border: 1px solid black; padding: 5px; }</style>

<table>

<colgroup><col/><col/><col/><col/><col/><col/><col/></colgroup>

<tr><th>Deployment Name</th><th>Collection Name</th><th>Available Time</th><th>Deployment Deadline</th><th>Suppress Reboot</th><th>Override Maint. Window Reboot</th><th>Override Maint. Window Install</th></tr>

<tr><td>Adobe</td><td>Collection7</td><td>4/9/2019 5:00:00 PM</td><td>4/9/2019 9:00:00 PM</td><td>Server &amp; Workstation</td><td>No</td><td>No</td></tr>

<tr><td>Oracle</td><td>Collection8</td><td>4/9/2019 5:00:00 PM</td><td>4/9/2019 9:00:00 PM</td><td>Server &amp; Workstation</td><td>No</td><td>No</td></tr>

<tr><td>Adobe</td><td>Collection9</td><td>4/9/2019 5:00:00 PM</td><td>4/9/2019 9:00:00 PM</td><td>None</td><td>No</td><td>No</td></tr>

<tr><td>Oracle</td><td>Collection10</td><td>4/9/2019 5:00:00 PM</td><td>4/9/2019 9:00:00 PM</td><td>None</td><td>No</td><td>No</td></tr>

</table>

</body></html>

</br></br>

Thanks @dcherry88 for posting some sample markup. So just to make sure we are on the same goal of output do you want the HTML table nested inside the ud collapsible or just the raw text? I havent played about with New-UDHtml that much but I’m assuming you have tried that? It’s just gone midnight where I live so might not be able to get a working example today, but if you can expand a little on how you want this HTML table to look inside the collapsible, that would help in mocking up a demo for you, that it matches your desired output. Cheers
Boom so I thought lets not leave @dcherry88 hanging…and if you leave it as raw HTML it works fine to import your HTML onto a dashboard:-

New-UDHtml -Markup "HTML TABLE

BODY{font-family: Calibri; font-size: 10pt;}TABLE{border: 1px solid black; border-collapse: collapse;}TH{border: 1px solid black;color: #FFFFFF; background: #1C6EA4; padding: 5px; }TD{border: 1px solid black; padding: 5px; }
Deployment Name Collection Name Available Time Deployment Deadline Suppress Reboot Override Maint. Window Reboot Override Maint. Window Install
Restart-Deployment Collection5 4/9/2019 5:00:00 PM 4/9/2019 9:00:00 PM Server & Workstation No No
No Restart Deployment Collection6 4/9/2019 5:00:00 PM 4/9/2019 9:00:00 PM None No No

"

Sorry the output above is messy but it really works if you strip out bits like

< !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Yes, i’m basically wanting to do this, with the html code stored in $html by using get-content on the.html file. The idea would be you click the item to open the collapse and see the data you want.

New-UDCollapsibleItem -Title "titlehere" -Content {
    New-UDHtml -Markup $html
}

Well personally I would edit the original HTML files to strip out:-
< html xmlns=“http://www.w3.org/1999/xhtml”>
Had to put a space after < else goes invisible, but seems New-UDHTML only supports RAW basic HTML tags if that makes sense? So easy fix in my opinion edit the raw HTML files if that makes sense to not include the w3.org tags as it messes up universal dashboard trying to read it?proof
Here is your code above minus the W3.org tags and it displays fine :smile: using New-UDHTML -Markup “YOUR RAW HTML CODE” its not working using get-content as you have invalid HTML that UD cannot read, as its not raw basic html tags you are passing.

I’m no HTML expert by any means, but I am guessing:-

Definition and Usage

The xmlns attribute specifies the xml namespace for a document.

Note: The xmlns attribute is required in XHTML, invalid in HTML 4.01, and optional in HTML5.

Note: The HTML validator at http://w3.org does not complain when the xmlns attribute is missing in an XHTML document. This is because the namespace “xmlns=http://www.w3.org/1999/xhtml” is default, and will be added to the tag even if you do not include it.

SO this is required in XHTML and trying to get NEW-UDHTML to read XHTML I am guessing this is why is doesn’t work. I guess you could put in an enhancement request for a “New-UDXHTML” cmdlet/function on github. I hope this answers your question and will now allow you to display the data as long as you make it all basic HTML for New-UDHTML to read it. I guess we both learnt something new from this question so thanks @dcherry88 for pumping my mind at 00:30 :slight_smile: and let me know if this solves your issues. Thanks

1 Like

@adam please can you confirm if my thoughts are correct please and thank you

I just gave this a shot. What you need to do is get rid of all the HTML surrounding your table definition. So you are left with just the table and style and none of the body\html tags.

$Dashboard = New-UDDashboard -Title "Test" -Content {
    New-UDCollapsible -Items {
        New-UDCollapsibleItem -Title "Test" -Content {
            New-UDHtml -Markup "<style>BODY{font-family: Calibri; font-size: 10pt;}TABLE{border: 1px solid black; border-collapse: collapse;}TH{border: 1px solid black;color: #FFFFFF; background: #1C6EA4; padding: 5px; }TD{border: 1px solid black; padding: 5px; }</style>

            <table>
            
            <colgroup><col/><col/><col/><col/><col/><col/><col/></colgroup>
            
            <tr><th>Deployment Name</th><th>Collection Name</th><th>Available Time</th><th>Deployment Deadline</th><th>Suppress Reboot</th><th>Override Maint. Window Reboot</th><th>Override Maint. Window Install</th></tr>
            
            <tr><td>Restart-Deployment</td><td>Collection5</td><td>4/9/2019 5:00:00 PM</td><td>4/9/2019 9:00:00 PM</td><td>Server &amp; Workstation</td><td>No</td><td>No</td></tr>
            
            <tr><td>No Restart Deployment</td><td>Collection6</td><td>4/9/2019 5:00:00 PM</td><td>4/9/2019 9:00:00 PM</td><td>None</td><td>No</td><td>No</td></tr>
            
            </table>"
        }
    }
}

Start-UDDashboard -Dashboard $Dashboard -Port 10000

Sorry man I meant about my xhtml theory. I got this working too, by doing what you did. I mean is it not working directly with new-udhtml as it’s an xhtml document?

It’s probably not working because react isnt sure what to do with the whole XHTML document. It’s expecting just a tag within the document

1 Like

Thanks guys, i got it working in my test lab so i’ll have to do some html code cleanup. It also helps if you properly nest collapsibleitem in a new-udcollapsible :slight_smile:

1 Like

@dcherry88 thanks for the challenge :smiley: was pretty late/early in the morning when I looked at it on this forum, and managed to get it displaying on a page in a dashboard. Not sure if you use it or not but VScode did give me some help in identifying why it wasn’t working. Great news to hear you now have it working as you want it. :+1: