Create a feedback button for Sharepoint 2010

5 Dec
2011

Ever want to get feedback from your users without making them go through some laborious process of filling out a survey or sending an email to the helpdesk?

Introducing: the feedback button. It allows your users, no matter what page they are on, to submit their feedback. I’ve found this to be an extremely useful tool for gathering, you guessed it, feedback. And now I’ll teach you how to create one.

Click below to skip ahead:
Create a new list: feedback
Apply the workflow
Edit your master page


Create a new list: feedback


The first step in making this feedback button is to make a custom list into which your feedback will be input. For my list I have two columns. The first column (renamed the required “title” column) is “What page are you on?” I haven’t made the system intelligent, I’m leaving it up to the user to tell me where they are on the site. You never know, it could provide a little hint if they have no idea where they are, or they think they are somewhere they are not. The second column I create is a multi-line textbox column called “Comments”. That’s all I want from my users. Their feedback. Simple.

List Settings

  • Turn approval off, turn off version history
  • Item-level read permissions: read items that were created by the user
  • Item-level create/edit permissions: create items and edit items that were created by the user
  • Disable items to show in search results

Permissions
You’ll want to break permissions on this specific list and allow your users to have contribute permissions on this list alone. Otherwise they will not be able to submit items when they click the feedback button.


Apply the workflow


Create a new workflow on this list called “Feedback Workflow”. I always turn the start options to “start automatically when item is created”. That is really the only scenario with this list.

There is only one step in the workflow, and it should be an “email” step. If you check out my settings, I have put the contents of the comment box, including who wrote it, when they created it, and the page they were on.

Don’t forget to save and publish the workflow!


Edit your master page


This bit is slightly tricky. Not only do you need to put the button on your master page sidebar, but it needs to open the form in a modal dialog box window (at least that’s my preference). So below you’ll see the javascript I use to enable that dialog box on the link:

<div class="feedback"><a href="javascript;" onClick="javascript:SP.UI.ModalDialog.showModalDialog({ url: '/Lists/Feedback/NewForm.aspx', title: 'Add item' }); return false;"><h4>Questions?</h4><span>Click to send feedback</span></a></div>

Also, for some reason you want to style your feedback button like mine is style, here’s my CSS:

.feedback {
	margin-top:10px;
	text-align:center;
}
.feedback a {
	text-decoration:none;
	color:inherit;
	background:transparent url('/Style Library/images/feedback.png') no-repeat top center;
	display:block;
	height:40px;
}
.feedback a:hover {
	background:transparent url('/Style Library/images/feedback.png') no-repeat bottom center;
}
.feedback a h4 {
	color:#FFFF99;
	font-family:'Ubuntu Bold';
	font-weight:bold;
	font-size:1.3em;
	padding-top:2px;
}
.feedback a span {
	color:#ffffff;
	font-size:0.9em;
}
5 Comments

Convert any link into a modal dialog box in Sharepoint 2010

21 Oct
2011

This will show you how to take any ordinary link in Sharepoint, and make it open its contents in a modal dialog box.

You must know that it depends whether or not you are using a Master page or itemstyle.xsl. I’ll explain both, first how to do it on a master page, then how to do it in itemstyle.xsl.

Step 1: How to convert a link on a master page to a modal dialog box
If you are editing a link on a master page, it is assumed that you are directly adding a link right into the layout. For my example, I use a custom link on the sidebar that opens an input form for a feedback list. I want it to open up in a dialog box on that page, so here’s how I edit the link:

 <code>href="javascript;"  onClick="javascript:SP.UI.ModalDialog.showModalDialog({   url: 'http://www.bentedder.com/',  title: 'Ben Tedder's website'});  return false;  "&gt;  link goes here

Step 2: How to convert a link in itemstyle.xsl to a modal dialog box

&lt; a&gt;


javascript:SP.UI.ModalDialog.showModalDialog({ 
 url: 'http://www.bentedder.com/',
 title: 'Ben Tedder's website'});
 return false;

“Access Denied” when creating a new page in Sharepoint 2010

5 Sep
2011

The reason you get this error is because the user needs “read” access to the Master Page Gallery list. Once that is given, and as long as they have the ability to “add and customize pages” in permission levels, creating pages should work great!

2 Comments

Full-Width Page Layout in Sharepoint 2010

5 Sep
2011

Page Layout without the sidebar (Sharepoint 2010)

In order to create a full-width (whatever the width of your container is) page layout in Sharepoint 2010, you’ll want to disable the sidebar. I find this useful for things like calendars and big lists. Because my design is only 960px wide, I find that by the time you add the sidebar in, you’re left with only around 750px of usable space. For a calendar or a big list, it’s just kind of annoying.

So here’s how it’s done:

Create a new page layout in Sharepoint Designer. Add a new control like this:

<asp:Content ContentPlaceholderID="PlaceHolderLeftNavBar" runat="server" />

By declaring an empty control, we tell Sharepoint to ignore that control and not fill it with anything.

Don’t forget to add a bit of CSS in the header to expand your main body panel to the full width.

Simple as that!

note: use this technique to hide other items on the page layout (top navigation, footer, sky’s the limit)

2-Column Page Layout in Sharepoint 2010

5 Sep
2011

You need a two-column page layout for your Sharepoint project. I’ll show you how to do this with and without the sidebar (quick launch) being active.

Step 1: Create a new page layout
I use Sharepoint Designer for this. I’m not even sure it’s possible using anything else.

Step 2: Setup your basic layout in HTML
You can use tables or divs, but in the spirit of the future, let’s use divs.

<div></div>
<div></div>
<br style="clear:both;" />

Step 3: Fill your divs
Inside these divs you can place webpart zones, page fields, or your own code (maybe a specific header for each column?). Whatever you want to do.

Step 4 (optional): Hide the sidebar/quicklaunch
Declare this control anywhere not the page, but leave it empty so nothing will load into it:

<asp:Content ContentPlaceholderID="PlaceHolderLeftNavBar" runat="server" />

Don’t forget to add a bit of CSS in the header to expand your main body panel to the full width.

Step 5: Style the divs so they appear next to each other.
Using CSS we can make sure those divs appear next to each other.

.col-left,
.col-right {
    width:400px; /*obviously…play with the width to match your setup*/
    float:left;
}

The <br/> tag above should break after the floated elements so everything remains normal in your page layout.

Master Pages vs. Page Layouts in Sharepoint 2010

5 Sep
2011

For those new to Sharepoint, specifically Sharepoint 2010, here is a primer on the difference between page layouts and master pages.

Master Pages
A master page is what I would normally call something like a template. It holds all of Sharepoint’s necessary elements. It creates containers for your information to load into later. It sets the document structure. An analogy would be an empty bookcase. It’s created a bunch of holding places for different elements. You’ll use some of these elements, and Sharepoint will use the rest. So it’s VERY important to not remove elements in this page unless you really know what you’re doing. You might not need the item, but Sharepoint might need it to run the page correctly.

What Master Pages are used for:

  • Calling CSS files
  • Installing javascript & other scripts
  • Tracking codes (I put my Google Analytics code here)
  • Setting top navigation & sidebar functionality
  • Things that occur on EVERY page.

What Master Pages are not used for:

  • Controlling page-level design and structure
  • Webparts and Webpartzones (you can…but I wouldn’t)
  • Anything that DOESN”T occur on EVERY page

Page Layouts
In a page layout, you are essentially telling Sharepoint what it should fill all those empty bookshelves with.You declare a control (a certain shelf), and then tell Sharpeoint what goes inside. You can’t go beyond the reaches of the master pages. Whatever controls are on the master page are the controls you can use in a page layout.

What Page Layouts are used for:

  • Creating the layout of the pages (within the bounds of the master page)
  • Controlling page-level design elements.
  • Including page-level css files to override master page styles
  • Inserting Webparts and Webpartzones
  • Including custom codes (javascript, etc.)
  • Things that occur only on this page layout, not site-wide

What Page Layouts are not used for:

  • Content. This is not the place to write and display content. You’ll create a page to do that. This is merely to provide the placeholders to do that.
  • Applying CSS styles that could be applied at a higher level. You want to keep the management of things like CSS as centralized and high as possible.

A few extra tips:

  • You should never need more than 1 master page (unless for some reason you decide you want a different “admin” and “front-end” master page.
  • Page layouts should be used sparingly. It can get a bit out of control, so consider what you need and make some generic templates using page layouts that will work for many kinds of pages.
  • Don’t put too much extra CSS, javascript, or custom code in page layouts. It can be an enormous task to figure out where a style or a piece of code is coming from if you have master page-level stylesheets, page layout-level stylesheets, and even possibly page-level stylesheets (in a CEWP or something). Try to centralize and simplify.

 

3 Comments