Populating a DOM table dynamically with VBScript

Anything VBScript-related, including Windows Script Host, WMI, ADSI, and more.
Forum rules
Do not post any licensing information in this forum.

Any code longer than three lines should be added as code using the 'Select Code' dropdown menu or attached as a file.
User avatar
T V Ganesh
Posts: 6
Joined: Mon Apr 23, 2012 6:13 pm

Populating a DOM table dynamically with VBScript

Post by T V Ganesh » Fri Aug 24, 2012 4:18 am

Hi,
I am trying to populate a table in a HTA application using VBscript dynamically. I tried to convert Javascript to VBscript but the code does not work. Please help. This is how far I got.

Regards
Ganesh
------------------------------------

Private Sub fnInit()

'Declare variables and create the header, footer, and caption.
oTHead = oTable.createTHead()
oTFoot = oTable.createTFoot()
oCaption = oTable.createCaption()

'Declare stock data that would normally be read in from a stock Web site.
Dim heading(4)
heading(0) = "Stock symbol"
heading(1) = "High"
heading(2) = "Low"
heading(3) = "Close"

Msgbox(heading(2))

Dim stock

stock = Array("ABCD","88.625","85.50","85.81")

'stock(0) = Array("ABCD","88.625","85.50","85.81")
'stock(1) = Array("EFGH","102.75","97.50","100.063")
'stock(2) = Array("IJKL","56.125","54.50","55.688")
'stock(3)= Array("MNOP","71.75","69.00","69.00")

for i = 0 to 3 step 1
'Msgbox(stock(i))
next

'Insert a row into the header.

oRow = oTHead

'oTHead.setAttribute bgColor,"lightskyblue"

'Insert cells into the header row.
for i= 0 to i< UBound(heading) step 1


oCell = oRow.
oCell.align = "center"
oCell.style.fontWeight = "bold"
oCell.innerHTML = heading(i)
Next


'Insert rows and cells into bodies.
for i=0 to i< UBound(stock) step 1

if i < 2 then
oBody = oTBody0
else
oBody = oTbody1
end if

oRow = oBody.insertRow(-1)
for j=0 to j< UBound(stock) step 1

oCell = oRow.insertCell(-1)
oCell.innerHTML = stock(i)
next
next

'Set the background color of the bodies.
'oTBody0.setAttribute("bgColor","lemonchiffon")
'oTBody1.setAttribute("bgColor","goldenrod")

'Insert rows and cells into the footer row.
oRow = oTFoot.insertRow(-1)
oCell = oRow.insertCell(-1)
oCell.innerHTML = "Quotes are for example only."
oCell.colSpan = "4"
oCell.bgColor = "lightskyblue"

// Set the innerHTML of the caption and position it at the bottom of the table.
oCaption.innerHTML = "Created using Table Object Model."
oCaption.style.fontSize = "10px"
oCaption.align = "bottom"
end sub

jvierra
Posts: 13915
Joined: Tue May 22, 2007 9:57 am
Contact:

Populating a DOM table dynamically with VBScript

Post by jvierra » Fri Aug 24, 2012 8:00 am

You fail to say what is not working. Ther eis al ot f code and most of it is hard to read.

User avatar
T V Ganesh
Posts: 6
Joined: Mon Apr 23, 2012 6:13 pm

Populating a DOM table dynamically with VBScript

Post by T V Ganesh » Fri Aug 24, 2012 10:17 pm

J Vierra,
Thanks for the detailed post. Your code worked. I had tried to convert the code given in the following site to VBscript (given above) - http://samples.msdn.microsoft.com/works ... _Table.htm

However this is just a part of the problem. What I am trying to do is to create a HTA application to manage Windows Resources. I use the logParser utility. Sometimes the o/p runs into as much as 20K rows and I am unable to display the result as it happens. For smaller o/ps of around 50 rows I can use static HTML by concatenating HTML tags and o/p together and finally using DataArea.innerhtml = strHTML to display the result.

But I also need to be able to display large o/ps so I am investigating the use of dynamically populating a DOM table.

I will try to work on what you have given me. Since I am doing HTA I am constrained to use VBscript.

Thanks once again for your detailed response. Truly appreciate it.

Regards
Ganesh

jvierra
Posts: 13915
Joined: Tue May 22, 2007 9:57 am
Contact:

Populating a DOM table dynamically with VBScript

Post by jvierra » Sat Aug 25, 2012 12:06 am

Her is one of the mos useful. It i s allaodable CML data table that is dynamically built from an XML recordset similar to what you can generate from LogParser.

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" language="vbscript"><head>
<title>Untitled Page</title>
<script language="vbscript">
     Sub window_onload()
          dso2.load "table3.xml"
     'msgbox "hello"
     End Sub

     Sub window_oonerror()
          msgbox "error"
     End Sub
     
</script>
</head>
<body>
     <input type="button" onclick="tbl1.nextPage" value="next"/>
     <input type="button" onclick="tbl1.previousPage" value="pre"/>
     <table id="tbl1" datasrc="#dso2" datafld="row" datapagesize="10" bgcolor="pink">
          <tbody>
               <tr>
                   <td>
                        <span onclick="msgbox me.innerHTML" id="spanField" datafld="borrower"></span>
                   </td>
               </tr>
          </tbody>
     </table>
</body>
</html>
<!-- XML Data Island is pre-defined here -->
<xml id="dso2"></xml>

The above is a fully evented demo of how easy it is to autogenerate recordset data. The files have demos of loading from CSV, Access and SQL also.

Here is the XML data for the above HTA.

Code: Select all

<?xml version='1.0' encoding='UTF-8'?>
<xml>
<data>
 <row LoanNumber='1st Mtg & Equity' State='NY/NJ' File='01-009-05' Status='p' Borrower='Dicanio' CloseDate='2005-01-07T00:00:00'
   FileType='RNC' Location='A98'/>
 <row LoanNumber='2nd Home' State='NY/NJ' File='01-010-05' Status='p' Borrower='Dicanio' CloseDate='2005-01-07T00:00:00'
   FileType='RNC' Location='A98'/>
 <row LoanNumber='7077946148' State='NY/NJ' File='01-035-05' Status='p' Borrower=' ' CloseDate='2005-01-20T00:00:00'
   FileType='RNC' Location='A101A'/>
 <row LoanNumber='29750106' State='NY/NJ' File='01-044-05' Status='p' Borrower='Steiger' CloseDate='2005-01-24T00:00:00'
   FileType='RNC' Location='A101'/>
 <row LoanNumber='7077888118' State='NY/NJ' File='01-045-05' Status='p' Borrower='Hamilton' CloseDate='2005-01-26T00:00:00'
   FileType='RNC' Location='A101'/>
 <row LoanNumber='29782521' State='NY/NJ' File='01-046-05' Status='p' Borrower='Delgado' CloseDate='2005-01-24T00:00:00'
   FileType='RNC' Location='A101'/>
 <row LoanNumber='7077949407' State='NY/NJ' File='01-047-05' Status='p' Borrower='Sharon' CloseDate='2005-01-24T00:00:00'
   FileType='RCO' Location='A101'/>
 <row LoanNumber='7077972193' State='NY/NJ' File='01-048-05' Status='p' Borrower='wells' CloseDate='2005-01-26T00:00:00'
   FileType='RNC' Location='A101'/>
 <row LoanNumber='29842242' State='NY/NJ' File='01-049-05' Status='p' Borrower='Riccardi' CloseDate='2005-01-27T00:00:00'
   FileType='RNC' Location='A101'/>
 <row LoanNumber='7077883903' State='NY/NJ' File='01-050-05' Status='p' Borrower='Pascual' CloseDate='2005-01-28T00:00:00'
   FileType='PNC' Location='A101'/>
 <row LoanNumber='7077946254' State='NY/NJ' File='01-051-05' Status='p' Borrower='Schuman' CloseDate='2005-01-26T00:00:00'
   FileType='RNC' Location='A101'/>
 <row LoanNumber='29716719' State='NY/NJ' File='01-052-05' Status='p' Borrower='Martinez, Angel' CloseDate='2005-01-26T00:00:00'
   FileType='RNC' Location='A101'/>
  FileType='RNC' Location='Cabinet 8'/>
 <row LoanNumber='1st Mtg & Equity' State='NY/NJ' File='01-009-05' Status='p' Borrower='Dicanio' CloseDate='2005-01-07T00:00:00'
   FileType='RNC' Location='A98'/>
 <row LoanNumber='2nd Home' State='NY/NJ' File='01-010-05' Status='p' Borrower='Dicanio' CloseDate='2005-01-07T00:00:00'
   FileType='RNC' Location='A98'/>
 <row LoanNumber='7077946148' State='NY/NJ' File='01-035-05' Status='p' Borrower=' ' CloseDate='2005-01-20T00:00:00'
   FileType='RNC' Location='A101A'/>
 <row LoanNumber='29750106' State='NY/NJ' File='01-044-05' Status='p' Borrower='Steiger' CloseDate='2005-01-24T00:00:00'
   FileType='RNC' Location='A101'/>
 <row LoanNumber='7077888118' State='NY/NJ' File='01-045-05' Status='p' Borrower='Hamilton' CloseDate='2005-01-26T00:00:00'
   FileType='RNC' Location='A101'/>
 <row LoanNumber='29782521' State='NY/NJ' File='01-046-05' Status='p' Borrower='Delgado' CloseDate='2005-01-24T00:00:00'
   FileType='RNC' Location='A101'/>
 <row LoanNumber='7077949407' State='NY/NJ' File='01-047-05' Status='p' Borrower='Sharon' CloseDate='2005-01-24T00:00:00'
   FileType='RCO' Location='A101'/>
 <row LoanNumber='7077972193' State='NY/NJ' File='01-048-05' Status='p' Borrower='wells' CloseDate='2005-01-26T00:00:00'
   FileType='RNC' Location='A101'/>
 <row LoanNumber='29842242' State='NY/NJ' File='01-049-05' Status='p' Borrower='Riccardi' CloseDate='2005-01-27T00:00:00'
   FileType='RNC' Location='A101'/>
 <row LoanNumber='7077883903' State='NY/NJ' File='01-050-05' Status='p' Borrower='Pascual' CloseDate='2005-01-28T00:00:00'
   FileType='PNC' Location='A101'/>
 <row LoanNumber='7077946254' State='NY/NJ' File='01-051-05' Status='p' Borrower='Schuman' CloseDate='2005-01-26T00:00:00'
   FileType='RNC' Location='A101'/>
 <row LoanNumber='29716719' State='NY/NJ' File='01-052-05' Status='p' Borrower='Martinez, Angel' CloseDate='2005-01-26T00:00:00'
   FileType='RNC' Location='A101'/>
  FileType='RNC' Location='Cabinet 8'/>
</data>
</xml>

Place xml in a file "table3.xml" in the same folder as the HTA.

CSV files are just as easy to load and dynamically generate forms. Tables are good but we can also generate forms that can be used to edit the records.

User avatar
T V Ganesh
Posts: 6
Joined: Mon Apr 23, 2012 6:13 pm

Populating a DOM table dynamically with VBScript

Post by T V Ganesh » Sat Aug 25, 2012 4:04 am

J Vierra,
Truly appreciate your response. I had the same exact questions whether I could use Javascript and whether VBscript & Javascript can be mixed and matched.

Since I am a newbie in Web related tech, I do not want to experiment now.

I was able to modify your code to o/p the result in a table. However it seemed to work for around 300 rows. For 45K rows the control never came back to the HTA as you had mentioned.

So I am planning to take the CSV route, I have been able to o/p the result of logParser into a CSV file. This is fairly fast. It takes about 50 sec to o/p 45K rows.

Can you please let me know how I can load the CSV file into a HTA table?

Kindly do reply.

Thanks in advance

Regards
Ganesh

jvierra
Posts: 13915
Joined: Tue May 22, 2007 9:57 am
Contact:

Populating a DOM table dynamically with VBScript

Post by jvierra » Sat Aug 25, 2012 4:37 am

I thought the zips had an example. Here is a very basic example.



uploads/2491/HTMLTableFromCSV.zip

jvierra
Posts: 13915
Joined: Tue May 22, 2007 9:57 am
Contact:

Populating a DOM table dynamically with VBScript

Post by jvierra » Sat Aug 25, 2012 5:16 am

Complete PowerShell Example:

Code: Select all

 
	

	
Get-EventLog -logname application -newest 100 -EntryType Warning,Error | 
     select timewritten,entrytype,source,message |
     Out-Gridview -Title 'Event Log Errors/Warnings'
	

I also hope you understand thata you do not need to export the eventlog records to get a very selectinve filtered view with EventViewer. Just create the filter and save is as a view or Query.

To get important events across systems we normally use subscriptions and publishing. Event logs records can be forwarded to a loggin system as a combined log. This can then be very easily viewed as a single eventlog using the viewer. We can add tasks to events in teh log so we can be notified whaen implortant events occur across all systems of interest.

Most of this is not known unless you have comleted the MCSE courses. MOst admins who have learned on teh job only know the default GUI and have not been trained in any amount of automation of teh admninistration process.

LogParser is and has been good for extracting all log file types to an archive ofr database. Since W2K it has not reeqlly been needed for Eventlog management. We have been able to use the event system (SENS) since W2K for aggragating events.

There is almost never a need for humans to view large numbers of events. We can generally use tools to do the analysis for us. PowerShell is one of th emost powerful of those tools and can extract all manner of information from the eventlog and present it in a usable summary form.

I have a PowerSHell report that runs and reports on the exact number of account breakin attempts per day per account per originating IP. The whole extraction for thi is just one line. It outputs the summary as an HTML email message.

Here is an example:
http://www.designedsystemsonline.com/up ... Report.htm



jvierra2012-08-25 12:38:06

jvierra
Posts: 13915
Joined: Tue May 22, 2007 9:57 am
Contact:

Populating a DOM table dynamically with VBScript

Post by jvierra » Sun Aug 26, 2012 4:09 am

Why do you not want to use the correct method for loading a CSV. I posted the example. All you have to do is edit it. It iwill page and be much faster then trying to hand build it with strings.

What you are trying to do will never work. Use the examply I showed you above.


jvierra
Posts: 13915
Joined: Tue May 22, 2007 9:57 am
Contact:

Populating a DOM table dynamically with VBScript

Post by jvierra » Sun Aug 26, 2012 6:23 am

Here is how to dast build a color keyed table using LogParser.

Code: Select all

$sql=@"
    SELECT TimeGenerated,
        EventTypeName,
        Message,
        CASE EventTypeName 
            WHEN 'Error event' THEN 'RED' 
            WHEN 'Warning event' THEN 'YELLOW' 
            WHEN 'Information event' 
            THEN 'WHITE' 
            ELSE 'BLUE' 
        END As Color INTO EventReport.html FROM System
"@
logparser $sql -tpl:IISEventLogEntries.tpl
	Invoke-Item EventReport.html 

The script in in PowerShell but can easily be converted to VBScript.

It uses a custom template file that defines how the table is to be formatted.

Code: Select all

<!-- custom template iiseventlogentries.tpl -->
<lpheader>
<html> 
<head> 
  <style> 
    td { font-family: arial }; 
    th { font-family: arial }; 
  </style> 
</head> 
<body> 
<table bordercolor="black" border="1" cellpadding="2" cellspacing="2"> 
<tr> 
  <th colspan=4 bgcolor="black"><font color=white>New Messages in EventLog</font></th> 
</tr> 
<tr> 
  <th align=left bgcolor="#c0c0c0">time generated</th> 
  <th align=left bgcolor="#c0c0c0">event type</th> 
  <th align=left bgcolor="#c0c0c0">strings</th> 
  <th align=left bgcolor="#c0c0c0">message</th> 
</tr> 
</lpheader> 
<lpbody> 
<tr bgcolor="%color%"> 
  <td>%timegenerated%</td> 
  <td>%eventtypename%</td> 
  <td>%strings%</td> 
</tr> 
</lpbody> 
</table> 
</body> 
</html>

It is possible to generate the output to an HTA. Generating 21,000 records takes about 30 seconds.

Here is a template that adds events to the 'Strings' column. Click in the strings colimn to fire the event.

The output can be manipulated in almost any way you need as far as format and functionality goes.

Code: Select all

<!-- custom template iiseventlogentries.tpl -->
<lpheader>
<html> 
<head> 
  <style> 
    td { font-family: arial }; 
    th { font-family: arial }; 
  </style> 
</head> 
<body> 
<table bordercolor="black" border="1" cellpadding="2" cellspacing="2"> 
<tr> 
  <th colspan=4 bgcolor="black"><font color=white>New Messages in EventLog</font></th> 
</tr> 
<tr> 
  <th align=left bgcolor="#c0c0c0">time generated</th> 
  <th align=left bgcolor="#c0c0c0">event type</th> 
  <th align=left bgcolor="#c0c0c0">strings</th> 
  <!-- <th align=left bgcolor="#c0c0c0">message</th>  -->
</tr> 
</lpheader> 
<lpbody> 
<tr bgcolor="%color%"> 
  <td>%timegenerated%</td> 
  <td>%eventtypename%</td> 
  <td onclick='vbscript:msgbox me.innerHTML'>%strings%</td> 
</tr> 
</lpbody> 
</table> 
</body> 
</html>

Here is the SQL and a new command to build the table in less than 30 seconds with eventing.

Code: Select all

$sql=@"
    SELECT 
        TimeGenerated,
        EventTypeName,
        Strings,
        CASE EventTypeName 
            WHEN 'Error event' THEN 'RED' 
            WHEN 'Warning event' THEN 'YELLOW' 
            WHEN 'Information event' 
            THEN 'WHITE' 
            ELSE 'BLUE' 
        END As Color 
    INTO EventReport.hta
    FROM System
    ORDER BY TimeGenerated DESC
"@
logparser $sql -tpl:IISEventLogEntries.tpl
Invoke-Item EventReport.hta

User avatar
T V Ganesh
Posts: 6
Joined: Mon Apr 23, 2012 6:13 pm

Populating a DOM table dynamically with VBScript

Post by T V Ganesh » Sun Aug 26, 2012 10:05 pm

J Vierra,
Thanks for your response. As I had mentioned earlier I can't use Powershell despite its power & flexibility as I want the tool to run on older Windows systems.

Your HTMLTableFromCSV2.hta works like magic! I can see that it immediately loads 20K rows. Unfortunately it is magic and I can't seem to get it to work when I make any modifications. For e.g. if I cut and paste the exact same code to different file it does not work. Also if I add a few more rows to the CSV file also it does not seem to like it. Not sure what it does. Can you give me any pointers on what it is doing?

I had hand edited the hta to make it display the columns from my csv file. However it does not get beyond displaying the heading. I am including this bit here.

I am sorry to bother you so much. If you choose not to reply I will understand.

Regards
Ganesh

----------------------------------------------
<script language="vbscript">
Sub tblData_onreadystatechange()
For Each row In tblData.Rows

Set cell = row.lastChild

Next
End Sub
</script>
</head>
<body>
<div CLASS="body">
<div style="display:none">
<object id="tdcEventlog"
classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param name="DataURL" value="table.csv">
<param name="UseHeader" value="true">
<param name="TextQualifier" value='"'>
</object>
</div>
<input type="button" value=' |<< ' onclick="jscript:tblData.firstPage();" />
<input type="button" value=' < ' onclick="jscript:tblData.previousPage();"/>
<input type="button" value=' > ' onclick="jscript:tblData.nextPage();"/>
<input type="button" value=' >>| ' onclick="jscript:tblData.lastPage();"/>
<br />
<table id="tblData" datasrc=#tdcEventlog datapagesize="20">
<caption >Table from CSV file</caption>
<thead>
<tr>
<th>Number</th>
<th>TimeGenerated</th>
<th>EventTypeName</th>
<th>SourceName</th>
<th>EventID</th>
<th>Message</th>
</tr>
</thead>
<tbody>
<tr>
<td><div datafld="Number"></div></td>
<td><div datafld="TimeGenerated"></div></td>
<td><div datafld="EventTypeName"></div></td>
<td><div datafld="SourceName"></div></td>
<td><div datafld="EventID"></div></td>
<td><div datafld="Message"></div></td>
</tr>
</tbody>
</table>
</div>
<div id="divOut"/>
</body>

Locked