SharePoint Online: Graphical Splash Page

A client, who uses Office 365 (post-2013 Service Upgrade), recently started development on a SharePoint-based employee portal. Because they have different HR/HCM structures and procedures in place for their lines of business, one of the requirements for the setup was a splash page that would allow users to select their organization.

This article at MSSharePoint Tips provides direction on creating a custom list in MOSS 2007 to use as a text-based portal splash page, and with a little adjustment the same instructions can be used to create a SharePoint Online-based graphical splash page (with, as the original article indicates, the ability to configure the links to display only to users that have appropriate permissions). The following steps outline the slight differences in configuration that I found worked for me. I’m only going to provide screenshots for the elements where I’ve made a change, as the original article has already done a really excellent job of documenting this process.

Note: Click the thumbnails to view full-sized images.
  • Create a custom list with an arbitrary name (I called mine SplashPage)
  • Enter the List Settings and modify the Title column so that it is not required
  • Create a new column with a hard-coded space (Alt+0160) for the name
  • Specify the column type as “Multiple lines of text”, 12 lines, “Enhanced rich text”
  • Create a new column called SortOrder
  • Set the SortOrder column type to Number
  • Create a standard view with an arbitrary name (I called mine “SplashPortal”); check the “Make this the default view” box
  • Set the Columns to display only the column with a blank name
  • Set the Sort to sort by SortOrder in ascending order
  • Clear the Tabular View “Allow individual item checkboxes” box
  • Set the Style to Boxed
  • Obtain the URLs of the images to be used on your splash page – I uploaded mine to the Site Assets library, but that’s not strictly necessary as long as SharePoint can reach the appropriate image URL
  • Add a new item to the list; leave the Title blank
  • Click into the main text field, then click the Edit Source button in the Ribbon
    EditSource

 

 

 

 

 

  • Enter the HTML code for your image and link – you can use the following as an example if you need one:
    HTMLSource

 

 

 

 

 

  • Click OK
  • Enter a SortOrder – the Boxed layout will create two columns of buttons, sorted in order based on the numbers in the SortOrder list, with buttons 1 and 2 on the first line, 3 and 4 on the second line, and so on
  • Click Save
  • Create a new Page to act as the splash page:
    • Click Site Contents (it should be at the bottom of the Quick Launch bar, unless you’ve disabled Quick Launch)
    • Click Site Pages
      SitePages
    • Click New
      NewPage
    • Give the page an arbitrary name and click Create
  • Configure the Page with the appropriate App Part and View:
    • Click the ellipses beside the Page name in the Site Pages list, then click Open
    • In the Ribbon, click the PAGE tab, then the Edit button
      EditPage
    • Click the INSERT tab, then the App Part button, then select your custom list, then click Add
      InsertAppPart
    • Click into the newly-inserted App Part (make sure you don’t click one of the list items)
    • In the Ribbon, click the WEB PART tab, then the Web Part Properties button
      WebPartProperties
    • In the sidebar, verify that the View created in steps 7-11 is selected in the Selected View drop-down
    • Select No Toolbar under Toolbar Type
    • Under Advanced, uncheck Allow Minimize
      ConfiguredProperties
    • Click OK
    • In the Ribbon, click Save
      Save

 

 

 

 

With all of the above done, your page should look something like this:
SplashPageComplete

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.