SharePoint 2013 Developer Tips June 23rd, 2014

Tips

  • You can add scripts to page layouts after a snippet’s <div></div>, but not within the snippet in the layout file
  • Bootstrap JS files conflict with SP core; edits won’t save in browser
  • HTML for SharePoint Ingestion
    • No <form> tags
    • No <style> tags
    • Use ms-design-css-conversion=”no” in the CSS <link> tag if using web fonts
    • SP strips the “<!– if lt ie …” shims
    • Use relative paths for assets
    • Watchout for global tag CSS selectors
  • Never edit the master file SharePoint creates
  • Delete files under Site Settings > Web Designer Galleries > Master pages and page layouts
  • Upload files via the files tab
  • Click the ellipses to access actions
  • The order of SP page construction = Master Page + Page Layout + Snippet(s)
  • Need to turn Design Manager on under Site Settings > Site Collection Features
  • It’s a good idea to namespace the CSS via a wrapping class (easiest via SASS and then just run grunt when you make changes)
  • Lists are created as ‘apps’ and the advanced settings allows connection to a content type
  • Wikis can be enabled if Publishing is active
  • Alternate CSS is under master page settings
  • You can embed JavaScript via Custom Actions without touching the master page (here’s a GitHub repo with a helper page for those of us who don’t know PowerShell) … minute 24:20 in Learn best practices for customizing and branding SharePoint Team Sites

Direct URL Paths

  • Change the look… /_layouts/15/designgallery.aspx
  • Import design package… /_layouts/15/start.aspx#/_layouts/15/DesignPackageInstall.aspx
  • List of composed looks… /_catalogs/design/AllItems.aspx
  • List of site’s web pages… /Pages/Forms/AllItems.aspx
  • Master Page files… /_catalogs/masterpage/Forms/AllItems.aspx

Recommended Development Path

  1. Site – Create a new site
  2. Master Page – Create and publish a master page with only calls to the main JS and CSS files
    1. Upload and publish JS, CSS, and images
  3. Page Layout – Define content type (new page layout content type) and fields (name for each editable area of page)
    1. Site settings > Site content types … Create
      1. Set parent to Publishing Content Types > Page
      2. Assign to new group for project or project’s existing group (e.g. My Project Content Types)
    2. Add the new fields via Add from new site column (Add to their own group)
    3. Create and publish page layout with Content Type set to the page layout you just created
      1. Customize by downloading, modifying HTML, and then uploading (remember to publish changes)
  4. Pages – Create pages using the new layout

Resources