Changing the URL of a list

Keeping it simple today, to change the URL of a list:

With SharePoint Designer
  1. Open up SharePoint Designer
  2. Connect to the site
  3. Click on All Files
  4. Find the name of the list
  5. Right click on the list click on Rename

The URL of the list will now also be changed.

If links to this list are not updated automatically:

  1. Navigate to the list settings in the browser
  2. Click on Title, Description and Navigation
  3. Without changing anything click on save

The links to the list should now be updated as well.

With Windows Explorer
  1. Navigate to the list in the browser
  2. Open the list up in Explorer view
  3. Click on the site name in the path
  4. Change the name of the folder that represents the list

MasterPage alternatives: Company Profile theme and Alternate CSS

With new features arriving nearly daily in Office 365 – SharePoint 2013 online, it is becoming a neccessity to find an alternative to using Master Pages to brand your sites.

With this in mind I decided to find solutions to the items that have been added to our current Master Page by only using Company Profile theme and Alternate CSS.

As a big company can have many site collections my two goals were:

Goal 1: Ensure changes to company wide branding can be made in one location and automatically used on all site collections. 

Goal 2: When creating a new site collection or subsite, company branding can be installed by using minimal amount of effort.

Step 1: Set top bar in company theme

Using the Office 365 admin portal, go to company profile and then theme. Set company colors and logo for the top bar.

Note: As long as the Change the look feature is not used, the top bar will always display these settings for all site collections and sites, including one drive. See Extra Step: for information on how you can return the Change the look setting to its original state.

Step 2: Create a CSS file

Create a CSS file in an accessible location, such as the style library in a ContentTypeHub site collection. Add CSS conform company branding. See below for tips!

Step 3: Set Alternate CSS

Every time you create a new site collection, navigate to the site settings, and under Look and Feel select Master page.

Click open Alternate CSS URL and select Specify a CSS file to be used by this site. Add the URL of the CSS file created in step 2.

If this is an existing site collection, check Reset all subsites to inherit this atlernate CSS URL. And then click on OK.

Note: For all publishing subsites these settings will be automatically inherited. For all teamsites, you will need to Reset all subsites ever time you create a teamsite.

With the above method all changes made to one CSS and one Company Profile theme will be seen over all your site collections and subsites.

Extra Step: Reset Change the Look

For all existing site collections which have had custom branding in the form of a changed look and feel, you need to do the following before the Company Profile theme will appear:

  1. Go to Change the look in the Site settings.
  2. Change the look to the white, blue, black – Office look.

CSS tricks for company branding

Changing the color of Site contents icons

As most of the icon on the Site contents page are transparent, they display the background color (standard color is blue). To change this use:

.ms-storefront-appiconspan {
background-color: rgb(0, 0, 0) /*Change color accordingly*/
}

Changing the color of Site contents Add an app

The add an app icon in Site Contents does not change automatically as this is taken from the spcommon.png. So download a version of the spcommon.png, change the colors as needed in an editor, save this file with a new name to the same location as the css file. In the css file add the following code:

img[src*=”spcommon.png”]{
background-image:url(“https://<siteurl>/contentTypeHub/Style%20Library/spcommon-<name>.png”);

         width:0;
height:0;
padding:134px 135.5px;
}

Changing the color of the New/Upload/Sync icons

All the icons in document libraries and lists are done with font glyphs. To be able to change the color just add the following CSS:

.ms-listview-glyph-withmargin {
color: rgb(0, 0, 0) /*Change color accordingly*/
}

Surpressing standard Logo and enforcing own Logo company wide

Using the same method as creating your own spcommon file, it is also possible to enforce the display of your own logo. Do this by saving a logo in the same Style library as the CSS, with pixels around 180px width and 64px height. And then including the following CSS:

img[src*=”siteIcon.png”] {
background-repeat: no-repeat;
background-image: url(“https://<siteurl>/contentTypeHub/Style%20Library/<logoname>.jpg”);
width:0;
height:0;
padding:32px 90px;
}

SharePoint Online 2013 Design Templates displaying local NL date for a managed property in all browsers

When trying to display a date in a Display Template within SharePoint, I have found that the browsers respond differently to certain function calls.

The issue was that the client wants the date to display in all browsers as: 9 maart 2015, in the dutch locale.

Given the context, ctx, and a managed property called MyDate.

1. Get the date:

var getMyDate = $getItemValue(ctx, “MyDate”)

2. Turn the variable into a date variable:

var theDate= new Date(getMyDate);

Using toLocaleDateString – gives correct format in Chrome but incorrect in IE11

var stringDate = theDate.toLocaleDateString(‘nl-NL’, {day: ‘numeric’, month: ‘long’, year: ‘numeric’});

Displays in Google Chrome: 9 maart 2015
Displays in IE11:  maandag 9 maart 2015

Using Srch.U.toFormattedDate – gives incorrect format

var stringDate = Srch.U.toFormattedDate(theDate);

Displays in Google Chrome: maandag 9 maart 2015
Display in IE11: maandag 9 maart 2015

Using Srch.U.toFormattedDate(DATE,’ShortDatePattern’) – gives incorrect format

var stringDate = Srch.U.toFormattedDate(theDate,’ShortDatePattern’);

Displays in all browsers: 9-3-2015

Using format(‘d MMMM yyyy’) – gives correct format but incorrect locale

var stringDate = theDate.format(‘D MMMM YYYY’);

Displays in all browsers: 9 March 2015

__________________________________________________________________

Using Moment-with-locales.min.js – gives correct format and correct locale

moment.locale(‘nl’);

var stringDate = moment(theDate).format(‘D MMMM YYYY’)

Displays in all browsers: 9 maart 2015

SharePoint Designer 2013 Workflow export for reuse

When creating a template site in SharePoint Designer 2013 it is useful to be able to add template workflows. These steps explain how to go about this:

1. Open the site that contains the workflow in SharePoint Designer 2013
2. Navigate to the workflow 
3. Klik on Save as template
4. A .wsp file is now automatically placed in the Siteactiva library

If the file is not visible in Siteactiva, refresh the page by pressing F5.

5. In the browser navigate to the Siteactiva library and download the .wsp file
6. Navigate to the site collection site
7. Go to Site settings, Solutions under Web Designer Galleries
8. Upload and activate the solution

The workflow solution is now added to the Site features.

9.  Navigate to the template site
10. Activate the feature in the site which will be used as template
11. Create a template from the site

You can now create new sites based on the template with the workflow feature added.

 

Note: A workflow solution can only be activated succesfully if the same apps that are used in the workflow are also in the site where you activate it.

Simple Sudoku Solving Guide: Introduction

There are many algorithms available for a computer programmer to solve a Sudoku.

Just google it some time and I’m sure you will find an abundance of resources.

Some algorithms take a very long time to solve a Sudoku and others will have an answer within milliseconds. It all depends on the approach.

The same can be said about people who solve Sudokus. Some people can solve a Sudoku very quickly while others find it hard to even solve the lowest grade Sudoku available. It’s all about insight and pattern spotting.

Read more

WordKnitting: Moving PHP from Drupal to WordPress

After having played around with Drupal for a year or so I decided that not only do I like simple (wat simpel!) I also wanted to start to blog. In came WordPress – THE expert (or so I was told) in blogging.

My old site in Drupal had a few neat features that I really wanted to take along to WordPress.

And what better way to blog than to share the experience of moving one of these features, Word Knitting, from Drupal to WordPress.

In Drupal I had made a module which I could include as a page and link to it. The interface was based on Drupal hooks and the code was written in PHP. As I read that WordPress also supports PHP I was all ready for a simple conversion.

Well, to be honest it was not simple! Having installed WordPress and created a Welcome blog I then had to discover how on earth a form running PHP code could be deployed to my WordPress environment.

Read more

Welcome

Welcome to Wat Simpel.nl! This site is still in construction but please do take a look around.