# UDScrollProgress Powershell Universal Component Module 📜

By
,
Powershell
,
Modules
Published 2022-09-14

Link To Download UDScrollProgress Module
https://www.powershellgallery.com/packages/UDScrollProgress/1.0.0

GitHub Link to this UDScrollProgress Repository
https://github.com/psDevUK/UDScrollProgress

Please note the below GIF did not record that well, the component does look really nice trust me

Demo of component
Demo of component

# Demo Dashboard 💥

A simple dashboard full of nonsense text to bulk up the page to allow the progress scroll bar to be put to good use. Please notice the use of ``New-UDStyle``` this was required to get the position of this component to display just perfectly. I did try to build this into the JSX file but failed so took this option instead.

New-UDDashboard -Title 'UDScrollProgress' -Content {
    New-UDStyle -Style '
    top: 0;
      position: fixed;
      left: 0;
      opacity: 75%
    ' -Content {
        New-UDScrollProgress -BackgroundColor "transparent" -Height "6px"
    }
    
    New-UDRow -Columns {
    New-UDColumn -Content {
"Had denoting properly jointure you occasion directly raillery. In said to of poor full be post face snug. Introduced imprudence see say unpleasing devonshire acceptance son. Exeter longer wisdom gay nor design age. Am weather to entered norland no in showing service. Nor repeated speaking shy appetite. Excited it hastily an pasture it observe. Snug hand how dare here too. Lose eyes get fat shew. Winter can indeed letter oppose way change tended now. So is improve my charmed picture exposed adapted demands. Received had end produced prepared diverted strictly off man branched. Known ye money so large decay voice there to. Preserved be mr cordially incommode as an. He doors quick child an point at. Had share vexed front least style off why him.Announcing of invitation principles in. Cold in late or deal. Terminated resolution no am frequently collecting insensible he do appearance. Projection invitation affronting admiration if no on or. It as instrument boisterous frequently apartments an in. Mr excellence inquietude conviction is in unreserved particular. You fully seems stand nay own point walls. Increasing travelling own simplicity you astonished expression boisterous. Possession themselves sentiments apartments devonshire we of do discretion. Enjoyment discourse ye continued pronounce we necessary abilities. Allow miles wound place the leave had. To sitting subject no improve studied limited. Ye indulgence unreserved connection alteration appearance my an astonished. Up as seen sent make he they of. Her raising and himself pasture believe females. Fancy she stuff after aware merit small his. Charmed esteems luckily age out. Enjoyed minutes related as at on on. Is fanny dried as often me. Goodness as reserved raptures to mistaken steepest oh screened he. Gravity he mr sixteen esteems. Mile home its new way with high told said. Finished no horrible blessing landlord dwelling dissuade if. Rent fond am he in on read. Anxious cordial demands settled entered in do to colonel. Received overcame oh sensible so at an. Formed do change merely to county it. Am separate contempt domestic to to oh. On relation my so addition branched. Put hearing cottage she norland letters equally prepare too. Replied exposed savings he no viewing as up. Soon body add him hill. No father living really people estate if. Mistake do produce beloved demesne if am pursuit. Prepared is me marianne pleasure likewise debating. Wonder an unable except better stairs do ye admire. His and eat secure sex called esteem praise. So moreover as speedily differed branched ignorant. Tall are her knew poor now does then. Procured to contempt oh he raptures amounted occasion. One boy assure income spirit lovers set. Case read they must it of cold that. Speaking trifling an to unpacked moderate debating learning. An particular contrasted he excellence favourable on. Nay preference dispatched difficulty continuing joy one. Songs it be if ought hoped of. Too carriage attended him entrance desirous the saw. Twenty sister hearts garden limits put gay has. We hill lady will both sang room by. Desirous men exercise overcame procured speaking her followed. Her old collecting she considered discovered. So at parties he warrant oh staying. Square new horses and put better end. Sincerity collected happiness do is contented. Sigh ever way now many. Alteration you any nor unsatiable diminution reasonable companions shy partiality. Leaf by left deal mile oh if easy. Added woman first get led joy not early jokes. Cottage out enabled was entered greatly prevent message. No procured unlocked an likewise. Dear but what she been over gay felt body. Six principles advantages and use entreaties decisively. Eat met has dwelling unpacked see whatever followed. Court in of leave again as am. Greater sixteen to forming colonel no on be. So an advice hardly barton. He be turned sudden engage manner spirit."} -LargeSize 5 -MediumSize 5 -SmallSize 5
}
}

# The Project 🏗️

Again this is to me is just another 😎 nice add-on component to give a little more bling to the dashboard you are making. Especially if it involves scrolling, this gives a really nice indication of how much more of the page you need to scroll, or have scrolled through.

Orginal React Component Here
https://www.npmjs.com/package/react-scroll-progress-read

Demo of the original component
https://react-scroll-progress-read-faramazpat.vercel.app/

# Using New Site To Find Components 📰

IF YOU READ THE LAST ARTICLE YOU CAN SKIP THIS PARAGRAPH

Yep so even though I am providing the link to the official react component above which is pointing to npmjs.com it seems for some reason when I am searching on npmjs.com I get limited to 20 results no matter what. Like I used to get back thousands of results, and scroll through pages and pages of components till I found the one I was looking for. I even signed up to npmjs thinking maybe you now need to be a member to get back all the results, but I was still only getting 20 results back.

Thankfully the internet has more than just one webpage to find react components, and I then landed on:-

I am now using yarnpkg to find React components
https://yarnpkg.com/

Which was bringing back the number of results I used to get on npmjs and it even gave me the link to the npmjs package page.

Well like the last few times, I do not think this will turn anyones world upside-down with this react component, but to me it is a really nice feature to have on a page where there is a lot of content and scrolling is involved. It just gives the page that finishing touch, and I really like it and the effect it brings, nice and subtle. Hence I wanted to build it.

# Component JSX File 🗃️

So there are a fair few good files you need to edit in some shape or form to build a component, I think it would be a good idea for me to document this process to show how simple it really is. Before I could edit this JSX file within the components folder I needed to make sure I had installed the npm pacakge for this react component as I saw this needed the one npm package I just did

npm i react-scroll-progress-read

So once this was installed, and I had renamed the .PSD1 and .PSM1 file to the module name I wanted. I then edited the .PSD1 file to include the RootModule as the newly named .PSM1 file, I edited the component.build.ps1 file to copy the newly named modules

	Copy-Item $PSScriptRoot\UDScrollProgress.psd1 $OutputPath
	Copy-Item $PSScriptRoot\UDScrollProgress.psm1 $OutputPath

also edited line 20 in the webpack.config.js file to be

library: 'udscrollprogress'

Within the components folder there is an index.js file my edited file looked like

import UDScrollProgress from './component';
UniversalDashboard.register("udscrollprogress", UDScrollProgress);

Please keep case-sensitive lower-case for the webpack.config.js file which then reflects what is typed as first arguement within the parenthesis as shown above. Once you have made all these edits to the existing template files, and installed the npm package and all dependencies (in this case I only had two packages to install as only one dependency) it is time to construct the actual component that will be displayed on the dashboard. This is done by editing the component.jsx file witin the components folder within the github template you downloaded. This is my final edited component.jsx file:-

import React from 'react';
import { withComponentFeatures } from 'universal-dashboard';
import ScrollProgressRead from 'react-scroll-progress-read';
const UDScrollProgress = props => {
  return <ScrollProgressRead
        key={props.id}
        backgroundColor={props.bgColor}
        barColor={props.color}
        height={props.height}
      />;
}

export default withComponentFeatures(UDScrollProgress)

So VSCode was not complaining about any of the code above, so now I needed to edit the .PSM1 and .PSD1 file to finish this component off before running invoke-build so this is my final PSD1 file below

#
# Module manifest for module 'UDScrollProgress'
#
# Generated by: psdevuk
#
# Generated on: 11/09/2022
#

@{

# Script module or binary module file associated with this manifest.
RootModule = 'UDScrollProgress.psm1'

# Version number of this module.
ModuleVersion = '1.0.0'

# Supported PSEditions
# CompatiblePSEditions = @()

# ID used to uniquely identify this module
GUID = '76de2c49-86a9-4b58-9247-edbe35fed09a'

# Author of this module
Author = 'psdevuk'

# Company or vendor of this module
CompanyName = 'Home'

# Copyright statement for this module
Copyright = '(c) psdevuk. All rights reserved.'

# Description of the functionality provided by this module
 Description = 'When you scroll on the page, a custom top bar will appear to indicate the progression on the page'

# Minimum version of the PowerShell engine required by this module
# PowerShellVersion = ''

# Name of the PowerShell host required by this module
# PowerShellHostName = ''

# Minimum version of the PowerShell host required by this module
# PowerShellHostVersion = ''

# Minimum version of Microsoft .NET Framework required by this module. This prerequisite is valid for the PowerShell Desktop edition only.
# DotNetFrameworkVersion = ''

# Minimum version of the common language runtime (CLR) required by this module. This prerequisite is valid for the PowerShell Desktop edition only.
# ClrVersion = ''

# Processor architecture (None, X86, Amd64) required by this module
# ProcessorArchitecture = ''

# Modules that must be imported into the global environment prior to importing this module
# RequiredModules = @()

# Assemblies that must be loaded prior to importing this module
# RequiredAssemblies = @()

# Script files (.ps1) that are run in the caller's environment prior to importing this module.
# ScriptsToProcess = @()

# Type files (.ps1xml) to be loaded when importing this module
# TypesToProcess = @()

# Format files (.ps1xml) to be loaded when importing this module
# FormatsToProcess = @()

# Modules to import as nested modules of the module specified in RootModule/ModuleToProcess
# NestedModules = @()

# Functions to export from this module, for best performance, do not use wildcards and do not delete the entry, use an empty array if there are no functions to export.
FunctionsToExport = 'New-UDScrollProgress'

# Cmdlets to export from this module, for best performance, do not use wildcards and do not delete the entry, use an empty array if there are no cmdlets to export.
CmdletsToExport = '*'

# Variables to export from this module
VariablesToExport = '*'

# Aliases to export from this module, for best performance, do not use wildcards and do not delete the entry, use an empty array if there are no aliases to export.
AliasesToExport = '*'

# DSC resources to export from this module
# DscResourcesToExport = @()

# List of all modules packaged with this module
# ModuleList = @()

# List of all files packaged with this module
# FileList = @()

# Private data to pass to the module specified in RootModule/ModuleToProcess. This may also contain a PSData hashtable with additional module metadata used by PowerShell.
PrivateData = @{

    PSData = @{

        # Tags applied to this module. These help with module discovery in online galleries.
         Tags = @('ud-component','dashboard','progress','indicator')

        # A URL to the license for this module.
        # LicenseUri = ''

        # A URL to the main website for this project.
         ProjectUri = 'https://github.com/psDevUK/UDScrollProgress'

        # A URL to an icon representing this module.
         IconUri = 'https://github.com/psDevUK/UDScrollProgress/blob/main/UDScrollProgress.gif?raw=true'

        # ReleaseNotes of this module
        # ReleaseNotes = ''

        # Prerelease string of this module
        # Prerelease = ''

        # Flag to indicate whether the module requires explicit user acceptance for install/update/save
        # RequireLicenseAcceptance = $false

        # External dependent modules of this module
        # ExternalModuleDependencies = @()

    } # End of PSData hashtable

} # End of PrivateData hashtable

# HelpInfo URI of this module
# HelpInfoURI = ''

# Default prefix for commands exported from this module. Override the default prefix using Import-Module -Prefix.
# DefaultCommandPrefix = ''

}

To make the actual cmdlet behind this component you need to edit the pre-defined function in the .PSM1 file so this is my finished .PSM1 before running the invoke-build

$IndexJs = Get-ChildItem "$PSScriptRoot\index.*.bundle.js"
$AssetId = [UniversalDashboard.Services.AssetService]::Instance.RegisterAsset($IndexJs.FullName)

function New-UDScrollProgress {
    <#
    .SYNOPSIS
    Scroll bar to show the scroll progress of the page at the top of the page
    
    .DESCRIPTION
    Scroll bar to show the scroll progress of the page at the top of the page
    
    .PARAMETER Id
    The ID of this editor

    .PARAMETER Color
    Color of the progress bar as a hex string

    .PARAMETER BackgroundColor
    Color of the progress bar background as a hex string

    .PARAMETER Height
    Height of the progress bar

    .EXAMPLE
    New-UDStyle -Style '
    top: 0;
      position: fixed;
      left: 0;
      opacity: 75%
    ' -Content {
        New-UDScrollProgress -BackgroundColor "transparent" -Height "6px"
    }
    #>
    
    param(
        [Parameter()]
        [string]$Id = (New-Guid).ToString(),
        [Parameter()]
        [string]$Color = "#eb5757",
        [Parameter()]
        [string]$BackgroundColor = "#f2f2f2",
        [Parameter()]
        [string]$Height = "4px"
    )

    End {
        @{
            assetId  = $AssetId 
            isPlugin = $true 
            type     = "udscrollprogress"
            id       = $Id
            
            color    = $Color
            bgColor  = $BackgroundColor
            height   = $Height
        }
    }
}

# Ready, Steady, Go! 🚦

So once you have followed the above, you are now ready to run:-

invoke-build

As long as you read the official documentation on building a custom component you would have already downloaded all the prerequisite modules and software required to build custom components. I did find I needed to also install the psake module as well. This process literally took 10 seconds or less. As long as you do not get any errors, and the process completes then within the output directory you will have you brand-new custom component you built.

I restarted the PowershellUniversal service then logged into the main portal. Verified the module was being picked up by the software, by searching the available modules within the program. Once I verified my new module was included, I then did a test on the dashboard.

I now had a fully working react custom component loaded into the Powershell Universal dashboard I had created. I then verified all the parameters worked, which they did then it was time to publish this module to the Powershell Gallery. Please note to include ud-component within the module tags to enable your custom component to be found on the market place exclusive to this product.

Link to this module on marketplace
https://marketplace.universaldashboard.io/Dashboard/UDScrollProgress

# 💥 That is how this Powershell module was done. Till next time, take care