SharePoint Custom Solution Branding and Tips – Part 1

Today, I want to talk about some of the good practices when it comes to SharePoint custom code development. More often than not, you would learn that SharePoint custom solution requires you to create Feature (and usually it’s automatically created when you pick any of the default SharePoint Project template e.g. Visual Web Part) to deploy your web part, style sheet, JavaScript files, or master pages.

I can understand that the Microsoft VS team is trying to help SharePoint Developers setting up a working solution as easy and as best as they could. What we need to really take note or at least be aware of is those default values assigned to the template. Below are some of the items in which I personally think that it should not be left unchanged or not thought thoroughly in order to develop a quality solution.

Namespace

Before even creating a new SharePoint 2010/2013 project, please think through the namespace that you want to use. Changing of namespace after you have tons of web parts, feature or pages will kill you. And I kid you not, using VS rename feature does not 100% guarantee you that the code will not break. I have experienced it, and it really takes you a lot of time to just renaming a namespace. (if you are new to SharePoint Development of course)

What I always like to use for namespace naming convention is as per below format

[Company Name].[Type/Name of the solution].[Sub type]

e.g. Microsoft.Branding, Microsoft.Branding.UserControls, Microsoft.Branding.DelegateControls

I would say it is not advisable to have more than 3 levels as it would introduce a very lengthy code referencing.

And I would also suggest using sub type like “UserControls”, “WebParts” or “WebPages” to organize your codes accordingly. It makes the next developer who is taking over your code easier to understand.

Feature Name

Sorry to say that this is one of the item that I dislike most when you found out that your developers did not use it correctly or not even care about changing the name of the feature!

You may not see the impact for now but once you have your code deployed to your customer’s SharePoint environment, it would really look bad and unprofessional to have this appearing in their Site Collection Feature or Manage Site Feature page.

sharepoint feature name bad practice

If you care enough, you will notice that only your custom feature’s name is ending with the numeric “1”. As if there is feature 2 and so on? LOL hell no!

Well, as a new beginner, you will likely to use the SharePoint – Visual Web Part template for a quick start.

sharepoint visual web part

What this template provides by default in the solution is the feature, package and a visual web part. Refer pic below

shareopint default feature name

Please please, remove the “1” and use a proper name.

Note that if you have already deployed your solution to production. After changing the name, you have to retract existing solution by running “Uninstall-SPSolution”, “Remove-SPSolution” and subsequently “Add-SPSolution” and “Install-SPSolution”. You should not use “Update-SPSolution” or else you will hit error deploying it.

Please also use a meaningful description. =)

Feature Image

The next thing I want to talk about is the icon of SharePoint feature. SharePoint by default assign an icon GenericFeature for your feature. As the image name suggested, it is a Generic Feature gif and in order to out stand or brand your feature, I would always like to use a custom image for my feature.

One simple reason is that it makes life easier when there is a lot of features within your SharePoint Site and you need to scroll through the entire list in order to activate or deactivate your feature.

sharepoint long list of feature

How to not miss the “EASY” icon if the color is outstanding enough. You know what I’m trying to say. Outstanding!

The following paragraph describes how you can actually add feature icon into your SharePoint Feature.

First of all, create a good icon for your feature, and put it into your SharePoint Solution.

sharepoint add images mapped folderSimply right click the project, hover to Add and click “SharePoint Images Mapped Folder” (if you already mapped, this option will be grey out)

Once you have it mapped, you can just dump your  images into the mapped image folder and it will automatically be included into your package. The relative URL of your images folder is always starting from “/_layouts/15/IMAGES/”

How to know if it is really going into that URL? You can check by looking into the Property of the Images mapped folder – Deployment Location where it stated “{SharePointRoot}\Template\Images”. This actually goes to your SharePoint 15 hives (SP2013) of your deployed server and if you look into IIS Manager for your SharePoint Web application. This folder is actually mapped as a Virtual Directory with path

sharepoint virtual directory image

Once you have your image prepared in the solution, next step is to tell your Feature to use the image. Easy. Go to your feature element files as shown below.

Simply place your cursor right before the end of the “>” tag and you should see the intellisence starting to show up. At this stage, the attribute that you would need to pick is quite self-explanatory.

sharepoint feature auto suggestion

Insert the ImageUrl. Just remember to make sure the url is correctly populated. Sample as shown below.

sharepoint feature image url example

Once you have it specified correctly, deploy it and you should see that your feature is now with your custom icon. Sample below shows not really a good example, but please use a size that you find fits.

sharepoint feature image output

 

Custom Action Group and Action

Another item that worth mentioning when doing SharePoint development is the Custom Action and Group. Since SharePoint 2010 (not sure about SharePoint 2007). It introduces a new feature where you can inject Stuff (could be links, could be Ribbon action or event Site Action) into certain area of your SharePoint pages.

Basically, the idea is that there is list of area (which it is called Location) in SharePoint where you can add/remove Stuff and within each area, there is another sub-area (which is called Group ID) if you need to further scoping down into a more specific area.

You can refer to MSDN https://msdn.microsoft.com/en-us/library/office/bb802730.aspx for Location and GroupID that you can make use of.

Things can be made easier if you need to display some custom site action or site settings link for your user to access certain page (be it your custom application page or SharePoint OOTB pages where it may not be displayed by default e.g. /_layouts/groups.aspx (Groups Page)).

I’m going to share how to go about doing it.

First of all, go to MSDN link above and identify the Location that you want to use. For the simplicity, let use Microsoft.SharePoint.SiteSettings as a example.

So let assume you want to insert a hyperlink into Site Setting page.

Go to your VS Project, Right click and add new item. Select Empty Element as shown

sharepoint empty element

Pick a nice name and hit Add. Note that once it is added, you can find a file called “Elements.xml” being added. Open it and,

Insert the following code.

sharepoint feature site setting example

 

Things that you need to note here is the GroupId and Location used. I added a Custom Action Group with a custom id, but using a valid Location. Subsequently, create another CustomAction and use the custom GroupId and the same valid Location (You still need to specify the same value as the CustomActionGroup or else it won’t work).

The Sequence in the Custom Action Group tells how earlier you want your group to be rendered in the Location. In the example above, 1 is being the first to render.

sharepoint site setting link

 

Hence it will be at the top of all existing group.

Things get a little bit complicated here if, let say other feature have used the same Sequence number as you did. In this case, the later registered ones will be displayed first.

Like example below. Group A being registered later and hence it is displayed first before the Group B.

sharepoint feature sequence does matters

 

Note that you need not to order the Custom Action xml to below Custom Action Group. SharePoint can still recognize them.

 

I have much more to share but that’s it for today! I hope above info and tips can help giving you some ideas and to be able to build a good SharePoint solution!

 

Read part 2 here

1 thought on “SharePoint Custom Solution Branding and Tips – Part 1

Leave a Reply

Your email address will not be published. Required fields are marked *