For anyone that’s attended my sessions (SharePoint Saturday, SPFest, etc…) for the last few months I’ve given you a heads up that my blog has been in flux for a little while now as it needed to be moved. Well, I think it’s finally set now.
Big day in the SharePoint world today as Microsoft announces lots of updates coming to Office 365, SharePoint Online, and coming in SharePoint 2016.
First up – ‘SharePoint’ is back. It seems like small thing, but when you’re in Office365 and click on the ‘waffle’ menu in the upper right – instead of ‘SharePoint’, we’ve had ‘Sites’. Not a huge deal to some, but it diminished the brand a bit. With the latest updates we’re returning to ‘SharePoint’.
Next, lots of updates: big and small. Topics include:
- SharePoint mobile app – sorry, I just can’t say ‘your intranet in your pocket…’
- SharePoint home (web/O365)
- Team Sites + Office 365 Groups – better together…
- Modern library and lists experiences (more on what this means for CSR…)
- PowerApps integration
- Microsoft Flow integration
- Modern pages experience
- Improved site activity tracking
- SharePoint Server 2016
- OneDrive for Business and O365 file sharing updates
- The SharePoint Framework – open and connected
- Security updates
- Feature packs for on-prem
You can find links to the key announcements and sites here:
Microsoft blog posts:
- The Future of SharePoint – by Jeff Teper
- The mobile and intelligent intranet – by Mark Kashman
- SharePoint Server 2016 – your foundation for the future – by Bill Baer
- Announcing simple and powerful file sharing and collaboration for Office 365
- The SharePoint Framework – an open and connected platform – by Bill Baer
Event recap, recordings, and deep dives:
- Main event recording
- Summary of all 7 ‘deep dive’ sessions
- Accelerating Innovation with Hybrid: SharePoint Server 2016 and Office 365
- Effortless File Sharing on Any Device: OneDrive for Business and SharePoint
- Foundation for the Future: SharePoint Server 2016
- Open and Connected Platform: The SharePoint Framework
- Security, Privacy and Compliance for SharePoint and OneDrive for Business
- The Mobile and Intelligent Intranet: SharePoint Sites and PowerApps
- Your Intranet in Your Pocket: The SharePoint mobile app
Other references and links:
- SharePoint mobile app
- Microsoft Flow
- Wictor Wilen – Web Parts are back…
There will be more updates in the coming days. I’ll try to update here with relevant links, etc. as they develop.
Microsoft recently announced a new document library experience. Today as part of the May the 4th ‘Future of SharePoint’ event a similar new experience for lists was announced. Ultimately, good moves in the broader effort to improve user experience within SharePoint and an evolution forward. But what, if anything, does this mean for JS Link and Client-Side Rendering (CSR)?
Let’s take a look… I’m not going to give a deep tour of the new interface – that’s for another day. Just focusing on the CSR implications right now.
So, the new list and library interface is locked down. The default page still uses the default chosen view and you can quickly and easily switch views. The page, however, has no editing options. We can’t get to the edit page and edit web part interface. So no-go for CSR. Still, not terrible – while you *could* edit the default page, it wasn’t generally a good practice. (of course, there were some relevant use cases out there…)
Now, if you’re creating pages and adding web parts of these lists and libraries to the page – we’re still in the game. This hasn’t changed… yet. We can still build out pages, add CSR via JS Link and build out our solutions.
So, the short story is that CSR and JS Link still works in 2013, 2016, and O365. There are a few fuzzy spots on the radar for O365 and 2016 though. The new page experience and the new SharePoint Framework are likely to creep into the CSR space. What the roadmap details and timeline are remain to be determined.
Note: If you still need to edit the main library and list pages, you can switch back to ‘classic’ mode. This can be done at the library, site, or site collection levels. Links available below.
References and related materials:
- What is a document library – with updated info to include ‘classic’ vs. ‘new’ libraries. https://support.office.com/en-us/article/What-is-a-document-library-3b5976dd-65cf-4c9e-bf5a-713c10ca2872?ui=en-US&rs=en-US&ad=US
- Switch between new and classic document libraries.
- Wictor Wilen – Web Parts are back at the center of SharePoint development
This post covers another column type for use with CSR overrides. Lookup columns have what I consider an irritating default display characteristic in that they are displayed as a hyperlink to the lookup list item.
Where the link goes to:
The majority of the times I’ve seen a Lookup used, they are simply a list of items to select in a dropdown or radio buttons – like a category. In this case the hyperlink and displaying the form are useless (to me). Every so often the lookup list has a few other fields, like Description, etc. in that case the link can be a bit more useful, but it still seems to be more of a distraction from a user experience (UX) perspective.
What I’d like to see is the Lookup value – the same text – displayed without the hyperlink. I can get this value using the following:
Or, more generically:
You can also access two other properties of the item. The properties are: isSecretFieldValue, lookupId, and lookupValue. And no, right now I have no idea what the heck ‘isSecretFieldValue’ is other than a Boolean value.
Note: OK. I looked it up. There’s one post under ‘isSecretFieldValue’ here – and if set to ‘True’ it apparently hides the values of the Created By and Modified By values in the form. Huh.
Back to our Lookup column.
As with several other column types, the Lookup column can contain more than one item and is stored as an array. As with those other column types you can also check how many items are contained in the column value by checking the length of the array:
Once an override is put into place using this approach, the list view now looks something like this:
Sample code for this example can be found here.
When starting with JSLink and CSR (Client-Side Rendering) in SharePoint 2013 one usually starts with text fields. They tend to be the most intuitive and simple. Referring to a text field looks like this:
ctx.currentItem.[internalName] like “ctx.CurrentItem.Title”
Pretty straightforward. Other fields take a little bit more poking around to figure out the correct syntax. Person fields, like a few other field types, allow for one or more values to be stored – meaning the data will be stored in an array. Because of the array, overriding Person fields looks something like this:
The email address:
For some reason, the complete list of properties that are available for my ‘Created By’ field (internal name ‘Author’ – using Name with Presence) and ‘Modified By’ field (internal name ‘Editor’) are: email, id, picture, sip, and title.
However, when I have a Person field that I manually add to the list the properties I get are: department, email, id, jobTitle, picture, sip, title. When a People field allows multiple values it also has a ‘value’ property.
I’m not sure why you get the extra properties (department, jobTitle, and value) in addition to the original fields. The manually added field also has the picture property populated by the data from the user profile while the Created By and Modified By fields do not. More to dig into at another time.
If the Person column does contain more than one item, you can check ctx.CurrentItem.[internalName].length and then iterate through the array for all the names, email addresses, etc.
Definitely more nitty gritty details on how these fields work. But this should get you started for now.
I had an inquiry this week regarding whether or not CSR could be used within a SharePoint list view to display links directly to an item’s attachments. It took a bit of tweaking code around a bit, but Raymond Mitchell (@iwkid) and I were able to get it working.
Background: SharePoint lists may allow for attachments to list items. SharePoint also has a default column that can be used in a view for displaying whether or not an item *has* one or more attachments. (Is that Clippy in disguise?)
A user experience (UX) stumbling block however is that you have to open up an item view in order to see the list of items and links to them. If you’re familiar with SharePoint, not a huge UX issue, but still somewhat irritating compared to just seeing the list of items in the view directly. If you’re *not* SharePoint-savvy, then you might not know at all whether an attachment exists or how to see attachments.
We’re aiming for something like this:
Instructions for use:
- If you don’t already have one, create a ‘scripts’ document library on the Office365 / SharePoint site you’ll be using the CSR file on.
- jQuery is required for this CSR to work. If you don’t have jQuery already, upload it to the same scripts library. (See this post for more information on using jQuery with CSR)
- Add the Script Editor web part to your page or use the ‘Embed Code’ option to add a reference to jQuery.
- Your list: If you don’t have a ‘spare’ text column you can use to override in a view, create a new text column (ex. ‘ViewAttach’).
- Create a view for your list that includes your new column. You can still use all the same sorting, filtering, and other other view configuration settings for this view.
If everything is in place, attachments in your list should now be listed in the column you identified. (If not, check the common troubleshooting items for CSR… hmm, that sounds like another post…)
- The (internal) name of field being overridden. In the example code below we’re using the ‘Body’ column (which is the internal name for the ‘Description’ field) of a task list. You can override any text field and/or create your own.
- The siteURL variable. — See example in the CSR file itself
- The listName variable. — The list that includes the attachments you’re displaying links to (example in file)
- The attachPath variable. — Link to where attachments are stored (example in file)
Thanks, Notes, and References:
- Thanks to Raymond Mitchell (@iwkid) for his help in getting the code to work.
- Using jQuery for CSR
- JS Link – Hello World
Please let me know how this works for you!
Now, plenty of folks play with a variety of mods. I’ve been a bit of a stickler though and haven’t installed any for my kids. Partially because I’m a bit of a purist. Partly because I didn’t want the additional hassle of supporting them and don’t want to wait to update Minecraft itself when updates roll out. (There are usually some gaps in time between when a new game version rolls out and when mods are rolled out that support the new game version) Besides, my kids are already having a blast with the basic Minecraft game and are accepting of these limitations.
Aside from Minecraft, I’m always looking for kid-friendly ways to introduce and encourage basic coding skills, computational though processes, etc. I’m not trying to steer them towards a career, per se, but I want to at least introduce to concepts because I believe they’ll be invaluable as they grow up in this crazy world of ours.
So, with that background, when I heard about this mod my interest was peaked (as was theirs): http://www.computercraftedu.com/
Enough of my rambling. On to the steps and notes.
So far, we have it installed so they can experiment with it locally. I’d like to get it running on a server as well to see what craziness happens. These are the steps we used to install it locally. Hopefully this can help some folks get it running faster than I did initially. It was my first experience getting some of these things running.
- First of all, the ComputerCraftEdu site does a good job of getting you started – start there.
- This particular mod only works with an older version of Minecraft. As of July 23, 2015 ComputerCraftEdu is version 1.7.10 while the current version of Minecraft is 1.8.7
No need to worry, we can work with this just fine. There are some warnings about the potential for breaking or corrupting a world (file) by opening it with the mismatched version – there are ways to help prevent this – described in the steps below.
- Minecraft Forge – it’s a program used to manage and load mods. ComputerCraftEdu requires it to load their mod.
- WARNING: When visiting and downloading Forge BEWARE OF AD LINKS. When you click on the download links you’ll see a full page add that you’ll be tempted to click and you’ll get some unknown, untrusted software. STAY AWAY. Look at the header and click the SKIP button to get the download you want. (image below)
- Download the ComputerCraftEdu mod (I’m not going to link directly to the file – go to their page and make sure you’re getting the latest version).
Note: You might get a “hey, this file could be dangerous” message. This is because of the type of file it is. If you’re getting it from the computercraftedu.com site you should be fine.
- Go to the Minecraft Forge installer page HERE (v 10.13.4.1448 – for Minecraft 1.7.10). SEE THE WARNING ABOVE – and image below.
- Click the ‘Installer-win’ link. SEE THE WARNING ABOVE.
- Click the SKIP button – the file you want should be downloaded into the directory you choose or the default location. It should look something like: “forge-1.7.10-10.13.4.1448-1.7.10-installer-win.exe” (numbers may be different for newer versions)
- Go to the downloaded file location.
- Right-click on the file name and “Run as administrator”. If you are on your child’s machine and it has parental controls in place you may need to enter your credentials at this time.
- “Do you want to allow the following program… make changes to this computer” If it is for the “forge-lots of numbers.exe” file, Click ‘Yes.
- If the machine has Minecraft installed, the Forge installer will find one of the locations Minecraft files are being stored.
- Before we go ahead with the installation, we’re going to create a new folder that we’ll use later. Click the ‘…’ button to see where the files are stored.
Note: I created the folder this way because I was already at the folder/directory location. You’ll need to note the location for later…
- Create a new folder – I called mine “.minecraftCCEdu”
- Once the folder is created – Click ‘Cancel’. Yep. ‘Cancel’ to get back to the install screen.
- The install folder should still show the original “.minecraft” (as shown above). Click ‘OK’
- It should download files, unpack stuff, and successfully install Forge.
- Click ‘OK’
- Open Minecraft launcher
- In the lower-left corner of the launcher, there is a Profile drop-down control and some buttons. Note the name of the default profile (probably the name of the Minecraft user) and click ‘New Profile’.
- The Profile Name is probably something like “Copy of [username]”. I changed this to “[Username]CCEdu”
- Check the “Game Directory” box, and change the folder path to your new folder – “.minecraftCCEdu”
- for the “Use version” option, click the drop-down and select ‘release 1.7.10-Forge…..’
It’ll be the last (or close) in the list.
- Click ‘Save Profile’
- Select the new profile from the drop-down.
- Click ‘Play’ – There should be some Forge loading bars that are new…
- (files and folders get created in your new directory)
- Quit Game
- Copy the ComputerCraftEdu .jar file from its download directory into your new .minecraftCCedumods directory.
- Open Minecraft launcher
- Make sure your new profile is selected
- Click ‘Play’
- Click ‘Create New World’
- Name it, select ‘Game Mode Creative’, Click ‘Create New World’
- To verify the mod is loaded, open your inventory. There should be a second page of options now showing ‘ComputerCraft’ and ‘ComputerCraftEdu’ icons.
- Congrats! Have fun experimenting!
- Some great Help links to get you rolling once you’re installed and configured.
- Also: Introduction to ComputerCraftEdu
- The separate Minecraft profiles you created should keep your ‘normal’ worlds separated from your ComputerCraftEdu worlds – if you’re anything like my kids you have a bunch of worlds in your profile, so this is a nice feature.
There are a few useful CSR utility solutions that require jQuery to be available to the CSR script. If you are an IW / Power User you don’t necessarily need to know how to use jQuery explicitly, but there are some easy templates that only work by using it.
If jQuery isn’t already enabled for your site, you need to add the jQuery file and a link to it on the page you’re using it on.
- Download the latest version of the file from HERE. Get the ‘…compressed, production…’ version.
- Copy the file to your Scripts library (just to be consistent with where your other CSR files are).
- On the page you are using jQuery dependent CSR, add a Script Editor web part.
- In the Editor web part, add the following line – or similar based on where your file is located. This worked for me by having the file in my Scripts library:
Note: Take a peek at Marc’s post on jQuery to make sure your file is working properly.
CSR that uses the jQuery library should now function properly.
The default message displayed in a view when that view has no items to display is:
“There are no items to show in this view of the [listname] list”.
In most cases this is just fine. When users are working directly in a list this message is consistent with the user experience.
If for whatever reason this text needs to be overridden there isn’t an obvious or simple approach to do this through the UI.
The default text is set within each list behind the scenes. If you were to change the property of the list directly using some custom approaches it would change the message for the list and be seen in all views. Using CSR, we’re going to change what is displayed without changing the core data. This give a few advantages:
- We generally don’t want to make permanent customizations if we don’t have to.
- Using CSR we can update the message for *each* view as necessary – which might be more appropriate for each use case.
The bonus here is that it’s REALLY easy using CSR once you’ve figured it out.
So, here’s how it works:
Note: Normally I don’t add CSR to actual view pages – *especially* the All Items view – but technically you can. I generally use a separate page with a web/app part dropped on the page and apply CSR using JS Link at that point. But for this simple example we use the straight-up view page.
Our view starts out like this:
Now, you can take a shortcut by using the Footer override, but this will override both the default message when there are no items in the list *and* be displayed when there are items displayed. Fine if the override is blank, but not useful if you’re actually displaying a message.
overrideCtx.Templates.Footer = “ “;
Applying this code as JS Link file gives us the following:
Pretty slick now that we’ve figured it out.
Thanks again to Raymond Mitchel (@iwkid) for helping with digging through the background details.
OK. Someone asked me today if CSR and JS Link can be used incorporate KPIs into a list view. The answer of course is ‘yes’. This is a wonderful example of how CSR can be used.
Background: If you’re wondering what a ‘KPI’ is – it’s a ‘key performance indicator’. You can find more about them here: http://en.wikipedia.org/wiki/Performance_indicator What we’re talking about specifically in this case is a visual KPI in a SharePoint list view – something that can be used as a quick visual cue as to what the data is showing.
If you’re wondering what CSR and JS Link are referring to, take a peek at my “JS Link – Hello World” article.
With all that settled, here’s a quick example of one way KPIs could be incorporated into a list view using CSR and JS Link:
- Create a list (yes, you can use an existing list).
- Add or identify a column that’s going to be used as a value to test.
- Add or identify a column for where the KPI indicator can be displayed – a graphic will override whatever data might be in this field. The title of the column can be useful to indicate which KPI is being displayed…
- Identify the locations of graphics to be used as the KPI indicators. I put mine in the Site Assets library for this example, but they could be stored just about anywhere.
Note: You can update the fully qualified links to the image to relative links: src=”/TeamSite/CSR/…” (still need the rest of the URL, but dropping the beginning part)
In the example code, we’re checking the value of one field and displaying the image in an override of a second field.
Again, this is an extremely simple example – the logic for the KPI could be much more complicated as needed. There could be one or more KPIs per item. Lots of ways to improve on the concept.
The example ends up looking something like this:
NOTE: For this quick and dirty example I created a field in the list that is essentially used only as a field to be overridden with an image. If I want to make the solution cleaner and more UX friendly I could do an Item override which would allow me to skip adding the new ‘container’ field. I could just bake the image into the rendered HTML directly.
Reference to where the images came from: http://commons.wikimedia.org/wiki/Category:Light_icons
Another much more complicated example: