Article
0 comment

A little story about web design and what designer should know about IE9

So this blog post is the result of a funny story happened today. Since the last couple of weeks I daily check out awwwards and css design awards both sites present all the latest and best web designs in the web. Today the site of the day was deep time by Jamie Brightmore (@jaybee). The site is a really great user interface and shows the possibilities in current web design. Deep Time is an interactive info graphic built for the modern web and iPad. It offers a visual way to explore the various stages of the Earth’s history using a 12 hour clock analogy.

I liked the design and so I published it to Facebook. A couple of minutes later I was messaged by a friend that the web site won’t open in IE9. I was not really amused because awwwards and css design awards nominated web sites normally work in all mayor and latest version of browser. I wrote a comment about the deep time web site at awwwards and twittered Jaime Brightmore that I don’t like when site were nominated that don’t support all latest browser versions.

Jaime replied that he have tested it in IE9 and the animation there was quite slow and svg wasn’t loaded correct. The problem Jaime had is one that many people have and especially when they are not using windows every day. It is also easy to solve.

Jaime as a web designer and developer use a make and made the testing in a VmWare and used IE9, but not the 32-bit Version he installed and tested it in 64 bit. The 64 Bit Version is not intended to be used to browse the web it is for development purpose the same way it behaves like with Microsoft Office. The intention behind the 64 Bit Versions is to allow developer all around the world to upgrade their add-ons and plugins to 64 Bit.

In Windows the 64 Bit Version of Internet Explorer 9 is not intended to be used for normal web surfing. Eric Law from Microsoft has a Q&A for IE9 64 bit vs. 32 bit which is worth reading. The 32 Bit Version and the 64 Bit Version are both installed on Windows but the 64 Bit version is hidden to normal users with reason.

At the end I told Jaime that I wanted to give it a try on IE9 and test his web site. He sent me a link because he blocked IE Browsers completely because of the poor performance and different false look. The result was that all worked the same way as it worked in Google Chrome or Safari. Not one pixel was different in IE compared to other browsers and the performance was really amazing. All was tested with the 32 bit version of the Microsoft Browser and at the end he removed the blocking of IE9 and changed it to IE8 which somehow makes sense.

Before you develop a new web project consider the following things that you should know:

First of all for testing only use the 32 Bit Version of Internet Explorer. By pressing the F12 key the developer tools will be shown and the Browser Version can be configured to IE9, IE8 and IE7. That switch will render the site natively in the older versions and the tests matches one to one with the older versions.

Change Browser Version to IE7 and IE8

Change Browser Version to IE7 and IE8

The new developer tools are really handy and let fire bug to look old, but still cannot compete to the Safari Developer tools what I like most.

I think Microsoft has done a great job on the new version of Internet Explorer. Internet Explorer is much better than its reputation.

Article
15 comments

Use @font-face in Rich Text Editor of SharePoint 2010

In modern web design many sites use web fonts. Nearly since the beginning of the Internet there were always intentions to bring desktop fonts to the web. Nowadays the support for web typography in modern browser is in really big. Netscape introduced the <font> Tag in 1995 as a first attempt to bring different fonts to the web. Internet Explorer 4 was the first browser as far as I know that allows font embedding back in 1997.

In general some really good articles about web typography can be found on http://www.alistapart.com/topics/design/web-fonts/ which is worth reading to deep dive into web typography.[Read more]

Article
14 comments

Exporting XSLT List View Web Part using SharePoint Designer

Imaging the following situation where you want to export an XSLT List View web part and embed it on a different site. So the good thing about this it’s easy to accomplish. I came across a great article posted by Glyn on his blog how to export an xslt viewer web part. He shows in his article some really great insight how the xslt viewer web part can be exported. The only thing he left out is that you can export XSLT List View web parts using SharePoint Designer. This feature is really well hidden in the ribbon.

In SharePoint Designer simply select the XSLT List View web part you want to export. In the Ribbon you will find a specific menu for this web part. Ribbon for the web part comes up you can select inside the “Web Part” Tab. In the far right area of the ribbon you will find two really helpful menus.

Well hidden export feature on the right side

The “To Site Gallery” option will copy the web part to your site collection web part gallery. You will also be asked how you want to name your web part, description and you will be able to change properties.

XSLT List Viewer Export Options

Another option to select is if you want to use it relative to any site where the web part will be embedded or get data only from the current site.

Web specific settings for export

The “To File” option will open the download dialog to store the web part and the configuration to a file.

As you see it’s easy to export a XSLT list view web part and use it the way you like. You can also cross embed lists from one web into another.

Article
12 comments

Change language of UI using custom control in SharePoint 2010

In SharePoint 2010 the users now can switch the user interface between different languages if several language packs are installed. How to enable and how this works can be found on Becky Bertram’s Blog. She did a really good job on describing how you are able to enable and translate the user interface to different languages. It is also the best selection of other blog posts. That’s all about the basic from my side.

After you enabled multiple Language support for one website the user are able to switch on the so called “welcome control”, which can be found in the far right corner of the user interface.

The default control

In the master page you can identify this part with the following code:

 

For the end user the switch between the languages will look like this:

Default MUI Selector in SharePoint 2010

So in my opinion this feature is nicely hidden in the user interface. Certain SharePoint user will find this there but what if I want to switch the language directly using the interface?

The control from above is stored in the HIVE14\Templates\controltemplates\ and is called MUISelectior.ascx. Here is the code:

This control is no rocket science. What it actually does is to render all supported languages and switch the LCID using JavaScript. This also includes everything that you need to know to build your own custom control to embed directly into the master page.

What this control basically does is to render the supported languages and the JavaScript sets simply the cookie on the client to the different language. In the next steps let’s try this out with a simple web part.

Embedding with HTML Form Web Part

This will use the HTML Form Web Part because this is the only web part as far as I know allows writing JavaScript inside. What I will do is basically add two links for German and English and a little customized JavaScript. The code is also quite simple and taken and modified from the default MUI Control.

 

Now work done and if you click the desired language it will change the user interface to the selected language. In my case I changed the title of the website to prove if the language getting switched.

Website in English

Website in English

Website in German

Website in German

Embedding with Custom Web Part or User Control

Now that the basics are set it’s really easy to write a web part for embedding the language switch on a web part page or a user control to embedding this in the master page. The sample before is really static so it doesn’t detect the supported language dynamically. To detect all you need to use is the SupportedUI which is a SPWeb method. At the end the handling in of the language of the UI is really easy and I think the most use case for this if you have a publishing web site or a multi-language Intranet Site. SharePoint is pretty open to do custom development and some things are directly documented in the “code”, but remember: Never change default code but you can use it.

Article
0 comment

Embed SharePoint Tagging and Like Control in MasterPage

Sometimes the “tagging” and “like” control in SharePoint need to be added in different ways to meet the Design requirement. The difference between the big and the small variante of the control is to simply change the ID of the control.

<SharePoint:DelegateControl ControlId=”GlobalSiteLink3″ Scope=”Farm” runat=”server”/>
Small Tagging<SharePoint:DelegateControl ControlId=”GlobalSiteLink3-mini” Scope=”Farm” runat=”server”/>

So that is really easy and practical to use the control with the same functionality matching to your design in SharePoint.

Article
21 comments

Round corner in top navigation

The navigation in SharePoint 2010 has slightly changed and will now be rendered a new way as a list. To use list elements instead of tables is a common practice in web development. The structure of the navigation and therefore the top navigation has some important elements and style sheet classes that allow you to theme the top navigation really easy.

The Basic

The top navigation is a list as mentioned before. Inside a list element is a hyperlink that contains a span element. The source for one element on the top navigation looks like this:

To get a rounded navigation the background will be attached in this example to the hyperlink and the additional-background class. To reset the navigation add the follow style to your stylesheet.

This style removes all paddings, margins and anything else that is not needed.

The Background Image

For the background images is use CSS sprite. If you don’t know what this is you can find a really good article on “A list apart”. Basically I us only a single background image and move the background around using background-position property. So the background image is use looks like this:

The red area I will use as a navigation background. The yellow will be my hover effects and also mark the selected navigation element but I will tell you later more.

The navigation

In the previous step I removed all margins and padding, which is good because now all navigation elements have now all the same values and set to zero. To attach the background I first stretch the navigation elements back to the values I will use later for the navigation.

These styles above will let the top navigation look like this:

The final Step

Now to get the background image on our navigation you just need to add the background-image property to our style sheet. To get the parts of sprite in the right position we need to add the background-position too. The style sheet look then like this:

And now you have navigation with round corners then looks like this:

So this wasn’t rocket science so far and only a view line of style sheet mission can be accomplished. One thing left missing, so what about the hover? Even no problem but we need to move the background images. The style for that looks like this and hover is done.

And so it should look then:

The style above also alters the style of the selected tab and the whole style adaption has only thirty two lines of pure css without any jquery or other code required.

Conclusion:

So in general Microsoft done a great job to get rid of the lame table based design to a completely more web designstandard way. Styling the navigation is one good example how easy some things have become in SharePoint 2010. The classes on the element are better structured and well attached to the elements. Simple hover effects even don’t need any scripting code at all.

Article
6 comments

Hide fields from list forms using PowerShell

Since SharePoint 2010 was introduced there are much more ways to customize forms for list and document libraries. In most cases there is only the simple requirement to hide fields or have better control over them on lists and content types. SharePoint 2010 is the same way limited for hiding fields like it was in MOSS 2007. For advance control it was always necessary to code those fields. So first let’s take a look at how you can controls fields on the list using the normal settings dialog. The base setup in this test is a custom list called “List” with a new column called “NewColumn” which is of type single line of text.

There are no settings available where you can control where the fields should be appearing. The options to hide a field form certain forms are even not available in SharePoint. So the only way to remove the fields from NewFormDialog for example will be to set up a custom list form. No not at this stage.

When the management of content type is enabled to the list using some advance settings will come up to the fields. This can be done in the list settings:

  • “Advanced settings”
  • “Allow management of content types”
  • “Yes”

Behind ever list and library there is a content type assigned. For my custom lists this is the “Item” content type. After selecting this content type there is the “NewColumn” I created available too. On the column the following view options can be selected.

Required optional or hidden is good but won’t help in most cases. So what now? Create a custom list form? No, this is not needed.

SharePoint developer might find SPField Object from the server object model. So if a developer creates a custom content type the following options can be selected in CAML Definitions or as properties using object model.

  • ShowInDisplayForm
  • ShowInEditForm
  • ShowInListSettings
  • ShowInNewForm
  • ShowInVersionHistory
  • ShowInViewForms

I think the names of those properties are self-explaining. Is there coding needed to use those properties? Yes it is but not as a WSP. This field can set using PowerShell the following example demonstrates how to set those properties by a simple script which only opens the list using object model and sets the values, which are basically Boolean values. I use simply 0 and 1 values to set.

0         enables this property

1         disable this property

So for hiding our column in the new form dialog we just simply need to set the value of ShowInNewForm to false or 0.

So how does it look after executing the script:

NewColumn Hidden

NewColumn is hidden on NewForm but still avaliable on EditForm.

Conclusion:

I actually can’t say what the reason is behind those properties are available using object model but not be available using the interface or SharePoint Designer. Those properties will give power user better control over their fields and will not require custom list forms using SharePoint Designer or InfoPath Forms for every simple field hiding. Those properties are not new they were still available in Moss 2007. Might this will be supported by SharePoint 2013 or 2014.