I’ve made a lot of progress and have been able to build a skeleton of a custom module.
I made a bunch of notes along the way to help me next time, but figured it will probably help others too. So here’s the notes.
The following is a step by step guide to building your first UD Custom Control using the UD Custom Control Template without using Plaster in order to understand the files, their relationships and the process. This is especially useful for PowerShell IT Pros that don’t have a dev background and are fumbling their way through their first UD Custom Control. Once you’ve got a handle on the process using Plaster you will understand the values it is requesting and what the outcome from them will be.
- Get the UD Custom Control Template from Github
** https://github.com/ironmansoftware/ud-custom-control-template
- Extract locally and then copy the 2nd level ud-custom-control-template-master folder to your Projects/Code Directory and rename it to the name of your new Component (e.g UDMyControl) and open the folder in VSCode
- Rename src\UniversalDashboard.template.psm1 to a name for your Control. e.g UniversalDashboard.UDMyControl.psm1
- Update src\UniversalDashboard.template.psm1 to remark out Line 15 $AssetId and add in the following two lines as shown below
$AssetId = [UniversalDashboard.Services.AssetService]::Instance.RegisterAsset($IndexJs.FullName)
[UniversalDashboard.Services.AssetService]::Instance.RegisterFramework("Antd", $AssetId)
- Update src\Components\index.js to change;
UniversalDashboard.register("<%=$PLASTER_PARAM_ControlTypeName%>", <%=$PLASTER_PARAM_ControlName%>);
to values based on your Control so that <%=$PLASTER_PARAM_ControlName%> becomes UDMyControl and <%=$PLASTER_PARAM_ControlTypeName%> becomes the name you will use in UD e.g. UD-MyControl
e.g
import UDMyControl from './component';
UniversalDashboard.register("UD-MyControl", UDMyControl);
- Update src\Scripts\component.ps1 to replace
function <%=$PLASTER_PARAM_CommandName%>
=> New-MyControl
<%=$PLASTER_PARAM_ControlTypeName%>
=> becomes UDMyControl
- Remove the following lines (or remark out)
# The keys are case-sensitive in JS.
text = $Text
,
[Parameter()]
[string]$Text
- Update src\package.json to change
<%=$PLASTER_PARAM_ControlName%> => UDMyControl
"version": "<%=$PLASTER_PARAM_ControlVersion%>" => value becomes the control version e.g 1.0.0
"description": "<%=$PLASTER_PARAM_ControlDescription%>" => a description for your control
"author": "<%=$PLASTER_PARAM_Author%>" => you
- Update src\Components\component.jsx to replace the following in the class and export lines
<%=$PLASTER_PARAM_ControlName%> => UDMyControl
** Update the return text to be something like
return <h1>My first UD Custom Control works</h1>
** Remove the State section
- Update src\build.ps1
** Insert at Line 15
New-Item -Path "$BuildFolder\public" -ItemType Directory
** Replace
<%=$PLASTER_PARAM_ControlName%> => UDMyControl
<%=$PLASTER_PARAM_ControlDescription%> => a description for your control
<%=$PLASTER_PARAM_CommandName%> => New-MyControl
ReleaseNotes = "<%=$PLASTER_PARAM_ReleaseNotes%>" => first release of Universal Dashboard MyControl
<%=$PLASTER_PARAM_Author%> => you
CompanyName, Copyright etc as required
- Update src\webpack.config.js
**Replace
<%=$PLASTER_PARAM_ControlName%> => UDMyControl
- Run your first build of your template for your Custom Control
** Run .\build.ps1
Success looks like this
And under src\output\UniversalDashboard.UDMyControl you will have your module and the base React lib.
- Create a Dashboard Script e.g
import-module UniversalDashboard.Community
import-module 'C:\<path to your module>\UDMyControl\src\output\UniversalDashboard.UDMyControl\UniversalDashboard.UDMyControl.psm1' -Force
Get-UDDashboard | Stop-UDDashboard
$myDashboard = New-UDDashboard -Title "My New Custom Control" -Content {
New-MyControl
}
Start-UDDashboard -ListenAddress 127.0.0.1 -Port 10006 -Dashboard $myDashboard -Force
If you get an error message like the following (Nlog.Extensions.Logging.NLogLogger.Provider… below) when starting the dashboard from VSCode then try running the UD Dashboard script from PowerShell ISE. This worked for me and I think it is to do with my env having multiple versions of dotnet/dotnet core installed and ILoggerFactory is obsolete in .NET Core 3 ( https://www.nuget.org/packages/NLog.Extensions.Logging/ ) ;
You now have a platform to build your custom control.
The rest is up to you in updating your new Custom Control to do whatever it is you are building.
Good luck.
