Updating JavaScript View Models Using PowerShell cmdlets in Office 365

Daniel Laskewitz

by Daniel Laskewitz on 8/17/2015

Share this:

Article Details

Date Revised:

Applies to:
Office Dev PnP, PowerShell, view models

Sponsored by

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.

Set Values
## 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 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:

Update view models
## Foreach loop to upload all files in site collection directory
Foreach ($file in $files)
    ## Check out file
    Set-SPOFileCheckedOut -Url /sites/$scurl/Style Library/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 Library/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 from tenant
## Disconnect
Write-Host "Disconnected!" -ForegroundColor Red

You can use these techniques as 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!

You can find Daniel’s original post here: http://www.o365dude.nl/2015/07/30/updating-javascript-viewmodels-using-powershell-cmdlets-in-office-365/

Topic: JavaScript and jQuery

Sign in with

Or register