# Powershell Universal

It has been a while since I wrote any blogs, or tried to create a new public module for the masses. This blog site has contained trials and tribulations I have had, and some code to. I wanted to get a decent blog site together as a portfolio as I was contracting at the time. As mentioned on the blog site I landed my dream role. A work from home job, working in a great team of people with an amazing boss as well.

As this was the best work placement and contract, I had ever landed I wanted to give 100% of my time and effort to the work I was doing at work. I always wanted to write a book or do training on Powershell for a recognised company, and well I have been offered both, but again when I work on something I want to give it 100% and sadly I have not taken up these offers due to me wanting to keep this contract job which feeds my family and keeps a roof over my head.

They say time flies when you are having fun, and crikey it’s been like a year or just short of a year that I have been working at my contract job. Being a contract job means it has an end date which was the end of September 2023. However, I have applied for an internal permanent position, and I have been offered the role. I am truly over the moon with happiness, as although work life has been great this year, I have had some personal issues. Despite this the company have been amazing and supported me the whole time so, which makes it such an amazing company to work for, I wish other companies were the same as I feel they get the best out of me as an employee with the work approach and ethics they have.

On top of all the other events that have happened this year I was blessed on the 18th of July 2023 with my fifth daughter. Yes, daughter number 5 arrived after having to travel some distance to go to a different hospital as my local hospital was full. Life is always busy and lively in my house with the 5 daughters, wife, 3 dogs, 4 cats and 2 giant land snails truly never a dull moment. 2023 has been a busy year for me. Although I do feel like earlier in the year I had lost my mojo, which has now been restored, but yeah I just kind of wanted to crawl into my shell and not come out.

It got so bad I even put some poems on Facebook, it was then that one of the few friends I do have reached out to me. He wanted to check in on my mental state of mind and make sure I was okay. This meant a lot, as I have known him since we were about 5 years old. I met up with him and his boy with my two younger girls at a park so the kids could play and we could chat. He explained about his time in the army and the war zones he had been to, as well as other things in life he has been through. As without a doubt he was double-hard and if you ever had a problem as a kid, he could sort it out for you. He has always been there whenever I needed some help. We were not super-close friends as he had moved away and only recently come back to the area where I live, but it was a bloody good feeling to have an old-skool friend back in town to kick about with.

My friend always looked out for others and especially his family, and without a doubt was a sound bloke, who seemed like nothing could affect him. We were chatting a lot of WhatsApp and as I said was great to have an old friend back in town, and that I was back in contact with, as he has so many contacts and friends, so it was great to be included, that he had time to reach out to me for chats. So with all the activity that I have had this year, I thought I had not heard from my friend in a good few weeks since we last chatted. I need to find the time to reach back out to him. No reply. Went to Facebook as I know he has tons and tons of friends and family on there.

The next thing I am in total disbelief, like I have clicked on the wrong link or typed the wrong name or just something is wrong, as all over his page is RIP messages. An incredible numbing sense took over, trying to process what I am reading on the screen, as it appeared to coincide when I last spoke to him. I wish I had of called him that day instead of just sending messages and pictures via whatsapp, I wish I could have been like you okay mate? Need any help? Just wish I had of reached out more in his time of need. As I understand no-one knew he was feeling the way he was, I know he was having a bit of a rough patch, but in comparison to what life had thrown at him already, it did not seem like even in the top 10 of greatest challenges he has faced.

I guess like others no-one really asked him how he was feeling or doing. But to find out he has now left this life, something I never thought anyone of his character would do, as he was a legend in my book. So why write this to you reading this blog? I am telling you reach out to those friends you not spoken to in a few weeks, check in how they are, ask them if everything is okay. As you do not know how much it hurts to lose a mate your age until it happens. I cried for the first time in a long time over the sadness of loosing a mate, as it has not happened to me before.

Due to my contract ending in September, which is no longer the case, but as it was the case at the time, I thought I should cook up a dashboard, plus the senior manager asked how I would handle and display data in Powershell. So, I rolled out the red carpet and used Powershell Universal to accomplish this task, by putting some calls I was working on into a dashboard interface and used some graphs to collect and display useful information. To prove you could automate tasks, as well as providing fail safe ways for users to run their own queries to gather data via the form and make specific changes. This obviously all came together as a beautiful plan as they did offer me the job, but as well as having even more fun than usual by getting to use Powershell Universal again, it got me back to visiting the forums. Which if you have not done so already, then

I highly recommend you go and visit https://forums.ironmansoftware.com to be part of this awesome Powershell community using this product.

One of the posts on the forum caught my attention https://forums.ironmansoftware.com/t/query-builder-component/9651 and I clicked the link and thought yeah that does look a cool component, go build it. GO TEAM! But I kind of had a gut feeling that if the person had waited this long for this component and really wanted it, then in theory they could have had a go at building the component as there is new documentation to this, and is a completely different method that I used to build custom components when the product was just Universal Dashboard. Not only is this new method a lot quicker, it makes a little more sense when you come to edit the actual JSX file which trust me I still feel a bit of a novice at, as I do not do it that often. The guide published to write the custom components is certainly enough to accomplish the task. You can find this documented right here: https://blog.ironmansoftware.com/universal-dashboard-custom-components/

The only thing that I noticed was downloading the latest Node.js did not seem to like one of the package files included in the template from github, so it updated it, but this then broke the template. So I went to previous versions and downloaded 15.14.0 from: https://nodejs.org/en/download/releases

So yeah as mentioned that was the only bit of software missing from my work laptop which had the other items you need to build a custom component already installed:

• VS Code https://code.visualstudio.com/
• PowerShell Universal VS Code Extension https://marketplace.visualstudio.com/items?itemName=ironmansoftware.powershell-universal
• NodeJS https://nodejs.org/en/download/
• InvokeBuild https://www.powershellgallery.com/packages/InvokeBuild

Then clone this repo https://github.com/ironmansoftware/universal-dashboard-component or manually download the code, what-ever works best for you, but ultimately you need a local copy of that repository.

Now I like to use npm (npmjs.com) to find the custom component I intend to build and to look at the associated documentation that the author has done for the component. I could see this component had a dedicated website with a lot of information, which was a bonus when it comes to building it, as the more documentation the better. My fork is here for the custom component template: https://github.com/psDevUK/PSU_Component_Template

So clicking on the GREEN code button and selecting DOWNLOAD ZIP. Once the ZIP is downloaded I moved this to the following location on my hard disk and extracted it to give me:

So now I need to open up the PSU_Component_Template-main within VSCode using File – Open Folder. I then ran invoke-build

Which shows me everything worked:

**Right lets now get building… So I believe what I thought was the component here: ** https://www.npmjs.com/package/react-querybuilder

So then back to the VSCode terminal to paste in the following command:

npm i react-querybuilder –save

After this command finishes, we now need to open up the component.jsx file located in the Components directory:

This is the main nuts and bolts of the component that we are going to build. Each component is different so make sure you read the manual before you ask questions on the component. Again my code probably leaves a lot to be desired, and probably could be better constructed, but as it showed no errors it looked good to go:

Before I build it I need to edit the index.js file in the same directory as the component.jsx file which looks like this by default:

So I need to amend the name of this to be the name I choose in the jsx name I decided upon like so:

Now I need to build the PSM1 function behind this for the module to work, here is the default file you will be editing:

I constructed my function to work with the props that were declared in the jsx file I constructed from the template provided. So a snippet of my finished module is shown below:

Now it is time to test if you have constructed the JSX file correctly, remembered to tweak the JS file to include the component, that you most importantly installed the custom component from npm, created your custom function based on the template provided. All of which has been documented above. Now it is time to run invoke-build again to build this custom component we have always dreamed about. After running the INVOKE-BUILD command in the root folder from the terminal in VSCode I got the following output:

Awesome the build succeeded, and if I check my folder structure I see that I have a new folder created called output:

This output directory is the powershell module you have created to run on Powershell Universal. So now the big question is does this component actually work within Powershell Universal, and does it display and behave as I intended it to with the parameters I pass to it. To accomplish this goal, I selected one of the pre-defined templates included with Powershell Universal to spin up an empty dashboard:

Line one 1 I import the module I just built, then lines 15 to 20 is to test the code to make the module work. So I launch the dashboard in a browser with my fingers crossed:

Boom, it all appears to be working, to make sure lets actually use the component just to see if this does not throw any errors, or crash the webpage:

Boom again! All looks pretty good so far. I should now be able to use a button to call the value that is in the SQLqueryDiv container that holds this text, as the classname is the ID you can reference from Get-UDElement:

Hopefully this has provided some insight into what goes on when you need to build or create a custom component to interact with Powershell Universal. I really do hope that this inspires others to get building custom components to use with Powershell Universal.