Stripping underscores on a page

​​When creating a new page, the title is the same as the file name.
As of this date, there currently is no way to split file name from page title.
It’s important that we do not include spaces in a file name, and that we instead use underscores.
Unfortunately, with underscores, we have a strange looking page title that includes underscores, which we can strip using a content editor web part.

This is what the title of this page would look like without the underscores stripped:

Page Head with Underscores

Check out the page, and place in EDIT mode.

In the footer of the page, or at the bottom of your site content, insert a Content Editor webpart.

You can find the Content Editor web part under the Media and Content category.

Insert Content Editor Web Part

Click on the little triangle in the top right hand corner of the web part, and choose Edit Web Part.

In the Content Link box, copy and paste the following:

/sites/dsa/SiteAssets/Javascript_strip_underscores.js

Content Editor Javascript Strip Underscores

Under the Appearance drop down, choose Chrome Style of NONE.
Then click OK and SAVE the page.

Content Editor Chrome None

Advertisements

Create a calculated field to show due dates first

When viewing task lists ordered by due date, often the tasks with no due dates appear at the top of the list, while the items that have a due date appear at the bottom. Sorting the list in descending order doesn’t help either, because then your items that are due soon will appear in the middle of the list.

There doesn’t appear to be an out of the box setting that will display items with a due date first, followed by those without one, so we get around this by using a calculated field column within the list settings.

Click on the List tab, then on List Settings

SharePoint: List Settings

Scroll to the middle of the page and add a new column. Give that column a name, such as HasDueDate

Choose for this column to be a calculated field and use the following formula in the formula field:

=IF(ISBLANK([Due Date]),”No”,”Yes”)

Calculated field: hasduedate

Save the column.

Sorting your list to include this new HasDueDate column.

The next step is to add this field to the sorting options on your list view.

SharePoint: Modify View

Scroll to the middle of the page, where the sorting options are, and choose HasDueDate from the first column option; then set that to descending order (you want “Yes” to come before “No”).

In the second sort column, choose Due Date in ascending order.

Now your list will always sort with the due dates first, in ascending order.

Standard and friendly date views

This tip applies mostly to task lists, but also applies to document libraries.

It is standard for SharePoint Online to present dates in a friendly format, such as Sunday, or February 15, Yesterday or Tomorrow.
SharePoint: friendly dates

Some people prefer to just see the dates themselves and don’t like seeing the friendly dates.

SharePoint: standard date

Here’s how you go about changing that.

Go to click on the LIST tab and click on list settings (in a library you would go to the library tab and then library settings.)

SharePoint: List Settings

Scroll to about the middle of the page to where the list of columns are, and click on the date field you want to change.

About midway down the settings screen you will see Display Format.

SharePoint: Standard / Friendly Date option

Change this setting as you need to, to set it to Standard or Friendly format.

Then choose SAVE

Adding a new color scheme to your site

This tutorial contains the steps for adding a color scheme to your team site. Our custom color just happens to be called DSA Hokie.

Web Designer Galleries

  1. To add the DSA Hokie color scheme, first go to the gear and choose Site Settings
  2. Under Web Designer Galleries, choose Composed Looks
  3. Click on new item

Complete the information as follows:

  • Title: DSA Hokie
  • Name: DSA Hokie
  • Master Page URL: /sites/dsa/base_public/_catalogs/masterpage/seattle.master
    • replace dsa/base_public with your site’s URL
  • Theme URL: /sites/dsa/_catalogs/theme/15/DSA_Hokie.spcolor
  • Image URL:
  • Font Scheme URL:
  • Display Order: 5

Composed Looks List

Now that you have created the color palette, now add it to your site.

  1. Go to the gear, then choose Change the Look
  2. Choose DSA Hokie, then Try it out
  3. Once you see the preview, then choose Yes, keep it

Using XSL to reformat information in a list

I first discovered the use of XSL formatting when we were trying to make links in a links app open in a new window. It’s funny how SharePoint lets you open other links in a new tab, but for some reason the app that’s geared specifically for the creation of links won’t open those links in a new tab.

Using XSL allows you to step away from always displaying your content in a spreadsheet-like list, and can help display your content in a more user-friendly way.

While working with XSL files is an advanced skill, and definitely not for the faint of heart, the toughest part of the process is making sure that you have the correct field names. The field name that is shown on the List View is not always the name of the field that SharePoint uses to display the fields. Therefore you need to find the actual SharePoint field name. To find that field name, go to the List Settings for the list you’re looking to display and then right-click on the name of the column you’re looking for. Copy the link and paste it in a notepad window. Your web address will look something like this.
/sites/dsa/CIT_P/_layouts/15/FldEdit.aspx?List=%7B9610E212%2D2C1C%2D488A%2D93B7%2D14EEBEE1C9E3%7D&Field=Company

The field name in this case is Company, and so you would use @Company in the XSL file to reference it.

For hyperlinks, the field actually has 2 components: the URL and the description. So for a field such as Web Page (below), you would need @WebPage as well as @WebPage.desc

/sites/dsa/CIT_P/_layouts/15/FldEdit.aspx?List=%7B9610E212%2D2C1C%2D488A%2D93B7%2D14EEBEE1C9E3%7D&Field=WebPage

When creating XSL files, it’s best to work from an existing file. When you need to create new fields, use syntax similar to that shown here.

Sample XSL Code

Then, to use those new fields in your page, use syntax such as this:

Sample XSL Code Use

The disable-output-escaping=”yes” portion of the code is invaluable. It will make sure that descriptions or text fields appear with HTML code intact. This means that links will work, as will ampersands (&) and other such characters. If you do not include that code, you would end up with HTML code showing on the page.

Handling spaces in field names with XSL

If your field name has spaces or other characters, you’ll end up with a field name that looks like this: Field=Buildings%5Fx002d%5FResLife

It looks a little messy but it’s just SharePoint’s way of handing these characters in field names. In order to work with this kind of a field name, replace the %5F with an underscore. A space will then look like _x0020_ and a hyphen will look like _x002d_ as shown in the image below.

Sample XSL Fields Spaces

Pasting hyperlinks with descriptions into SharePoint

I would consider this an advanced tip, since it involves the use of Microsoft Access but when you have a lot of links to enter and modify on SharePoint, it might be worth looking at. The hyperlink field in SharePoint is actually made up two parts: the description, and the URL. Using the Quick Edit menu when pasting the links replaces both the URL and the description. If you want the description to be different, you can click on the hyperlink icon, which then shows a little dialog box, where you can make the change.

SharePoint: Hyperlink Field

While this method works really well for the occasional link, I was working on a list that contained 104 links that I needed to update in this fashion. I imagined there had to be a better way, and thankfully there are a lot of people smarter than me out on the world wide web. I found this great article which explained the process for importing those links into SharePoint.

While the solution gets there in a very roundabout way, it saved me a ton of time.

Step One: Create an Excel file

First you need to create the list of descriptions and links in a Microsoft Excel file. You probably start here anyway if you are dealing with a lot of links.

In another field, use the CONCATENATE formula to add a #, a comma, and a space between the description and the link, so the link looks as follows:

DSA Home#, https://virginiatech.sharepoint.com/sites/dsa/home/

Excel screen shot showing one row with two columns: Column 1: DSA Home, Column 2: Hyperlink to dsa home site. Below that is a formula showing =CONCATENATE(column1, "#; ", column2)

Open your SharePoint list in Microsoft Access

Once you have your spreadsheet is up, go to SharePoint list in question and from the LIST tab, choose OPEN WITH ACCESS.

SharePoint: Open with Access

Access will ask you to save the file. If you want to save it permanently, you may want to save it back to SharePoint. Else, saving it to your hard drive works for a temporary need.

If you’re working in the new version of the list view, you may have to switch to classic SharePoint view.

Use the shift and arrow keys on your keyboard to select the fields you want to change, and then paste the content from your Microsoft Excel file into Access.Hyperlink Field Access Sample

If you need more help, view the video on the article page for more details.

Removing the checkbox field from list views

When you create list views, you always end up with a little check box field that you don’t really need nor want, but it shows up anyway.

Its purpose of that check box field is to allow you to select the item so that you can edit the properties, but in some cases you just don’t want that. You just want the link to the document or item and don’t want the check box thing in your way.

It was bugging me but not enough to really find a solution, until today. Last week I had a great session with someone who uses a screen reader for their work and I discovered that SharePoint is EXTREMELY lacking in its accessibility compatibility. We reviewed all kinds of site configurations that I had created in the past to see what the reader could see and what it couldn’t.

It appeared to me that any page I had created using XSL tended to work fairly well, but that any regular SharePoint table was hampered by the little checkboxes that appear on the left. I sought to try XSL on a document library and the little check box still showed up, now as a hovering thing that moved the text over on the screen.

Long story short: a very simple “on/off” switch in the Tabular View section of a list view.

tabularview-allowcheckboxes

tabularview-allowcheckbox-no

The default shows this as ON and turning it OFF limits the user in being able to perform bulk actions. Before automatically turning this OFF, think about the end user and what their needs are. I am hopeful that making this change will help make pages more ADA compliant to generate a better user experience for those with screen readers. I will keep you updated as we find more “fixes” for screen readers.