Monthly Archives: January 2012

2007, 2010, BJ Wildbore, Content Query Web Part, CSS, End User, Javascript and jQuery, Libraries and Lists, MOSS, WSS, XSLT

Render a slideshow gallery from a SharePoint list using XSLT and ContentQueries

3 Comments

 

Editor’s note: Contributor BJ Wildbore is a Software Developer at Massey University. Follow him @bjwildbore

Modifying the itemStyle.xsl file in SharePoint allows us to transform boring content query lists into anything we can imagine. Here is an example of whats possible using custom itemStyles, Jquery and css.

At tutorialzine.com there is a great example of an apple styled slideshow banner. For information on how the banner works visit tutorialzine. In this post I will show you how to turn a simple SharePoint list into this slideshow.

2012-01-31-RederSlideshowGallery-01.png


Step 1: Get the files

Download the necessary files for the tutorial here

Step 2: Upload the slideshow gallery template images to your server.

In the zip file you downloaded there is a folder called "template". Inside this are a number of images that the banner css needs to use. Upload these files to your server somewhere that you can then access them via a url in your web browser.

Step 3: Add the CSS

There is another file called styles.css. Open this up and replace the *** path to *** place holders with the url paths to the images you just uploaded. Then copy and paste this css into either your master template css file or another css file that the site or page loads

Step 4: Create the list

Create a new list and call it "banner".

Add a single line of text column called "description" and a hyperlink column called "link".

Step 5: Populate the list

Go through and create 4 list items. Give them a short title,small description. Also on each item you will need to add their thumb and slide images as attachments. These images are in the zip file you downloaded in the sample slides folder. Attach the images in the "slide1 folder" to the first item and so on…

Step 6: Pass through the current row to the itemStyle.xsl

NOTE: It is best practice to never alter the standard itemStyle.xsl or ContentQueryMain.xsl files themselves. Make a copy of them and have your webpart reference the copies instead.

To output the banner gallery properly we need to make sure the ContentQueryMain.xsl passes through the current position when calling the itemStyle.xsl templates.This blog post shows you quickly and simply how to achieve this.

Step 7: Adding the banner item style

Make sure you have open your custom itemStyle.xsl. Open the banner_part_xsl.txt file and copy all the text from here and paste it into your custom itemStyle.xsl file just before the last closing </xsl:stylesheet> tag.

Step 8: Add the List to the page via a Content query web part.

Add a content query webpart to a page and click to configure it via the tool pane.
Set the source to "Show items from the following list" then browse to find the banner list you created.
Then select your banner style from the item style dropdown
In the fields to display Link box, type "link"
In the fields to display title box, type "title"
In the fields to display description box, type "description"
Click ok and then save the page.

Step 9: Admire your handywork, have a coffee, then read below for an explanation of the itemStyle xsl you added

I will quickly go over the important parts of the xsl banner item.

First we ensure the current position variable is passed in. This enables us to output the necessary javascript and outer shell of the banner slideshow once only. 

<xsl:template name="banner" match="Row[@Style='banner']" mode="itemstyle">
	<xsl:param name="CurPos" />

In this part we set the width and height of the banner web part, the delay in seconds and wether it will audo scroll or not.

<xsl:variable name="slideWidth" select="470" />
<xsl:variable name="slideHeight" select="204" />
<xsl:variable name="advanceDelay" select="7" />
<xsl:variable name="autoAdvance" select="1" />

The block below gives us a useable web part id to add to the javascript that is output. We add this to certain parts of the javascript incase we want to have more than one of these on a page.

<xsl:variable name="wpid" >
	<xsl:call-template name="OuterTemplate.Replace">
		<xsl:with-param name="Value" select="$WebPartId"/>
		<xsl:with-param name="Search"  select="'-'"/>
		<xsl:with-param name="Replace" select="'_'"/>
	</xsl:call-template>	   
</xsl:variable>

Below we get the url to the attachments folder for the list.

<xsl:variable name="ListName">
	<xsl:value-of select="substring-before(substring-after(substring-after(@FileRef,$RootSiteRef),'/Lists/'),'/')"/>
</xsl:variable>
<xsl:variable name="BaseLink">
	<xsl:value-of select="concat(substring-before($SiteUrl,$RootSiteRef),@FileRef)"/>
</xsl:variable>
<xsl:variable name="BaseAttachmentURL">
	<xsl:value-of select="concat(substring-before(@FileRef,$ListName),$ListName,'/Attachments/')" />
</xsl:variable>

The part after the $curPos = 1 statement goes through and creates a variable called "JScript". This contains a the base javascript with a number of place holder in it for the webpart id, width, height, delay and autoadvance variables.

<xsl:if test="$CurPos='1' ">
	<xsl:variable name="JScript">
		<![CDATA[

Once it has the javascript template in the JScript variable, the place holders are replaced with the variable values then it is output to the page.

<xsl:variable name="ModJScript1">
	<xsl:call-template name="OuterTemplate.Replace">
		<xsl:with-param name="Value" select="$JScript"/>
		<xsl:with-param name="Search"  select="'***WebPartID***'"/>
		<xsl:with-param name="Replace" select="$wpid"/>
	</xsl:call-template>
</xsl:variable>
<xsl:variable name="ModJScript2">
	<xsl:call-template name="OuterTemplate.Replace">
		<xsl:with-param name="Value" select="$ModJScript1"/>
		<xsl:with-param name="Search"  select="'***advanceDelay***'"/>
		<xsl:with-param name="Replace" select="$advanceDelay"/>
	</xsl:call-template>
</xsl:variable>
<xsl:variable name="ModJScript3">
	<xsl:call-template name="OuterTemplate.Replace">
		<xsl:with-param name="Value" select="$ModJScript2"/>
		<xsl:with-param name="Search"  select="'***autoAdvance***'"/>
		<xsl:with-param name="Replace" select="$autoAdvance"/>
	</xsl:call-template>
</xsl:variable>		
<script type='text/javascript'>
	<xsl:value-of select="$ModJScript3" disable-output-escaping="yes"/>
</script>

Then we output also the banner gallery shell. The javascript and shell are only output once.

<div id='gallery_{$wpid}' class='gallery' style='width:{$slideWidth}px;' >
	<div id='slides_{$wpid}'  style='width:{$slideWidth}px; height:{$slideHeight}px'><hr /></div>
	<div id='menu_{$wpid}' class='gallery-menu'><ul><li class='fbar'><br /></li></ul></div>
</div>

Then for each item we output the slide and thumbnail. The jquery script upon load goes over these and relocated them inside the gallery shell and BOOM… it should all work nicely.

<div class='slideOuter_{$wpid}'>
	<div class='slide' style='width:{$slideWidth}px; height:{$slideHeight}px'>
		<a href='{$SafeLinkUrl}' target='_blank'><img src="{$BaseAttachmentURL}/{@ID}/slide.png" /><span class='bannerMessage'><b><xsl:value-of select="@Title" /></b>
		<br />
		<i><xsl:value-of select="$caption" /></i></span></a>
	</div>
</div>	
<div class='menuItem_{$wpid}'><a href=''><img src="{$BaseAttachmentURL}/{@ID}/thumb.png" /></a></div >

2012-01-31-RederSlideshowGallery-02.jpg

This will give you a base to start from and can be modified and tidied up for your requirements

2007, 2010, End User, Fred Yano, General Knowledge, MOSS, Social Computing, WSS

Social computing in SharePoint

 

Editor’s note: Contributor Fred Yano is a SharePoint Systems Analyst at Creation Technologies. Follow him @fredyano

I recently had a conversation with a colleague on the appropriate platform to publish tribal knowledge that he would like to share. With this in mind, a couple of questions arise on the social computing capabilities of SharePoint so that we can make better use of the technologies:

  • What is the difference between blogs, wiki, and discussion forums in SharePoint?
  • When is the appropriate usage of each technology?

Here is a comparative chart the various criteria for choosing one format from another.

2012-01-27-SocialComputing-05.png

In summary, these are key criteria when implementing one of the above-mentioned options:

  • Who is your target audience?
    Will your readers include the whole organization/enterprise, or a specific interest group?
  • What type of content do you intend to publish? (authoritative, opinion-based, or speculative content)
  • What uses is the content geared for? (permanent, ad-hoc, or mixed)
  • Who will be the primary moderator/s of the content?

As indicated, there is no one-size fits all rule when implementing social computing features within an organization. You can use a hybrid approach to achieve optimal collaboration and participation from users.

In an enterprise environment, the general rule to keep in mind is not having anonymous users to minimize posting inappropriate content, or accidental sharing of confidential information.

2010, Document Management, End User, MOSS, NSUT HaiBanhXeo, Security, Site Manager/Power User, WSS

Series solutions on document management for officer - Part 3

 

Editor’s note: Contributor Hai Nguyen Tuan is a Developing Lead at Bamboo Solutions Corporation. Follow him @tuantomy.

In my previous post, I recommended 2 solutions for officer employees. SharePoint 2010 OOTB has not supported enough components to work on documents especially regarding document management and collaboration. Security is also an important thing and is part of content management actions. If there are many actions on the same document at the same time, there will be a conflict when a user saves.

Collaboration is the best solutions to solve these problems and for now Microsoft has released a lot of components for collaboration such as Office Web, SharePoint Online (Office 365),… However, another scenario has been used frequently in office which is to share some documents (items) in the same, or another, department.

2012-01-26-DocManagement-Part03-01.jpg

This idea will save you time when working on document/content management. I produced this component to help you share your documents. It allows:

- Sharing item(s) with one or many people with specific permissions. The permission list is taken from SharePoint permission level.
- Keeping item(s) private from other users, except for System Account and Site Collection Admin.
- Inheriting from parent.

Limitations for this free component:
- Cannot share item(s) with many people with many permissions. For example, if you need to add some people /groups with FullControl and Contributor for this item.
- Cannot get the permission editing for items which are the same permission items.
- Only supports SharePoint 2010

Download here

2007, 2010, Content Query Web Part, End User, Libraries and Lists, Melick Rajee Baranasooriya, MOSS, SharePoint Designer, Site Manager/Power User, WSS, XSLT

How to Customize SharePoint List Content Display using Content Query Web Part

2 Comments

 

Editor’s note: Contributor Melick Rajee Baranasooriya is a Senior Software Engineer at IronOne Technologies. Follow him @MelickRajee

I’m going to describe how we can use a Content Query Web Part to Style a SharePoint List. Let’s start with a SharePoint List Called Projects with the following fields.

2012-01-25-CustomizeSPList-01.png

As you probably already know the default look and feel would appear like this:

2012-01-25-CustomizeSPList-02.png

Now I’m going to render this list into a format similar to below:

2012-01-25-CustomizeSPList-03.png

Step One

First you need to define some names for these place holders (I know this may not make much sense to you. But don’t worry about it and please complete these steps). I’m going to define the columns as follows.

  • Title –> MyTitle
  • Logo –> MyLogo
  • Project Summary –> MySummary
  • Project Description –> MyDesc

Step Two

Now you want to define a XSL Style Sheet using these names. Therefore I’m going to use <table> to layout the list item as below.

Here I used XSLT to position the content inside my html tags. There are a few attributes which are mandatory in this section. ;

  • Name and Match should have equal names.
    • name =’X’ match=Row[@style=’X’]
  • mode = ‘itemstyle’

Now you have created XSLT which can be given as a list style in SharePoint.

Step Three

Here we are going to put XSLT to SharePoint.

First you need to open SharePoint Designer with the particular site. Then navigate to All Files and Style Library.

2012-01-25-CustomizeSPList-04.png

You can see many Folders inside. Go to the XSL Style Sheet Folder.

2012-01-25-CustomizeSPList-05.png

You’ll see XSL files which are used by SharePoint to render its content. Here we are using ItemStyle.xsl for enabling custom rendering.

2012-01-25-CustomizeSPList-06.png

Open this xsl file and put your xsl (which we created in step two) at the bottom of the xsl as follows.

2012-01-25-CustomizeSPList-07a.png

The hardest part is now over.

Step Four

  • Add a Content Query Web Part

    • 2012-01-25-CustomizeSPList-07.png

  • Go to edit web part and browse your list. (here our list is Our Projects)

    • 2012-01-25-CustomizeSPList-08.png

  • Then go to the presentation section and go a little bit down. You’ll see the style drop down.
  • Wow .. Now you can see your style.

    • 2012-01-25-CustomizeSPList-09.png

  • Select your custom xsl (here MySample).
  • Once selected you’ll see something like below.

    • 2012-01-25-CustomizeSPList-10.png

  • Now you need to add actual list column names to these text boxes as follows.(Title column should use the scope)

    • 2012-01-25-CustomizeSPList-11.png

  • Then Click ok to Save. You can see your new list rendering now.

    • 2012-01-25-CustomizeSPList-12.png

Happy SharePoint :)

2007, 2010, Andrey Markeev, Developer, Javascript and jQuery, jQuery, MOSS, Visual Studio, WSS

SharePoint Ribbon ToggleButton: creating multiview pages

3 Comments

 

Editor’s note: Contributor Andrey Markeev is a Business Analyst at Softline. Follow him @amarkeev

The SharePoint Ribbon is a very powerful thing. Today I will explain another very interesting use for it and will show how to create multiview application pages and use the ribbon to switch between views.

To understand, what I’m talking about, just remember a standard SharePoint calendar list. It has “Scope” group on its contextual ribbon, and you can switch scopes by toggling the corresponding buttons:

2012-01-23-SPRibbonToggleButton-01.png

So now I’m going to implement something similar to these switches: create a page with several views, and use ribbon buttons to switch between these views.

Some real-world use cases for this kind of switch may be:

  • Switch between tabular and graphical (i.e. chart or calendar) representations of the same data
  • Switch page layouts
  • Filter data
  • Group data (by data periods, departments, regions, etc.)

As you may have noticed, there are some really valuable uses for this kind of functionality. That’s why I reckon, that it would be very important for you, dear reader, to know how to deal with this!

Implementation

For the implementation, I will use SharePoint 2010 Fluent Ribbon API opensource project, which simplifies working with the ribbon and can be downloaded from CodePlex.

Warning: The ToggleButton functionality is available in Fluent Ribbon API starting from 1.4 release only!

To prove that all this is really very simple to implement, I will use the ribbon in conjunction with ASP.Net server-side MultiView control. Also, since obviously I’d like to avoid complete postbacks, I will use an UpdatePanel to update the page partially. Thus, the solution will be very familiar to ordinary ASP.Net and SharePoint developers, except for the ribbon part, but I promise you, the ribbon part is not too complicated.

Ok, let’s start!

First of all, I will need a SharePoint project in Visual Studio, no matter new or existent one, and obviously I will create an application page there:

2012-01-23-SPRibbonToggleButton-02.png

Now I will inherit this application page from the RibbonLayoutsPage class, which is from FluentRibbon.dll. Therefore the FluentRibbon.dll should be referenced and added to the GAC deployment list (‘Advanced’ tab in Package editor).

The RibbonLayoutsPage class has a single abstract method, required to implement, called GetTabDefinition. This method must return an initialized TabDefinition class instance. All the definition-kind classes in Fluent Ribbon API are well-documented, so I hope it will not be hard for you to create your own custom TabDefinition. Here is what I’ve got:

As you can see, all is pretty obvious (you can read about standard images here). However, this definition is not complete: some javascript code is missed. I will return to that a bit later.

The next thing I’m going to do is create the ASPX markup. I will need UpdatePanel and simple MultiView with 3 views for demonstration:

Now I need to write a very simple method, which will switch the MultiView control to particular view:

By default (if not postback), let’s assume that the first view must be selected:

Ok, now all is ready to integrate our ribbon with the MultiView. Obviously, when a ribbon ToggleButton is pressed, we will need to perform a partial postback with argument, which will point to a particular view.

To make the postback partial, it must be performed on behalf of the MultiViewUpdatePanel control. To get the corresponding client code for performing such postback, the GetPostBackEventReference method can be used.

Finally, I’ve got the following code:

Here I’m passing the “{0} ” placeholder instead of a particular value, because I have 3 different toggle buttons.

To call javascript when the ribbon button is pressed, the CommandJavaScript property of each ToggleButtonDefinition must be initialized. To differentiate the buttons, I will replace the “{0}” placeholder with values 1, 2 and 3 respectively.

So, for instance the first ToggleButtonDefinition will look like this:

And to handle the postback, I will need to slightly improve the Page_Load method:

Only one last thing is left to do.

The problem is, that the SharePoint ToggleButton ribbon control is not very handy yet. And by default, it doesn’t even know in which state it is. The state management has to be done manually, and the current state must be provided through the InitialValueJavaScript property of ToggleButtonDefinition class.

Obviously, for storing this state I will need some global js variable. It has to be changed when the button is pressed, and it’s value has to be returned in InitialValueJavaScript.

The corresponding code for the first ToggleButton will look like this:

And unfortunately, this is still not all! One last piece of SharePoint magic is needed to make it work.

The point here is that SharePoint will call the initial value js code only for the pressed button. But since we have the toggle group, we need to also update all other toggle buttons. For this purpose, the special ApplicationStateChanged command must be executed. This can be done with the following javascript code:

Thus, we have to add this call to every ToggleButton. The final version of the GetTabDefinition method will look like this:

Wow, at last we can deploy the project and marvel at the desired result2012-01-23-SPRibbonToggleButton-03.gif

2012-01-23-SPRibbonToggleButton-04.png

2007, 2010, Dave Coleman, End User, MOSS, Office 365, Site Manager/Power User, WSS

Changing or adding your profile picture on Office 365

9 Comments

 

Editor’s note: Contributor Dave Coleman is a Sharepoint Server MVP and co founder of SharePointEduTech. Follow him @davecoleman146

I have been using Office 365 since the beta and we also purchased an E1 subscription on its release but it was only today that I finally got around to taking a look at My site and configuring my profile. This is partly to do with my using Harmon.ie but more about that later.

So I was very surprised to find that there was no link available to change my profile picture OOTB out of the box or should that be OOTC out of the cloud! Well, a bit of digging around provided me with the answer so I thought I would share it with others through the blog.

As you can see from the image below there is no link to change the profile picture

2012-01-24-ProfilePicOffice365-01.png

To enable this feature you need to go to your Office 365 admin panel once there click on the Manage link under SharePoint Online.

2012-01-24-ProfilePicOffice365-02.png

This will open up the administration center as illustrated below

2012-01-24-ProfilePicOffice365-03.png

You then click on Manage User Profiles and under People click Manage User Properties. If you then scroll down the page you will find one property titled picture hover over and on the down arrow click edit

2012-01-24-ProfilePicOffice365-04.png

The section you need to change is under Edit Settings. By default this is set to Do not allow users to edit values for this property change this to Allow users to edit values for this property

2012-01-24-ProfilePicOffice365-05.png

Once you have made all your changes scroll to the bottom of the page and click OK. Give it a couple of minutes to propagate the change through and then when you click edit profile you will now see the section to change or add you picture.

2012-01-24-ProfilePicOffice365-06.png

2007, 2010, Document Management, End User, MOSS, NSUT HaiBanhXeo, Site Manager/Power User, WSS

Series solutions on document management for officer - Part 2

Editor’s note: Contributor Hai Nguyen Tuan is a Developing Lead at Bamboo Solutions Corporation. Follow him @tuantomy.

In the previous post, I introduced a piece of document management for Officer. Interms of daily tasks, I think it’s very useful if there is any robot functioning to help us perform our tasks. It’s like a command in SQL that executes many times, sometime it makes us feel uncomfortable or tired with a boring job. That’s why I think it’s really useful, especially for some people working in Accounting or HR Departments.

In this article, I’ll introduce a new feature in a series of small tools for Officer. That’s how to download multiple files from a document or picture library.

SharePoint OOTB already has a feature named Download a copy in the Copies category of Ribbon. However, to get a copy of a file, the user can right-click on the file name and select Save file as from context menu of Internet Explorer. Of course with SharePoint, users have a lot of ways to download a copy of a file, but the question is how to get many files and folders into a package? The only way to do that is to go through every item and download then using a compress function, as supported by windows, to zip all in one.

2012-01-23-DocManagement-Part02-01.jpg

There are some limitations to the free version:
- Does not support compressing all sub-folders.
- Does not support other zip type, just using "zip".

There are features of this tool:
- Allows compression of files and folders in the same level.
- Supported on SharePoint Foundation and Office Server.

It’s available to download here.
(… to be continued )

2007, 2010, CAML, Content Editor Web Part, Developer, Javascript and jQuery, Libraries and Lists, MOSS, Pilkenton, Craig, WSS, XSLT

Got REST? Querying SharePoint List data using REST services client-side: Part 2

14 Comments

 

Editor’s note: Contributor Craig Pilkenton is a Senior Microsoft Consultant at CDW.

In the first part of this series, Querying SharePoint List data using REST services client-side: Part 1, we reviewed what REST is in SharePoint 2010. Then we reviewed how to interact with it to pull SharePoint List data (or anyone else’s REST feed) and then make it do our bidding.

In this next part, we’ll start using JavaScript/jQuery to consume that data our users need and put it on the SharePoint page in a meaningful way, just using a SharePoint Library and a CEWP (Content Editor Web Part). Now jQuery isn’t required for this, but it will make your life easier and decrease the amount of code SharePoint is pulling when the page loads. This becomes especially important for your users if there are a lot of these on a page or your users are bandwidth-challenged.

As with any development effort there are some things to consider first before jumping right in, especially when your ‘source code’ is designed to live in SharePoint primarily. Let’s cover those first to ensure long-term consistency.

  1. Determine a storage strategy: where will these files be stored in SharePoint for access? If the script is global, store it in the Site Assets Library at the root of the Site Collection it will be used in. If the script will only be used for one site (and may cause confusion or naming headaches), then perhaps store it it in the Site Assets Library in that child site. Consistency is important.
  2. Determine a ‘source-control’ strategy: what will be your rollback scenario? Trust me, it’ll happen where one person makes a change causing a ripple not expected. With a Site Assets Library you already have versioning and check-in/out on. Perhaps you want a copy backed to a source control system before and after you make a change, or the Approval Workflow activated.
  3. Save yourself coding-heartache: make small changes; save often; test often. I don’t know how many times I’ve done several changes at once, knowing I shouldn’t but thinking they are not connected, and then have to undo all of them to figure out which one didn’t work.

Now that we have the boring stuff out of the way, we’ll crack open SharePoint Designer 2010 to create our JavaScript file which shows color-coding in the editor and has some intellisense. If you need intellisense Visual Studio can be used instead.

After opening the connection to your target Web Application, navigate to your Site Assets Library which will show you any existing CSS, JavaScript, or image files already stored. In the Ribbon, click the File button & then the JavaScript option.

2012-01-20-GotRest-Part02-01a.png

The file will be created empty and ready to go; right-click on it to check it out and then right-click to Edit File In Advanced Mode to begin coding.

2012-01-20-GotRest-Part02-02.png

A JavaScript file has 4 main sections at its core, nested inside of the previous one like the layers of an onion.

  • 1) The first part is an include for the jQuery library itself, otherwise we won’t be able to run anything but JavaScript. If the Master Page of Site Collection (V4.master) already has this reference, then it’s not needed.
  • 2) The second is the HTML we are going to output this data into the page, which includes a <script type="text/javascript"> that tells the browser to compile & execute this section until it ends.
  • 3) The third section is tied to the <script> tag above and tells the browser to render the code after the DOM is fully loaded and before the page contents are loaded; the $(document).ready(function() {
  • 4) The final part is the jQuery call of $.getJSON() where all the processing happens for calling the REST service URL and then getting that data back in JSON format (JavaScript Object Notation, a lightweight text-based open standard designed for human-readable data interchange). In this section there is also a sub portion, $.each(), that then enumerates over the records by walking through the JSON namespaces from the XML shown in the previous post.

2012-01-20-GotRest-Part02-03.png

Now that we’ve broken out the sections, let’s delve into the core worker section and walk through it. In 4) we are given a JSON object that we need to enumerate and pull out the data our users want to show. Since we are going to output HTML, a few variables are necessary to append the text into before injecting it into the page.

Since we don’t have intellisense to pick the items, we need to look back at the XML generated in the browser. Looking at the below JSON output from our .getJSON() call, we find the values to show and highlight/copy the XML name (e.g. LastName, etc.) as we’ll need the exact value since jQuery is case sensitive.

2012-01-20-GotRest-Part02-04.png

Now in our .js file I created variables to hold the value of each of the outputs as we loop through the results in case of any post-processing is needed, starting on line 10 and 14 (e.g. "var strLastName = result.LastName;", "var strHireDate = ", etc.). We pull this from the For Each we get by passing it the node of the JSON we need to loop through, then just reference the section in the function() called ‘result’.

2012-01-20-GotRest-Part02-05.png

The next task is to append our generated HTML output of variables, built from looping through the results, to the master output we want to show. On Line 10 I’ve created a simple HTML table structure that i will append rows and cells to in Lines 25-27, but you can output any HTML you prefer including Divs/Spans, or HTML5 if you are using the latest browsers.

Just before we finish our .getJSON() function, we use jQuery to inject this new HTML into an empty HTML control we explicitly added to the bottom of our file on line 37. In this case it is appending the results to any already existing content in that tag "$(‘#resultarea’).append()". If we wanted to completely replace the HTML instead, for filtering and sorting, then we would want to change the ‘.append()’ call on line 31 with a ‘.html()’ instead.

2012-01-20-GotRest-Part02-06.png

Finally, to get this to show on a SharePoint page we capture the URL of where our page lives in the Site Assets Library, go to our target page to show this on, and choose Edit Page from the Site Actions dropdown. Now in one of the Web Part Zones click the Add A Web Part button and choose a CEWP.

2012-01-20-GotRest-Part02-07.png

Once it is on the page click the dropdown on the top-right corner, choosing Edit Web Part and at the top of the configuration toolbox paste in the URL to the file itself and then click the OK button. This will tell SharePoint that when it’s time to render arrives, load the file and whatever it is supposed to do instead of any other content.

2012-01-20-GotRest-Part02-08.png

When we hit the OK button above, the page will leave edit mode and re-post, displaying the page with our .js file loading the content. If we coded everything right we should see our output we designed, similar to the output here. If not, double-click the JavaScript error icon at the bottom-right of the browser, track the error down in your file, and correct. Wash, rinse, repeat.

2012-01-20-GotRest-Part02-09.png

While this is a quite simplified output, it shows how in essence to pull the data from SharePoint and then display in any format you wish. At this point we have the basics of getting the information back, but we have the capability of creating filtering and sorting options for our users, as well as being able to POST updated results back to the List if that makes sense for the users needs.

2007, 2010, CSS, End User, MOSS, SharePoint Designer, Site Manager/Power User, Stefan Bauer, WSS

Centered fixed width design in SharePoint 2010 - The fast way

8 Comments

 

Editor’s note: Contributor Stefan Bauer is a solution architect at wunderman pxp gmbh. Follow him @Stfbauer

There are a lot of fixed width master page solutions available on the internet and I’ve read most of them. Some require JavaScript or don’t respect the ribbon, which means that the ribbon will be placed inside the fixed width design. SharePoint is smart enough to handle small screen resolutions by compacting and rearranging the icons in the ribbon, but if a larger screen is used it gets really hard to administer SharePoint and breaks the usability completely.

There is a much quicker and safer way to create a flexible master page where only certain CSS properties need to be changed to get any fixed width design as well as centered design with a border to the left and right.

Reasons for a centered design

There are certain reasons for a centered or fixed width design. By default SharePoint scales the complete page to 100% of the screen. When it comes to web content management the design is more text driven and collaboration concerns are not that relevant. When the content gets wider and wider with the screen resolution the lines of text get longer and longer. The content then will be harder to read.

Fixed width looks pretty but generally only makes sense when public facing web sites should be created. The reason is that you don’t know what the users screen resolution is. Nowadays the most common design requires supporting a minimal resolution 1024px or maybe sometimes 1280px. To be on the safe side most web designer’s use grid systems like 960.gs which implements widths of 980px and is optimized for a minimal screen resolution for 1024 by 786.

Fixed design could also be used for blogs and maybe wikis. From a collaboration perspective a 100% width makes more sense. So comment and let me know if you think differently.

Centered Design in SharePoint

As I said before most of the tutorials available on the web don’t respect the ribbon and stuff it into a design that has a fixed width. The fastest way to get a fixed width design I found needs only the following CSS code and is flexible to be changed to any desired width.

div.s4-title.s4-lp,
 body #s4-mainarea,
 #s4-topheader2,
 #s4-statusbarcontainer {
     width: 960px;
     margin: auto;
     padding: 0px;
     float: none;
     background-image: none;
     background-color: white;
 }

To get the fixed width design working with the v4.master some classes needs to be added.

<div id="s4-workspace">

Needs to be changed to:

<div id="s4-workspace" class="s4-nosetwidth">

And the second html element needs to be altered:

<div id="s4-titlerow" class="s4-pr s4-notdlg s4-titlerowhidetitle">

This need to be changed to:

<div id="s4-titlerow" class="s4-pr s4-notdlg s4-titlerowhidetitle s4-nosetwidth">

By adding the s4-nosetwidth style class SharePoint won’t assign the inline style property for width and the design will stay centered. The result looks like this:

2012-01-20-CenteredFixedWidthDesign-01a.png
960px fixed width design

2012-01-20-CenteredFixedWidthDesign-02.png
fixed width with ribbon enabled

At the end the design of SharePoint is centered. When any page is edited the Ribbon will remain on the whole width of the browser. It’s much more comfortable to edit SharePoint that way.

The size of the design could be changed to any size just by simply modifying the width property. Remember always respect the size of the ribbon and let it live outside your design for easy editing.

Download Visual Studio Solution

Download WSP File

2007, 2010, Document Management, End User, MOSS, NSUT HaiBanhXeo, Site Manager/Power User, WSS

Series solutions on document management for officer - Part 1

3 Comments

 

Editor’s note: Contributor Hai Nguyen Tuan is a Developing Lead at Bamboo Solutions Corporation. Follow him @tuantomy.

SharePoint is a portal with the strength and functionality for collaboration and content management. There are a lot of new features to improve and support the activities of users. These useful tools are for almost any kind of user working with SharePoint 2010. However, Microsoft only builds a framework and background technology for their product while their partners will offer a product as a component or solutions to help IT Pros or IT Manager build up a service for their business.

So, there are many companies who only support the solutions or consult the customer by their SharePoint administration expert. I’ve also consulted for some companies and built the solutions for part or all of their departments. After finishing every contract, the best things I have is how to fullfill the requirment when SharePoint features are not enough to handle all situations.

Luckily, I am a developer. The advantage is that I don’t have to think about if I have a budget; I just buy some widgets or components from a 3rd party and select the best product to match the requirements. This is not difficult but the most imprtant thing is how to mantain the product id. There are many many products from other companies and a developer like me can not handle! In this series, I will give you my opinions on how to solve little taks and it’s actually useful for IT managers, especially end-users.

The first topic to talk about requires’ Officer, used to move a lot of document to another site. The limitations for the free version are:

  • No support for moving multiple items, that mean these documents (files) are still in their original list. They are not deleted after being copie to a new location.
  • No support for an overwrite method. If this feature is enabled, the file is copied to the destination list and will not overwrite instead of adding subfix "-(copy)"
  • No support for copying the folders, but it’s avaible upon request.
  • No support for cross-site, which means moving these files to another server farm.
  • No support for sending to multiple sites

Here is the list of features in the free version:

  • Copy multilple items to onother locations.
  • All file types are supported.
  • Support for both Foundation and Office Server
  • No need to install or activate Document Set feature.

2012-01-19-DocManagement-Part01-02.jpg

Note: at the destination URL, please enter the short path, not including SitePage/Default.aspx or default.aspx

The trial version is available here: Download here. Hope this help.