Me & My SharePoint [FrontEnd]

© Christian Stahl – All about SharePoint branding & customizations

SharePoint list field and Geonames with autocomplete — April 21, 2010

SharePoint list field and Geonames with autocomplete

If you working with a SharePoint Designer customized NewForm page (NewForm.aspx) and you want to use autocomplete for one of the fields, in this example (city) in your form with a city, you can use a webservice from Geonames, getting the data with JSONP and use the new autocomplete widget included in jQuery that generates the Ajax call needed for autocomplete. You can also use autocomplete with a webservice to populate a form field from another data source, for example a SharePoint list.

Ok, so how to do this? First of all, grab the latest jQuery UI (1.8) that includes the autocomplete widget. Download it here. http://jqueryui.com/
Open SharePoint Designer and the NewForm. In the design view, select the form field City and look for ID below the misc section in the tag properties task pane. You should now find the ID: ff2_1, in this example.

Geocode

Paste the following code below the ContentPlaceHolderId PlaceHolderMain:

 



<link type="text/css" href="ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="/Style Library/Scripts/jquery-ui-1.8rc1/jquery-1.4.1.js"></script>
<script type="text/javascript" src="/Style Library/Scripts/jquery-ui-1.8rc1/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="/Style Library/Scripts/jquery-ui-1.8rc1/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="/Style Library/Scripts/jquery-ui-1.8rc1/ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="/Style Library/Scripts/jquery-ui-1.8rc1/ui/jquery.ui.autocomplete.js"></script>
<link type="text/css" href="demos.css" rel="stylesheet" />

<style>
.ui-autocomplete-loading { background: url(indicator.gif) no-repeat right; }
#city { width: 27em; }
#ff2 { width: 24em; }
</style>

<script type="text/javascript">
$(function() {
function log(message) {
$("<div/>").text(message).prependTo("#log");
$("#log").attr("scrollTop", 0);
}

//Check the task pane Tag Properties to find the ID, in this case ff2_1  
$("#[id*='ff2_1']").autocomplete({
source: function(request, response) {
$.ajax({
url: "<a href="http://ws.geonames.org/searchJSON">http://ws.geonames.org/searchJSON</a>",
dataType: "jsonp",
data: {
//P = City
featureClass: "P",
style: "full",
// If you need to filter on one or more specific country: use country: 'US', or two contries country:'SE,US'
//country: 'US',
maxRows: 10,

name_startsWith: request.term
},
success: function(data) {
response($.map(data.geonames, function(item) {
return {

//Label
//city, area, country
//label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,

label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,

//city, area (useful if only one country)
//label: item.name + (item.adminName1 ? ", " + item.adminName1 : ""),       

//VALUE
//To be displayed in the formfield, this will only get country
//value: item.countryName

//If you want populate: Stockholm, Sweden
//value: item.cityName

//Default (only city)    
value: item.name

}
}))
}
})
},
minLength: 1,
select: function(event, ui) {
log(ui.item ? ("Selected: " + ui.item.label) : "Nothing selected, input was " + this.value);
},
open: function() {
$(this).removeClass("ui-corner-all").addClass("ui-corner-top");
},
close: function() {
$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
}
});
});
</script>


Geonames can be customized the in many ways, read my inline comments for some examples of things you can modify. Read more about all the parameter settings and more here: Geonames reference

Breadcrumb in SharePoint & Design considerations — March 26, 2010

Breadcrumb in SharePoint & Design considerations

The breadcrumb in SharePoint is out of the box is quite invisible and takes not always the place it could have. As you know, the breadcrumb is meant to be a secondary global navigation, and if you have a deep and multilevel site structure and a large amount of sites and page the breadcrumb could really be helpful for the users.

So If you like to make it a bit more visible, let’s give it some graphics with a repeating background, separators and an end / start image.

BreadCrumb

To the point, how to do this in SharePoint?
Well I had first to say that the breadcrumb control in SharePoint could be a bit tricky to deal with, because it´s not only one breadcrumb around. The Master page has a control, you have to delegate the control in the page layouts and all the OOTB site definitions have their ways to handle the control. To make this work the same way on the site collection at every pages, from a page in a site with the publishing feature enabled, to a blog site and down to an view page for a library; I leave this out for you to investigate. Besides of all this, the site map have several properties with different kinds of behaviors and several site map providers for you to consider.

To get the repeating background it´s just to set a class to the asp:SiteMapPath, and to get the arrows you can use the PathSeparatorTemplate. To this I have an start and an end image.

Look for this in the master:
   asp:ContentPlaceHolder
and for this in the page layout and in the site defintions:
   asp:Content ContentPlaceHolderId=”PlaceHolderTitleBreadcrumb”   

    

Examle in a custom site defintion built on the team site

Example in a listview


Example in a Page

The SiteMapPath control


<asp:ContentPlaceHolder id="PlaceHolderTitleBreadcrumb" runat="server">	
<div class="BreadCrumbStart"></div>
<div class="BreadCrumbWrapper">	
<asp:SiteMapPath ID="MySiteMap" runat="server" class="MySiteMap" RenderCurrentNodeAsLink="True">
  <RootNodeStyle CssClass="RootBCnode" />
  <CurrentNodeStyle CssClass="CurrentBCnode" />
  <PathSeparatorTemplate>
   <img src="/Style%20Library/Images/CustomImages/Spitter18.png" border="0" class="SplitterImage"/>
  </PathSeparatorTemplate>
</asp:SiteMapPath>
</div>	 
<div class="BreadCrumbEnd"></div>
</asp:ContentPlaceHolder>

 

CSS

.BreadCrumbWrapper {
 background-color:#fff;
 float:left;
 margin:0px;
 padding:0px;
}
.BreadCrumbStart {
 background-color:#fff;
 float:left;
 background-image:url('/Style%20Library/Images/CustomImages/BreadCrumbStart.png');
 background-repeat: no-repeat;
 width:28px;
 height:26px;
 margin-top:0px;
 padding:0px;
}
.BreadCrumbEnd {
 background-color:#fff;
 float:left;
 background-image:url('/Style%20Library/Images/CustomImages/BreadCrumbEnd.png');
 background-repeat: no-repeat;
 width:20px;
 height:26px;
 margin-top:0px;
 padding:0px;
}
.RootBCnode a:link, a:visited{
 color:#555
}
.CurrentBCnode a:link, a:visited {
 text-decoration:none;
 color:#333
}
.MySiteMap {
 font-family:Arial, Helvetica, sans-serif;
 background-image:url('/Style%20Library/Images/CustomImages/BreadCrumbBack.png');
 background-repeat: repeat-x;
 height:26px;
}
.MySiteMap SPAN {
 font-family:Verdana, "BitStream vera Sans", Helvetica, Sans-serif;
 font-size:10px;
 color:#382e1f;
 vertical-align:middle;
 text-align:center;
}
.SplitterImage {
 margin-top:3px
}

Read more about breadcrumbs in this article in Smashing Magazine. http://www.smashingmagazine.com/2009/03/17/breadcrumbs-in-web-design-examples-and-best-practices-2/

Winter in SharePoint — January 6, 2010

Winter in SharePoint

What about some falling snow in SharePoint, with Java script based Snow effect and a piece of plain old DHTML?
This example, Let It Snow, is based on one of the thousands of plugins for Word Press Org, many of them is also great to use in SharePoint.

Now, go ahead and make the snow falls in SharePoint!

  1. First, turn on the theme called Obsidian for the right darker feeling. Go to Site Actions > Site Settings > Modify All Site Settings and click at Site Theme. Choose Obsidian and hit Apply.
  2. Download Snow.JS and the Snow Images. Extract the Image folder and upload the JS file and the Image folder to your SharePoint with SharePoint Designer. Create a folder called Scripts and one below called Plugins and there create a folder with name Snow. Just put what you have downloaded into this folder like the image below.

  3. If you want the snow at all pages in SharePoint, take a copy of Default.Master, rename it to for example DefaultSnow.Master. Open this page and make a reference to the JS file,  just put it above the </head> section ends .
    <script src="/Style Library/Scripts/Plugins/Snow/snow.js?ver=2" type="text/javascript"></script>
  4. Save the page and hit Yes when the dialogue Save your changes comes up.
  5. Change Master Page for your site collection, go to Site Actions > Site Settings > Modify All Site Settings and click at Master Page. Choose the new master page in both drop downs, and mark Reset for them both. Click OK.

 

If you only want this snow at the start page or some other page as an alternative to make a reference in the master page, you can just use a Content editor web part with this following code:
<script src="/Style Library/Scripts/Plugins/Snow/snow.js?ver=2"></script>
Name this web part , set the chrome Type none and mark it as hidden.

SharePoint 2007 and Cache settings — January 4, 2010

SharePoint 2007 and Cache settings

 

Caching is just one part of many factors that help us speed up the page loading time in our SharePoint, and the Cache settings itself consists of several different types of cache, some are easy and some are more complex with dependencies to other factors.

We have three types of Cache to deal with:

  • Blob Cache
  • Object Cache
  • Output Cache and the Page Layout Cache

 

Blob Cache

Disk-based caching for Binary Large Objects
Blob cache manages the cache for pictures, video files, images, audio files, CSS files or script files. It is disabled by default in a clean SharePoint installation. When the Blob cache is activated, it gives faster response times for files stored in the front-end Web server, which means that traffic to the database is reduced significantly. The setting made in the blob cache is for all site collections in the web application. So there is only one blob cache per web application.

Before you decide to activate the blob cache, the following should be considered:
Is it an Intranet where files constantly are updated, you should not cache these types of files that are updated frequently. Is there a public Web site where anonymous users only have read-only access, or when dealing with relatively static files, you should use the Blob cache.

Follow these steps to activate the blob cache:

  • Locate currently webconfig file
  • Before you do anything, take a copy of webconfig file first in case something goes wrong when you edit the file. Then, open the file with for example notepad and locate the following line:
    <BlobCache Location=”C:\blobCache” path=”\.(gif|jpg|png|css|js)$” maxSize=”10″ enabled=”false”/>
  • Change enabled to true
    <BlobCache Location=”C:\blobCache” path=”\.(gif|jpg|png|css|js)$” maxSize=”10″ enabled=”true”/>
  • You can then choose which file types you want included in blob cache, i.e. you can add PDF E t c.
  • Perform an IIS reset

Flush
Sometimes the cache mechanisms can go in a locked mode. The key is then to flush (empty) the cache on the current site collection. Release this via disk based cache reset, just go to:
Site Collection Administration, Site collection object cache, disk based cache reset.
If you have multiple site collections, you can use STSADM to flush the cache blob per web application.
STSADM-o SetProperty-blobcacheflushcount property name-property value 11-url http://nameofthewebbapp:portnumber
As an alternative to STSADM, there is a solution for this on Codeplex called MOSS 2007 Farm-Wide BLOB Cache Flushing Solution, that allows you to flush all the Web applications in a farm. http://blobcachefarmflush.codeplex.com


Screenshot of the MOSS 2007 Farm-Wide BLOB Cache Flushing Solution

Public website with Anonymous access
Style Library (and the Master Page Gallery) in MOSS does not work for anonymous visitors per default. You must therefore set Style Library to anonymous access, so the cache can work for the content of this directory. Is the cache already at on from the beginning when the Style Library supplemented with anonymous access, be sure to clear the cache after this addition.

Take a note

  • If you store the SharePoint logs (ULS) on the same disk that you store the blob cache you can get less performance.
  • Default cache size is 10 GB (MaxSize). Make sure you have enough of disc, you should have at least 20% more disk than the cache size. You can also specify another path to another drive (location).
  • Make sure not to have too small size of the cache, it may degrade performance.
  • MaxAge is another attribute you should consider using. Maxage put a time interval in seconds that the client’s browser cache is what is in the blob cache.
  • If you want to inspect the effect of the blob cache, you can use the tool Fiddler http://www.fiddler2.com

Blob caching and throttling Bit rate in SharePoint 2010
BRT is an extension to IIS 7 that comes with IIS Media Services-operation, which allows you to control and monitoring bandwidth for streaming video in SharePoint 2010. The blob cache has to be activated with the right file extension for the type of video file to stream, in order for BTR to work.

Cache Profiles
There are some prebuilt profiles that are configured with optimized settings. For example, a public Web site with anonymous user or an intranet with authenticated users. You can, if necessary, create their own profiles with customized settings based on your scenario.


Screenshot of the settings for the Intranet profile

 

Object Cache

Object Cache should be activated in all SharePoint environments. This type of cache stores properties for sites and pages, and reduces the traffic between the Web server and database, it also cache cross-list Queries and navigation elements. Basically the higher the value you set, the better performance, but to the cost of RAM. For cross-list queries, a multiplied value can be set, the higher value (1-10)  the more memory are will be in use. A higher value is recommended if you have much different unique permission settings, or for example one or more instances of CQWP. Not at least in a larger environment with a deep site structure, where SharePoint needs to look at maybe many thousand rows in the database. Be sure to hold down the number of instances of CQWP, and try to use the filter.

Follow these steps to activate the object cache:

  1. Site Settings> Site collection object cache> Object Cache Size = Enter the size in MB, can be higher if enough memory is available.
  2. Site Settings> Site collection object cache> Cross List Query Cache Changes = Use the cached result of a cross list query for this many seconds. 

 

Output Cache

Output Caches stores HTML structure, controls, web parts or whole pages.
Particularly well suited for public Web sites. The output cache needs a lot of RAM memory. Activate this cache for authenticate users; the cache is stored by individual users.

Follow these steps to activate the Output cache:

  1. Site Settings> Site Collection output cache
  2. Select the Enable output cache
  3. Select profile. Applies to a public Web site puts you Anonymous for Public Intranet
  4. Select last Enable debug cache information for later if you may need to examine the cache.

Page Layout Cache

Should be activated, because this type of page is rarely updated and is of static type.
Follow these steps to activate the Page Layout Cache:

  1. Go to Site Settings
  2. Click Master pages and page layouts in Galleries
  3. Select Edit properties for the page layouts you want to cache
  4. Enter the Public Internet for Anonymous Cache Profile
  5. Click OK. Make sure the page is checked in to a Major Version and approved, if this are requiring in this directory.

Performances in general
There are a lot of other configurations existing built-in mechanisms in SharePoint, which as cache settings affect performance.

Some examples:

  • How SQL Server is optimized. Read the Microsoft’s best practices to plan and monitor for optimal performance of SQL from a SharePoint perspective:
     http://technet.microsoft.com/en-us/library/cc263261.aspx
  • How the environment overall is planned and dimensioned.
  • If SharePoint server contains the latest SP and patches.
  • Server capacity, broad band and client.
  • Individual permissions for each web site or list
  • Crawl settings with too short time interval.
  • Reading data from a list can require resources if the filter is not used, or if the indexing of columns is activated for lists with many items.
  • Heavy graphics on the page, or if images are not optimized in the best way, or if the page contains Flash animation e t c.
  • Optimization of HTML structure.
  • Optimized CSS files.
  • Closed web parts.
  • Activated features that are not used.
  • Too many active workflows.
  • Custom Web Parts that is not optimized.
  • NTLM authentication instead of Kerberos.