Updating JavaScript View Models Using PowerShell cmdlets in Office 365

Previously I wrote a blogpost about my experiences with the Office Dev PnP PowerShell cmdlets by Erwin van Hunen. I will probably make these posts about the Office Dev PnP PowerShell cmdlets into a blog series, but I’ll see how that works out. In my first blog, I wrote generally about the Office Dev PnP PowerShell cmdlets, but now I will focus upon a specific use case: view models!

The great thing about working with view models is that you can add a content editor Web part to a page and link that content editor Web part to a view model HTML file you upload to a directory in the style library. For a recent deployment, I even automated adding the Web parts to the pages, but I’ll cover that in a future blog.

When working with view models, I normally edit the HTML file, change some JavaScript, upload the file and check the file in. If it is good, it’s good… If not, I have to repeat the steps. To make this process a bit more automated and to save time, I created a PowerShell script. I created a work directory where I placed the script. In that directory, I created a directory for each site collection I want to add view models to. In those directories, I put my view model HTML-files. See the image below for an example of the directory structure.


Now that we’re done with the directory structure, we’re ready to start with the script. First, we have to set some values. You can import them from an XML file, but you can also ask for them in your script. I like both options, but in this example, I’ll use the second option.

Ask for some values $tenant = Read-Host "Please enter the tenant name..." $scurl = Read-Host "Please enter the site collection name..." $url = "https://$tenant.sharepoint.com/sites/$scurl/" ## Set some values $SourceDirectory = 'C:\ViewModels' + $scurl + '' $files = Get-ChildItem $SourceDirectory -Recurse

Now let’s connect to the tenant. I always add a generic credential to the Windows Credential Manager with “O365-” as a prefix to my tenantname. I think it’s really clear this way, and everyone in our team uses the same syntax, so we never have to change the Connect-SPOnline cmdlet values. This saves a lot of time.

Connect to tenant Connect-SPOnline -Url $url -Credentials O365-Tenantname Write-Host "Connected to tenant" -ForegroundColor Green

We’re now connected to the site collection we entered in the beginning of the script. To update the view models, I use the following lines of code:

Foreach loop to upload all files in site collection directory Foreach ($file in $files) { ## Check out file Set-SPOFileCheckedOut -Url /sites/$scurl/Style%20Library/ViewModels/$file Write-Host "File '$file' checked out" ## Upload file Add-SPOFile -Path $SourceDirectory$file -Folder "Style Library/ViewModels" Write-Host "File '$file' added" ## Check in file Set-SPOFileCheckedIn -Url /sites/$scurl/Style%20Library/ViewModels/$file -Comment "New version added with PowerShell" Write-Host "File '$file' checked in" }

The foreach loop I added to loop through all the files in the source directory. In this loop, I check out the existing file, upload the more recent file and I check the file in. If you’re uploading new view models you can comment out or erase the Set-SPOFileCheckedOut cmdlet.

At the end of the script, don’t forget to disconnect using the following cmdlet.

Disconnect Disconnect-SPOnline Write-Host "Disconnected!" -ForegroundColor Red

This is a pretty easy way to update or add files to your style library. Of course, you can do this with all sorts of files, so make sure to try this out!