Output Window with Scrollbar

I had a user request a control that would allow for the output of messages from a UDInput so they could see progress. This uses the Stack class so it writes new messages to the top, outputs them into a collection and then adds a scrollbar after it reaches 200px.



$Dashboard = New-UDDashboard -Title 'hey' -Content {

   New-UDElement -Tag 'div' -Endpoint {
      $Session:Elements = New-Object System.Collections.Stack
   }

   New-UDButton -Text "Add Item" -OnClick {
      $Session:Elements.Push("[$(Get-Date)]")
      Sync-UDElement -Id 'output'
   }

   New-UDButton -Text "Clear Items" -OnClick {
      $Session:Elements.Clear()
      Sync-UDElement -Id 'output'
   }

   New-UDElement -Id 'output' -Tag 'div' -Attributes @{
      style = @{
         height = "200px"
         overflowY = "scroll"
      }
   } -Endpoint {
      New-UDCollection -Content {
         $Session:Elements | ForEach-Object {
            New-UDCollectionItem -Content { $_ }
         }
      }
   }
}

Start-UDDashboard -Dashboard $Dashboard -Port 10000 -FOrce
4 Likes