Magnus Hansson Blog

Developing SharePoint Interface

2012-01-03T07:52:00.001+01:00

Branding vs Presentation

Separating the Presentation from the Branding

As I have discussed earlier I am very fond of separating pure design elements with elements that contains structure and logic. Not all artifacts in the world of the interface are made for carrying the design, it also contains elements of interaction or other artifacts that has nothing to do with the brand that you are using in the interface. It can in short terms be elements which purpose are completely different than the fonts, colors, images that makes up the design. In a logical sense these elements needs to be separated from each other.

You can also say that all code that are in need of compiling lives in the Presentation part of the country while objects such as CSS files, images and JavaScript files lives in the southern state of Design. We don't want or are in need of a dll in the branding project. There lives the branding and fonts, colors, sizes, margins,widths,heights etc does not need a dll. It needs CSS files, images, JavaScript files and nothing else.

Think of the branding project as the tools of a make up artist and the Presentation as the base where the makeup will be used. The face. You don't change the face of a person. You enhance it with the right tools.The Branding part is the colors, the shades that puts the WOW in the interface. The Presentation is the layout ( where the nose, mouth, eyes etc is ). The Presentation holds the DEFINITION of the interface while the Branding holds the appearance.

Customer.Interface

In Visual Studio I create one empty SharePoint (farm deployment) project called Customer.Branding and one empty SharePoint (farm deployment) project called Customer.Presentation. We save them in a solution we call Customer.Interface. These projects combined will be the interface for our customer. If we don't want to change the structure of the interface we just use the Branding project and "simply" override the styles in the OOB SharePoint interface but then we have to create a feature that deploys a delegate control with the control id "AdditionalPageHead" to the v4.master. But often we are in need of at least put a custom master page out there where the OOB SharePoint interface does not accommodate the customer needs. Therefore we are in need of the Presentation Project as well.

Customer.Branding

The Branding project has SharePoint mapped folder to Images, Layouts and Styles. Remember, you do not have to deploy this project. Just simply use the Copy to SharePoint Root command and you are good to go. We use the file system to read our CSS files. There are more benefits than disadvantages with this which I will not go into in this article. The JavaScript files used in this contain functions that support the design. Nothing else.

Customer.Presentation

The Presentation project has SharePoint mapped folder to ControlTemplates and Layouts. It has a folder for modules ( could contain Master page, page layouts etc), web controls and web parts. It has features for provisioning the modules ( one feature for each module, depending on the demand ).
The js folder inside of the layouts/Customer folder is where you put your JavaScript that controls the layout and user interaction, not the design.

By doing this you can easily replace the branding of a customer without thrashing the layout. The layout will be intact and all functions will work as expected but the design will be a new one. The only thing you have to change in the presentation is the links for the branding ( I have build a delegate control for this so I don't have to do anything but that's a different story all together ), the css files and the javascript files if you have any. So if a customer want to do a re-brand of their intranet, extranet, external web site or whatever then it will pretty easy to go there. Just see to that your Branding solution has a solid foundation that SharePoint are able to stand on then it will be easier then you propably think.

This of course not something you have to do to make a Branding work in SharePoint but this is what I prefer to do ..

Moving TreeView to its right place in SharePoint 2010

2011-12-28T11:49:00.000+01:00

I always thought that the tree view control in the left hand navigation is totally out of context and sits in its own little island under the ordinary navigation. What about moving it up and sit it right under the current node that has been selected?

There is a really easy way to do this.
Jquery.

I usually don't recommend jquery to move things around when you can build a user control or something more "real" that actually implements that logic. I think jquery is like an illusionist, fools your eyes that you can't see what is really there. Show you an illusion of the reality.
What the end user doesn't know doesn't hurt them right ?
Yes that is true but if you start changing the layout with jquery where will you stop?
It is easy to work with but as jquery put the logic at client side you will have many places that defines the layout. Aspx (server side), master page (server side), user controls (server side), Web Controls (server side) and many more server side objects are the right way to go.
What about CSS you say? Does it not define the layout? It should not. It should define the DESIGN of the layout and the content is defined by HTML. Not CSS or JavaScript and the HTML is defined on the server side NOT in jQuery. This is important because when you are in a project there will be a great need to know where things has it natural place. If you are defining layout on serveral places and in several languages/tecniques you will soon have anarchy in every part of the project. In a controlled development project you will have to have absolute control of what you are doing and where you are doing it. Therefore should jQuery not be over used. If there is a "right" way to do it then leave jQuery and build a real page layout or a user control for this instead.

Back to the tree view. As this is a standard control and I used oob templates. I did not want to change anything except for the master page where I added a link to jquery and a link to my JavaScript function. I also wanted to remove that header above the tree view that fixed it. Right up.
Here is the code:

jQuery(document).ready(function () {
    var $ = jQuery;
    // append the tree view to the selected node
    $('div.s4-treeView').appendTo('.s4-ql li.static.selected');
   });

So instead of this :

You will get this:

DOTLESS and SharePoint 2010

2011-12-12T07:42:00.001+01:00

How do we use .less and SharePoint in an ordinary development scenario ?
To do this and to work properly with dotless compiler we first need to separate the master page from the branding project. Why ? Because we don't want the branding project to have a .dll that has to be deployed every time we deploy the project. We just want the deployment to go as fast as you save the files on your hdd without resetting the IIS and other stuff you need to do when you do an "ordinary" copy-to-gac/bin. One second and you will see the result on you dotless changes. We will create an other project called Presentation that will hold our Front End bits that contains compiled code. In our Branding project we have CSS files, Images and Javascript.
It is not only good practise to separate these because of the dotless compiler but it is logical to separate graphical design from UI logic.

We divide our projects in two:
Branding - images, css, less, js files (for design)
Presentation - master page, page layouts, user controls, web controls, js files (for UI logic)

Now to the dotless.
Make sure that you have installed the CKS dev Tool Kit before proceeding. It is needed for the pre-build order.

First we download the .less compiler:
In extension manager for visual studio download and install Web Workbench from Mindscape. Follow the instructions. You will get an .executable that you can place in a project folder that I prefer to call Tools. So the path will be Tool/dotless.compiler.exe. This excecutable can take one or several less files and combine them, minify them to one .css file that we include in our master page.

Put the compiler in your project
Create a folder called Less. Here you will create your less files by right-click on the folder add >new item >Web>Less style sheet. Here I created and started with framework.less

Now you have created the possibilty to work with less and get the intellisense for it as well and the color coding but how do we use this in a real SharePoint scenario ?

Add the compiler to the build event in Visual Studio.
In this case the compiler will run every time you build the project. The following lines will create and mimify the framwork.less to a file that will live under Styles\customer_branding\combined.min.css

$(ProjectDir)Tools\dotless.compiler.exe -m $(ProjectDir)less\framework.less $(ProjectDir)Styles\customer_branding\combined.min.css

Set the deployment configuration
In the project property window. Click SharePoint. New Active Configuration > Name: Branding configuration > Selected Deployment steps : Copy to SharePoint Root, Run Pre-build in Command. Save and set this As the Active Configuration.

Set the deploy short cut
To make everything go fast when you deploy your Branding you will need to create a short cut to the deployment command .Options > Enviroment > Keyboard, Build.DeploySelection ( I use Ctrl+D, which is the focus the inline find input which I never use )

Now when you are working with the framework.less or any less file you refer to inside of this file you press ctrl+D and the project will compile the less files, combine and minify these to ONE css file. And this css file you have registred in your master page. It will all take less than a second and it will be just like working with your ordinary css files except for all the benefits that you will get with .less. And in SharePoint the benifits are HUGH as you don't have to enter the same css classname one hundred times to get an impact. Just once and you are good to go.

I can highly recommend .less in SharePoint branding development. It shortens the dev time and makes the AM part ALOT easier.

SharePoint 2010 - Maximize that Web Part

2011-09-20T16:38:00.000+02:00

Hello.
Long time since I wrote anything here. I have not been an active blogger and I will probably never will be but since I have been working with SharePoint 2010 all year I have some minor and major ideas I would like to share with the world.

First out : Maximize that Web Part

Often in SharePoint you have a lot of information in small small web parts and it's almost impossible to see anything that lives inside of that web part. In worst cases you get small scrollbars all over the place and texts that goes outside the margins of the holder. I think that it has been an issue since the birth of this Platform. So I think to myself, why not implement something to get around this issue, why not create a function that actually take a web part and maximize it to the height and width of the main content area whenever the user wants to just like an ordinary application window?

The Plan

First I thought of building an adapter for the webpart zones but the API for recreating the administration/personalization menues are sealed or internal so I went to another approach with JQuery. Personally I am not so keen of using jQuery to alter and add functions in SharePoint but this was the fastest and easies way so I did not went for my normal approach and by just using a javascript file for this there will be no harm to the rest of SharePoint funtionalities.

The Work

First I added a link to the latest jQuery library in the header of a master page. Then I created my own javascript file and added it as well in the header. I deployed a custom made Master Page and my files to 14HIVE.

<link  type="text/css" href="/_layouts/styles/customer-project/maximizeWP.css" rel="stylesheet" />
<script type="text/javascript" src="/_layouts/customer-project/js/jquery.min.js"></script>
<script type="text/javascript" src="/_layouts/customer-project/js/maximizeWP.js"></script>

A note: JQuery works very well with SharePoint 2010 except for the image library pages where the $ variable collides with a function/variable from one of SharePoint Javascript files. The work-around for this is inside of your JQuery functions declare your var $ = jQuery;

var $ = jQuery;

Next I added the button inside of the header of each web part on the page, the header of each web part has an empty table-cell on the left and one on the right. I use the cell on the right for this new
maximize button.

        // add the button in the header
        $("tr.ms-WPHeader td + td.ms-wpTdSpace")
            .append("<div class='button-maximize' title='Toogle Web Part size'><span>Maximize</span></div>");

Then I added the behavior of the button to maximize the web part.

 // add the click behavior
        $("tr.ms-WPHeader .button-maximize").click(function (event) {
            $(this).expandWP();

I build a small jQuery plug-in for adding the behavior I called expandWP.
The whole code for this js file is down below:

/*
    maximizeWP.js
    Snippet for maximize Web Part
*/

jQuery(document).ready(function () {

    var $ = jQuery;

    if ($("tr.ms-WPHeader").length) {

        // add the button in the header
        $("tr.ms-WPHeader td + td.ms-wpTdSpace")
            .append("<div class='button-maximize' title='Toogle Web Part size'><span>Maximize</span></div>");

        // add the click behavior
        $("tr.ms-WPHeader .button-maximize").click(function (event) {
            $(this).expandWP();
            event.stopPropagation();
        });

    }

});

/*
    Plugin Expand wp
*/

(function ($) {
    $.fn.expandWP = function (options) {

          var settings = {
              'restoreText' : 'Restore',
              'maximizeText' : 'Maximize'
           };

         if ( options ) { 
                 $.extend( settings, options ); 
            }

        
        var currentButton = $(this);

        // fetch the current expanded web part
        var currentExpandedWP = currentButton.parents(".s4-wpTopTable");
        
        // the text for the button states    
        var restoreText = settings['restoreText'];
        var maximizeText = settings['maximizeText'];

        // if we have an expanded web part then restore it's state
        if(currentButton.hasClass("button-restore"))
        {
            $("#maximize .ms-WPBody,#maximize .ms-wpContentDivSpace").css("height","auto");
            $("#maximize .ms-WPBody,#maximize .ms-wpContentDivSpace").css("width", "auto");
            currentButton.removeClass("button-restore");
            currentButton.addClass("button-maximize");
            currentButton.children("span").text(maximizeText);
            currentExpandedWP.unwrap();
            currentExpandedWP = null;
            $("#curtain").hide();
            return; // leave the function
        }
        
        // change the button state
        currentButton.removeClass("button-maximize");
        currentButton.addClass("button-restore");
        currentButton.children("span").text(restoreText);
        
        currentExpandedWP.css("display","block");

        // wrap our maximize object around the web part
        currentExpandedWP.wrap("<div id='maximize' class='clearfix'></div>");

        var height = $(".ms-bodyareacell").height();
        var width = $(".ms-bodyareacell").width();

        // set the size of our maximize object                
        $('#maximize').css("left","0px")
                      .css("top","0px")
                      .css("display","block")
                      .css("width",width + "px");

        $("#maximize .ms-WPBody, #maximize .ms-wpContentDivSpace").css("height",height + "px")
                                                                  .css("width",(width-40) + "px");
          
        // add the curtain
        if(!$("#curtain").length)
        {
            $(".ms-bodyareacell").prepend("<div id='curtain'></div>");
        }

        // set the curtain size
        $("#curtain").css("width", width + "px")
                     .css("height",height + "px")
                     .css("display","block");

        

    };
})(jQuery);

Then I added the css required for the button, the maximize div and the curtain

.button-maximize, .button-restore {cursor:pointer;width:16px;height:16px;clear:right;position:relative;z-index:1;float:left;display:block;margin-top:13px;}

.button-maximize { background:transparent url(/_layouts/images/customer-project/webparts/maximize.png) no-repeat top left !important; }
.button-maximize:hover {background-image:url(/_layouts/images/customer-project/webparts/maximize_over.png) !important}

.button-restore { z-index:199;background:transparent url(/_layouts/images/customer-project/webparts/restore.png) no-repeat top left !important; }

.button-maximize span, .button-restore span { display:none;}


#maximize { position:absolute;min-width:600px;min-height:200px;margin:0 0;left:0px;top:0px;z-index:13;display:none; }
#curtain { background:#fff;position:absolute;z-index:12; }

The Summary

This is NOT a function that are thoroughly tested, it still lives on an experimentally state and should not to be considered a complete solution. It is just an idea that I have played around with one afternoon and can easily be adjusted and improved. I just want to put it out there more like an idea to what you can do if you just stop up and think for a second and try to use your creative side when it comes to SharePoint. The idea around web parts and what they can do should not stop by getting used to what SharePoint's framework can do.

What do they use to say? Think outside the box not just SharePoint out of the box.

The hard part is adjusting things in SharePoint without breaking something, but the SharePoint UI needs a lots of adjusting to be a solution that most users can feel comfortable with using. SharePoint is really not optimized for the end users. Then what should we do? Tell all SharePoint users to be satisfied what they got or use our little cells in our heads not only to configure SharePoint to the customer needs but ALSO to use them to actually make SharePoint CONSISTENT and USEFUL.

Lets put your own layers of fluffy cream over this robust cake that SharePoint really is. I really think it needs a lot of sugar.

IE 7 and that zooming feature

2008-08-14T08:10:00.000+02:00

Vacation, vacation, holiday, sunshine, lovely times and then rain, rain, rain. That's sweden in the summer. Especially now when we all are in a climate change and the nature's gone totally bonkers. I think it's like that in the winter time as well now. Yesterday winter was filled with snow and ice, now there is only rain. Wonder why people gets depressed during the winter. Darkness AND rain. Back in the days we had snow to lighten things up.

Anyhow .... I came back from the summer rain and stepped inside the bunker to work with this project I've been involved with for some time now. I noticed in the interface I was building when using the zooming feature the background images in my web parts looked very strange indeed. It couldn't calculate the rendering accurate.

I tried using .gif instead of .png as I knew that IE had troubles with .png before but that didn't help. I tried using several css-fixes with height and that did not work. But when I used position:relative on the element holding the web part something happened. As I was zooming the background-image looked as it should be but the web part was now outside the surrounding area. I moved the position:relative to the first element after the body and then the zooming worked, everything worked fine.

NOT really.

When editing the web parts, dragging the webparts between the different web part zones, all I got was a lot of javascript errors. It seemed that the javascript function that handles the drag & drop feature could not handle the position:relative on the top element. A fix on that was to put an editingpanel on the top in the masterpage that rendered a style element. Inside that element put on the position:static.

<PublishingWebControls:editmodepanel runat="server" id="editModePanel">
<style type="text/css">
#page { position:static !important; }
</style>
</PublishingWebControls:editmodepanel>

<div id="page">

The #page element now has css attribute of position:relative in the css file and when editing web parts the #page will have a temporarily attribute of postition:static. Ok, when using the zoom feature in edit mode(IE7), stuff will maybe look a bit weird but that's a price I am willing to pay to get a nice zooming look for the end user.

Design Accessible Web Sites , A book worth spending some time with

2008-05-12T10:10:00.000+02:00

I recently read a book that I gladly can recommend to all people that are developing GUI on the web. It is called Design Accessible Web Sites by Jeremy J. Sydik and in it you will learn about accessible HTML, audio and multimedia content. Good understandable examples and more than just accessiblity for the disabled people. To follow certain guide lines, all people will benifit from it not just the ones that really needs it.
Wondering when the Sharepoint crew will take some of this under consideration?

Gaps under images in HTML

2008-03-25T19:29:00.000+01:00

Somtimes when you put an image in your html code you get a small gap under it. No matter how much you are trying to mixture with it's padding or margin you can't get that gap to disappear.

The gap is probably a gap in your code and browsers ( specially IE ) can be very sensitive.

Example:

This is how you code for the gap to appear

<div >

</div>

This code is the correct one. No spaces

There you go

Do it and erase the gap..

//Magnus

Simple Print Preview Button in MOSS

2008-03-21T07:39:00.000+01:00

Friday morning and a snow storm is raging outside my window. I thought I was going to jump up from my bed and start this first free day on the easter holiday by going outside running, but instead I find myself on the computer once again. Well, there is no better way to start the morning with some blogging and a cup of coffee, ey, as I found a new brand that taste so good I can't complain really. It's like a hockey game in my mouth.

Print Preview Button
When in the world of MOSS, WSS you want to add a print preview button without the effort of buildning new user controls and adding server code. Just a simple client code snippet in your masterpage and it's done.

First you need a function that opens a print preview window. Add it in a .js file or in the header of your masterpage.

Then you need a print preview button(link, image) that runs your javascript function when clicking on it.

Finally you need to add a little code snippet in the head area of your master page.

After you have clicked on this button a new window will open, this last snippet will add your print.css and the page will look as in "print mode".

This is just a simple little client code that maybe will make the life a little bit easier for some of you.
//Mag

ASP.NET, MOSS Web Parts with rounded corners

2008-03-20T09:29:00.001+01:00

Some of you that has worked with ASP.NET, specially with MOSS 2007 or WSS has been troubled with the fact that you will have to build your own Web Parts renderer to be able to get Web Parts with rounded corners, both on top and body.

Just by adding the correct CSS attributes and work with a set of images then you are able to get the result you are after. The only thing is that images will be larger and not repeatable that is preferable, but with a little skill in image optimization that shouldn't be an issue.

The Project
I have been working with a large intranet project ( MOSS 2007 ) that required such an implementation because the customer was not willing to pay for the amount of time spending on recreating the webpart renderer to get Web Parts with Rounded Corners, then I decided to dig a bit deeper into this issue and told myself that nothing is impossible and I trew myself over this challenge.

The solution
This was a MOSS implementation, I used a css file to override the standard core.css and a set of images. This perticular codesnippet is optimized for IE7 .

The code snippet images are links. So click on them and they will expand.

The Header
1.First set the left background image on the header, you will have to use !important to override the previous css settings in the master css file. You will need an image for the left part of the header and it has to be wide. Mine was about 800px.

2. Set the right background image in the same area of the header by using the h3 element. The right backround image should be a small image, just covering the right corner. It will render over the left background image.

3. if the user has edit rights on the web part a second will appear in the table rendering the web part. Then we'll have to set the background on that td and close the gap between.

4. Set the div:s that contains the menu image for editing items and positioning to the left closing the gap between the two td:s .. wee need a background image like the one in the second to hide the gap beetween them.

The Body
When adding your web part and you want to have the border-like body you will have to select the border appearance in the crome box. Then the classname ms-WPBorder will render in the body .

1. Adding the right image for the , right aligned. This one should be narrow but it should have a large height covering high web parts.

2. Adding the left background image in the , left aligned. This image should be both wide and high.

There you will be able to smooth things up on your MOSS installation without having taking the effort rebuilding the web part renderer and disabling the WebPart Javascript DOOM that enables a lot of stuff inside the MOSS platform. This is one way to do it. I have got several more.