Category Archives: Solutions with Tools

Tools for SharePoint User Experience (UX) Design: Interactive Prototyping


You may also be interested in: O’Reilly - SharePoint 2010 at Work


 

Editor’s note: Contributor Adrian England is the Senior User Experience Designer at Creative Sharepoint. Follow him @ade_england

Introduction

Following on from the previous articles in this series Scamping, Paper Prototyping and Wireframing, the topic for this article is Interactive Prototypes.

What is Interactive Prototyping?

In the previous articles in this series a concept was taken through the stages of initial scamps to get the ideas down on paper and iterated quickly, a paper prototype to explain individual elements of functionality and then the creation of wireframes to show how the content will sit within the site.

At this stage you will probably have a number of wireframes depicting the different pages within a site. These wireframes will undoubtedly have the correct content and layout in place, but it may be difficult to illustrate how the individual pages come together to form a complete site.

This is where the interactive prototype comes in. Using Axure to create the initial wireframes means that these pages can now be wired together to form a clickable, navigable site. Again these files should contain no element of design, these should be purely monotone layouts with no imagery or stylised fonts, ensuring the focus is on the content with the addition of interaction.

Taking the wireframe created in the previous blog we can now add functionality, links, interactions and more… For the purpose of this blog I will focus on making the site navigable but there is a lot more that can be achieved by Axure, their site has a number of tutorials (http://www.axure.com/learn) and a lot more resources can be found online.

2013-10-04-InteractivePrototyping-01.jpg

Using Axure to create an Interactive Prototype

First off we need to decide which elements of the site will be used across all (or multiple) pages. For the purpose of this wireframe the header containing the navigation, site logo and search area will be required as a consistent element across the entire site.

For larger projects these elements could include document libraries, lists, newsfeeds, calendars or any other element that should remain consistent.

Similar to the SharePoint Ribbon in our SharePoint2013 Axure Library any page element can be turned into a “Master”.

Taking the wireframe created earlier, drag and select all of the elements in the header area.

2013-10-04-InteractivePrototyping-02.jpg

Right click on this selection and “Convert to Master”, naming the item “Header”.

2013-10-04-InteractivePrototyping-03.jpg

This new Master element will be displayed in the Masters panel (to the left of the prototype). Rename the pages (in the Pages panel) as required, then right click on the Header Master (in the Master panel) and select the pages it should be added to. The Master element can also be dragged on to an individual page and repositioned if required.

2013-10-04-InteractivePrototyping-04.jpg

Now edit the master by double clicking on the master element, either on the page (highlighted in red) or in the Master panel, this will open the Master created earlier so you can edit all the pages globally.

Links can be added to the Navigation buttons by right clicking on them and adding cases. The Header will now be updated with links on all pages that it has been placed on allowing the site to be navigable.

2013-10-04-InteractivePrototyping-05.jpg

When finished adding content and functionality to each page, the prototype can be exported into a html prototype allowing the user to click through the site and explore.

Once tested by the user and approved the project can then progress to the design stage, confident in the knowledge that the content and functionality have been agreed. Going through this process and separating content, functionality and aesthetics allows the designs to be considered purely on their own merit and the underlying functionality understood without further explanation or iteration.

Tools for SharePoint User Experience (UX) Design: Wireframing


You may also be interested in: Simple SharePoint Migration Tool - Content Matrix by Metalogix


 

Editor’s note: Contributor Adrian England is the Senior User Experience Designer at Creative Sharepoint. Follow him @ade_england

Introduction

Following on from the previous articles in this series on Scamping and Paper Prototyping, the topic for this article is the Wireframe.

What is Wireframing?

While a scamp is the first stage in designing a site, a quick way of getting the content and functionality required planned out, a wireframe is the next stage in the process when the detail and scale of elements need to be ascertained. Similar to a scamp, a wireframe should be quick and easy to change so the process of iterations with feedback from clients will allow quick refinement of the content required.

Like a scamp, a wireframe should have no design elements, such as colour, fonts or imagery, ideally these should be created in one colour, only using extra colours to denote different areas or functionality, by doing this the user is forced to focus on the content and not be distracted by design elements.

Where scamps and wireframes differ is that wireframes should contain the actual content that the site requires, list items, document names, names of departments and people, navigation items etc. (or as close as possible) so that the site feels as personable and as real as possible to the users.

Another reason for the content to be accurate at this stage is that the wireframes will be produced at SS (Same Scale) as the proposed design, so if the requirements are for the site to be optimised for a minimum browser size of 1024x768px with a minimum point size of 11px then the wireframe should be created to these specifications to ensure the content will fit when we get to the design stage.

Which tools can be used to create Wireframes?

The tools for creating wireframes are wide and varied and which tool you choose to use will depend on your skill set and the projects specific requirements. Below are some of the tools available with their pros and cons:

Photoshop

Although not the obvious choice for a wireframe, the wireframe taking slightly longer to create initially, the finalised wireframe can have design elements quickly applied by using Photoshop layer styles to add chromes etc.

Photoshop however does a lot more than just making wireframes and therefor is a lot more expensive and a lot harder to learn than other products, so if you don’t already have a copy of Photoshop and are unfamiliar with it this is probably not the right choice.

Fireworks

Fireworks is probably more suited to wireframes, using symbols and states to control the look of elements which can have the design added once finalised. Another advantage with Fireworks is that the wireframe can quickly be turned into an interactive prototype.

Similar to Photoshop, Fireworks is reasonably expensive and tricky to master.

Balsamic

Balsamic is a tool that is designed specifically for the purpose of wireframing, giving a selection of user interface elements that can be easily dragged and dropped into position to build a layout. Balsamic is a simple application and so, is a skill that can be quickly learned.

On the downside Balsamic produces wireframes that are a little closer to scamps in style so getting the content accurate is a bit harder.

Axure

Like Balsamic, Axure is designed specifically for wireframing, it comes with a selection of User Interface elements and you can create your own UI elements to add to these if required. You also have more control over the look and scale of items than Balsamic, being able to control global text styles etc.

It is a relatively simple application to learn and there are a wealth of online resources and tutorials too.

One big advantage of Axure is that once you have built your wireframes these can be quickly wired together to make an interactive prototype.

Using Axure to create Wireframe

I won’t go into too much detail on how to use Axure as there are lots of tutorials on this subject floating around the web, below I will illustrate the process of creating a simple wireframe from the scamp created in the previous article, using the tools that come with Axure and a few extra tools we have created that are SharePoint specific (which can be downloaded at the end of this document).


Above: The scamp from my previous post

Step 1: Create a blank Axure document

Step 2: Load the “SharePoint_Axure_Library” (downloadable at the end of this blog)

Click on the title of the Widgets Panel and scroll down to “Load Library” then navigate to and load the “SharePoint2013_Axure_Library”. This will add a number of UI Elements that are specific to SharePoint such as the ribbon, lists, libraries etc.

Step 3: Add the SharePoint Ribbon from the “SharePoint2013_Axure_Library”

Drag and Drop the Ribbon from the widget library on to the page.

Step 4: Add buttons from the Axure default widget library

Drag and Drop a button on to the page, the size and text can be edited once the button has been placed.

Step 5: Add the SharePoint Search Box from the “SharePoint_Axure_Library”

When dragging elements onto the page Axure has handy dialogue boxes and guides to allow pixel perfect positioning of UI elements.

Step 6: Use the Axure default widgets or create your own widgets to add more content

Conclusion

This process can be repeated to create all of the required pages of the site in one Axure document, if an element is used on multiple pages then it can be created as a master and edited in one place whilst updating any page it is placed on, these wireframes can either be exported as individual images or wired together to make an interactive prototype (the process of making an interactive prototype will be covered in the next blog in the series).

The wireframe is now much more detailed than the original scamp, and because it has been created to scale we can see that the all of the required content is no longer visible within a 1024×768 screen, finding this out now rather than at the design or build stage is beneficial as we can now quickly reassess and refine the content so the information that the client requires on the page fits within the minimum screen size specified.

Download the SharePoint2013 Axure Library here – please note, this file will only work in Axure, not the other wireframing tools mentioned earlier

Tools for SharePoint User Experience (UX) Design: Paper Prototyping


You may also be interested in: fpweb.net


 

Editor’s note: Contributor Adrian England is the Senior User Experience Designer at Creative Sharepoint. Follow him @ade_england

Introduction

Following on from the previous article in this series scamping, the topic for this article is the Paper Prototype.

What is Paper Prototyping?

A paper prototype, like a scamp, is a low-tech way of quickly visualising an idea, or in this case, an area of functionality that would either be difficult to explain or would require investigation for proving a concept.

In essence, a paper prototype is a scamp with interactive functionality, which can be quickly created, tweaked and thrown away if not required.

The example below is an expanding list showing how the finished prototype will be used.

2013-08-27-SharePointPrototyping-01.jpg

What you will need

  • Cutting mat
  • Scalpel
  • Metal ruler
  • Glue (optional)
  • Marker pens
  • Medium weight card (around 200gsm)

Step 1

Draw a Scamp of the functionality area in its static state (on page load with no interaction).

2013-08-27-SharePointPrototyping-02.jpg

Step 2

Using the scalpel, metal ruler and cutting mat cut a line in the scamp along the top of the interaction area. This hole should be a little larger than the thickness of the card that is being used.

2013-08-27-SharePointPrototyping-03.jpg

Step 3

Next a scamp needs to be drawn for the interaction item, in this case this is the expanded list item.

Once drawn, the interaction item should be cut out so that the main body area is slightly narrower than the hole which was cut in Step 2 whilst leaving a bar at the top (this will allow the item to stop at the correct place).

2013-08-27-SharePointPrototyping-04.jpg

Step 4

Flip the two pieces of card over and feed the interaction item created in Step 3 into the hole created in Step 2.

2013-08-27-SharePointPrototyping-05.jpg

Step 5

Flip the paper prototype back over and have a play.

Other Uses

Paper prototypes can be used to illustrate a vast range of functionality, the only limitation really is your creativity.

The process outlined above is only a very basic paper prototype; be creative and think up new ways of being able to demonstrate functionality.

Rolls of paper can be used to allow large areas of content to be scrolled through, long horizontal pieces of card can be good for demonstrating image carousels, tinted acetate or tracing paper can be used to replicate a modal window popping up…the possibilities are endless.

Tools for SharePoint User Experience (UX) Design: Scamping


You may also be interested in: Scinaptic OnePlaceMail - Enterprise Email & Document Management for SharePoint


 

Editor’s note: Contributor Adrian England is the Senior User Experience Designer at Creative Sharepoint. Follow him @ade_england

Introduction

This is the first in a series of articles exploring useful tools for designing a user experience for a SharePoint site.

I will explain what the tools are, why the tools should be used, in which circumstances they are best utilized, provide examples of usage and downloadable templates for use where possible.

What is Scamping?

In the context of User Experience a scamp is a quick, hastily drawn visual of a webpage.

Scamps should be the first stage of designing a SharePoint site (or any other site for that matter) when the content that is displayed on each page needs to be defined.

The content does not need to be pretty or drawn with perfectly straight lines (see below). In fact quite the opposite, we’re not aiming for a work of art here, it’s rough for a reason.

Creating these scamps in this crude way allows us to focus purely on content and if any element of visual design were added it would distract from this.

By only using a single color and having no styling applied a client will be led towards only giving feedback on the content of the page rather than being distracted by other elements and giving feedback on the color, imagery or the fonts used etc.

Another reason for doing these scamps quickly is that they will be disposable. An idea can be quickly agreed or disregarded by doing a quick scamp to assess its merits and throwing it away if it does not work. Many hours could be wasted by designing a perfect site with a full blown User Interface design only for the content to be changed and the time spent being wasted.

On a similar note, from the designer’s point of view, if you spend a few days on a design you will become attached to your design and you would be reluctant to make major changes to the layout. If these changes are made at the scamp stage, a 5 minute scamp is easier to throw in the bin and start again.

SharePoint Scamping Template

We have created a pdf template for quick and easy scamping which can be downloaded from the link at the end of the article and printed out. The template comprises of a browser window (1024px x 768px), pixel dimensions and a pixel grid to aid alignment and scale.

Also included in this template are layers that can be turned on/off in acrobat reader to add the Bookmarks Bar and the SharePoint Ribbon to the browser window.


Above: The basic scamp pad


Above: The basic scamp pad with bookmarks bar and SharePoint ribbon

Download the Creative Sharepoint scamp pad template here

SharePoint: Extending the DVWP – Bonus: Creating a Title Based on Dropdowns with jQuery

Author: Jim Bob Howard

This question came in my email from Fernando:

I used the code from your article, Extending the DVWP - Part 22: Creating Title Based on Other Fields in jQuery.

I’m having a problem when using fields that are not "Text", for example in fields combo box or radio button the variable returns "undefined".

When I use fields "text" the script works fine.

My code:

<script language="javascript" type="text/javascript">
  $(document).ready(function() {
      $("input[title=Título]").parent().parent().parent().hide();
  });
  function PreSaveAction() {
      var txtDept = $("input[title=Colaborador]").val();
      var txtGroup = $("input[title=Equipe]").val();
      $("input[title=Título]").val(txtDept + ' - ' + txtGroup);
      return true;
  };
</script>

The result when I use other combo box fields is undefined - undefined

Can you help me?

Good question.

There’s Something Strange Going On with the Select Control

In Internet Explorer, with a dropdown that contains more than 20 items, Microsoft has decided to fake the select control with an input box and an iFrame. (Anyone know why?) I covered this to a limited extent in Extending the DVWP - Part 31: Filling in Default Data on the Insert Template.

What that means is that a dropdown won’t look the way it "should" when you’re try manipulate it with jQuery. So, before you begin this task, you need to check to see if the dropdown you want to use has more than 20 items, and whether the user creating the item is using IE.

The Way Things Ought To Be

Let’s first assume that you’re working with a non-IE browser, OR that your list will always contain less than 20 items. In a perfect world, this is how it would always work.

A standard dropdown control on a form will look similar to this in the HTML:

<select name="{long name}" id="{really long ID}" title="Colaborador">
        <option value="12">Arturo</option>
        <option value="13">Alonzo</option>
        <option value="17">Diego</option>
        <option value="14">Esteban</option>
        <option value="15">Fernando</option>
        <option value="16">Hidalgo</option>
        <option value="18">Jaime</option>
        <option value="23">Javier</option>
        <option value="25">Manuel</option>
        <option value="19">Martin</option>
        <option value="20">Paulo</option>
        <option value="24">Pedro</option>
        <option value="21">Rafael</option>
        <option value="22">Raul</option>
</select>

Notice the control that is named after the column in our list is a select tag in the HTML, but the selected value is inside an option tag.

Armed with that knowledge, the jQuery way to get to the text of this control is pretty straightforward:

     $("select[title='Colaborador'] > option:selected").text();

Alternately, we could get the value of the selected option with:

     $("select[title='Colaborador'] > option:selected").val();

In the case above, it would simply be a case of changing the two variable declarations:

      var txtDept = $("select[title=Colaborador] > option:selected").text();
      var txtGroup = $("select[title=Equipe] > option:selected").text();

Meanwhile, Back in IE with More than 20 Items…

While the implementation seems strange, the solution is headache-free if you know there will always be more than 20 items. In fact, it looks very much like a text box (because it is).

Fernando’s code would work as written.

But, what if you’re not sure how many items will be in the control, nor which browser your users will use to access your list?

Since most browsers draw this control as a select, we’ll assume that first.

      var txtDept = $("select[title=Colaborador] > option:selected").text();
      var txtGroup = $("select[title=Equipe] > option:selected").text();

But, then we’ll check to see if we’ve really got something. If not, then we’re in IE and we have more than 20 items, so we’ll fall back to looking for the input.

      if (txtDept is undefined) txtDept = $("input[title=Colaborador]").val();
      if (txtGroup is undefined) txtGroup = $("input[title=Equipe]").val();

We can then continue with assigning a value to the Title (or Título, in Fernando’s case) control.

      $("input[title=Título]").val(txtDept + ' - ' + txtGroup);

Solution in Action

In Fernando’s case, he was working with less than 20 items, so he didn’t have to do the check for undefined.

Your solution worked! It was less than 20 items in the combo box and I put the code the way you wrote.

The current code:

  function PreSaveAction() {
      var txtDept = $("select[title='Colaborador'] > option:selected").text();
      var txtGroup = $("select[title='Equipe'] > option:selected").text();
      $("input[title=Título]").val(txtDept + ' - ' + txtGroup);
      return true;
  };

Thank you!

Love it when it works the first time!

Author: Jim Bob Howard

Jim Bob Howard is a web designer / webmaster in the healthcare industry. He has been working with SharePoint since March 2009 and enjoys sharing what he has learned. He is a moderator and frequent contributor to Stump the Panel, and answers SharePoint questions on Twitter (@jbhoward) and via email (jimbobhoward@gmail.com).

[tweet]

MindManager Template for SharePoint Taxonomies

Guest Author: Chris Poteet
www.siolon.com

I remember the first time I was shown the MindManager tool specifically for documenting enteprise-grade taxonomies. For too long tools like Excel had ruled the day, but tools like Excel and Word are too linear and not visual enough for complex taxonomies.

 

Mindjet MindManager has since become my tool of choice for creating and document SharePoint information architectures/taxonomies. I have created a template for SharePoint that you can also use in your next project to get started. While it has some specific columns and has a term store section it can also be used for MOSS/WSS 3 taxonomies as well with a little editing.

The template includes the following features.

  • Content type nodes and hierarchy illustrated. The content type nodes also include properties such as internal name, public name, template, etc.
  • Every out-of-the-box column has a template node with the available custom properties to define. Also included are visual column groups.
  • Site structure illustration. Included are color-codes notes with properties for sites.
  • Term store groups. Term store groups, sets and terms are illustrated hierarchically.
  • Property mappings for user profile. Since SharePoint 2010 utilizes user profile properties in the term store an example node is included with the custom properties definable for a property import.
  • A visual icon designation for many of the nodes as well as a legend is also provided.

Here are a few images to illustrate what it looks like.

Content Types

Term Store

Site Structure

Download the template

Note on Compatibility: While this will open in the Mac version some fidelity is lost. Mindjet hasn’t quite gotten down the compatibility between the two versions. This was created in version 8 for Windows but opens and works fine in version 9 (not tested in lower versions).

Guest Author: Chris Poteet
www.siolon.com

Chris Poteet is a Senior Consultant for Portal Solutions. He specializes in information architecture and business analysis as well as molding the SharePoint user experience. He can be found on Twitter @chrispoteetpro and his blog is at www.siolon.com

[tweet]

SharePoint: Integrate ASP.net controls with Forms - Part 5: Force Selection within Drop Down List

Guest Author: Matt Bramer
http://mattbramer.blogspot.com

So Close!

You may have noticed the Drop Down control has a bug. When you visit the page, an item is already selected but the EditForm isn’t displayed for that item. The best I can tell is the value for the Drop Down is set before the EditForm is ready to accept a connection. Don’t worry though; we can fix it with just a few tweaks to the control.

First we must select/click/highlight (pick your pleasure) the Drop Down List so we can open the Tag Properties for this control. With anything you set out to do, there is always more than one way to get it done. You can select the control and then Click Task Panes, Tag Properties; or you can simply double click on the Drop Down List.

The settings we are interested in are:

  • AutoPostBack
  • ToolTip
  • AppendDataBoundItems
  • DataSourceID
  • DataTextField
  • DataValueField
  • Misc – Items

Notice that some of these properties are highlighted in blue. This happens when you customize a setting for this control. Remember checking the AutoPostBack option in Step 1? Since some of these properties have already been set, we don’t need to worry about them. I’ve listed them above so when you want to deep dive into the inner workings, you’ll have a good base to start from.

Ready, Set, Config!

Let’s set the ToolTip first. This gives a visual indicator to the user of the page. When you hover over the Drop Down List, a notification will appear. These are extremely useful when trying to give simple tips to your users. For this property, we are allowed to type our message directly into the box to the right.

You’ll notice some properties work differently. Some only give you a True/False selection. By using these controls, you’ll become more familiar with these properties and how each one works. AppendDataBoundItems is a prime example of why it’s necessary to become familiar with these controls. It’s difficult to decipher at first glance what this really does. From trial and error, I’ve found out that it actually solves our problem. Let’s set it to True. By doing that, the items that we add in the next step will be appended to the Drop Down control. If that’s still confusing, after you complete all of the steps and get the page working, go back and set this property to False. The last property we have to set is under the Misc heading and it’s called Items. This allows us to manually add items to select from our Drop Down List. Click the ellipses on the right of Items, so we can add an item.

This brings up a rather odd looking dialog, but once you know what it’s doing for you, you’ll get that raise from your boss! Click Add and then configure this item to:

  • Enabled:True
  • Selected:True
  • Text:Select a document…
  • Value:Select a document…

It’s important to note, the property Value plays a very important part here. Remember in Step 3, we configured the parameter to filter our EditForm when the ID equals the ID of the SPDatasource. Since we’ve set the Value here to: Select a document…, there’s no possible way the Drop Down List will filter to an EditForm. With this in mind, it’s definitely possible to *NOT* have your Drop Down bound to an SPDatasource and manually insert items with values. You could then filter based off of whatever you’d like to. Do I recommend it? No, because it’s just as easy to bind this control to a list and update the values there. It’ll keep you from having to dip into SPD just to add more functionality down the road.

HOORAY!

Guess what? We’ve done enough to merit saving the page. While we are at it, go ahead and open this page. Do you notice anything different? At this point, you should have: Select a document…, as your initial selection. With this in place, your users are now forced to make a selection and aren’t stuck wondering why your Drop Down isn’t working when the page is initially loaded.

If you’ve followed along from the beginning, we have just finished building a Drop Down List that’s automatically populated with Items the current user has created. Upon selecting an Item, an EditForm appears and allows for easy manipulation of metadata. There’s a nagging question to all of this: What else can I do with these techniques? That’s an awesome question because using this techniques; you are able to add functionality to your page that you simply can’t find anywhere else in SharePoint. I’ll leave it up to you to post comments on how you are using this or how it could be used. I definitely have some ideas for follow-up posts and have a project coming up where I’m going to be using this extensively. I’d still love to hear from you guys though, so don’t be shy in the comments!

Guest Author: Matt Bramer
http://mattbramer.blogspot.com

Matt Bramer works as a Systems Admin in the construction industry. He has been working with Search Server Express since 2008 and frequently blogs about his findings at http://mattbramer.blogspot.com. Matt often posts to Stump the Panel and likes to tweet about his IT projects on Twitter (@iOnline247).

[tweet]

I get by with a little help from jQuery and SPServices…

Guest Author: Mark Rackley
The SharePoint Hillbilly

So.. unless you’ve been living under a rock (or in Arkansas) you have no doubt read a billion blogs (well, maybe not a billion) about using jQuery in SharePoint.  You’ve also probably read several more on the great tool at CodePlex called SPServices created by Mr. Marc Anderson. Maybe you’ve played with both? Maybe you’ve grappled with trying to find a real world scenario for when you would use them?

Well.. I’ve been doing a lot lately with SPServices in SharePoint because I’m starting to deal with clients that do not allow any managed code on their servers or we have to go through an arduous process to get managed code approved.  I’ve got a couple of pretty interesting SPServices and jQuery blogs up my sleeve, but I wanted to write a more simple easy to follow blog first so that you can get an introduction to SPServices if you are new to it.

So? What are we going to do?

Think back to one of my earlier blog posts on creating a Parent/Child list relationship:

Creating a SharePoint List Parent/Child Relationship – VIDEO REMIX

In this blog I created a DataViewWebPart to display time entries associated with an issue:

How about we add some functionality so that a user can delete one of the time entries from this page without having to go to the EditForm for the Time entry or use the drop down menu? How about we add a “delete” button to each row that a user can click to delete that row? Yes.. I know… not a great reason to do this in this scenario. I don’t want to see your whiny comments saying I should have done it another the way.  The point of this blog is to introduce you to SPServices.. got it? If you don’t like it, let me show you a really funny kitten video by clicking HERE

Are they gone yet? good… okay… so… let’s get started.

A few comments about SPServices and jQuery

So… first thing you need to do is download the jQuery library and the SPServices library.

  • SPServices – Click the download link
  • jQuery 1.4.1 – The current release is 1.4.2, but I’m using 1.4.1 in all my examples.

Next you will need to put these javascript files some place that you can access them in SharePoint. DO NOT reference them from some 3rd party web site. It will affect your performance and if their site goes down for any reason then your functionality is broken. You have two options for putting these on your SharePoint farm, each come with a positive and a negative:

Place files in a document library

You can put your files in a document library that all your users will have access too.  This has the benefit of easily being able to upload new version of a javascript file or quickly tweak existing one.  The downside is that you will take a slight performance hit from storing them in the content database.

Deploy files to the file system

Yes.. I said DEPLOY (don’t manually copy).  By storing your javascript files on the file system you get the benefit of improved performance, but you lose the flexibility of being able to upgrade and modify the files as easily as if they were in a document library.

Don’t know how to deploy? Well, now you can take advantage of one of my other blog posts:

Creating SharePoint Solution Packages! So easy an Admin can do it!

Typically, especially for development I just place my javascript files in a document library.  So, for the sake of this demo, I’ll upload them to a document library called scripts:

A quick caveat about jQuery

Yes… jQuery is awesome, and yes it will help you do some really cool stuff that you wouldn’t be able to do without managed code,but please keep in mind that jQuery and all javascript is executed on the CLIENT’s computer, not the server. This means you cannot guarantee the performance of your javascript on someone else’s crappy old computer. If you abuse javascript, your users’s perforamnce and experience will suffer. Use it wisely, use minimized files whenever possible, and just be aware of this please.

Okay… what’s next?

Okay… next thing we need to do is drop a Content Edit Web Part AT THE BOTTOM of our page. Please note, that I have more than once failed to place the CEWP at the bottom of the page which will prevent you from being able to call your javascript functions. That’s a fun one to debug the first time you run into it.

Now let’s write our jQuery that will delete a time entry. We will need to know the ID of the time entry in order to delete it.  Let’s not worry about how we’re going to get that right now. Let’s just hard code something for testing.  So, using SPServices our jQuery will look like the following:

//load our scripts
<SCRIPT type=text/javascript src="../../scripts/jquery-1.4.1.min.js"></SCRIPT>
<SCRIPT type=text/javascript src="../../scripts/jquery.SPServices-0.5.6.js"></SCRIPT>
<SCRIPT type=text/javascript>
function DeleteTimeEntry(timeEntryID)
{
//Set cursor to hourglass
document.body.style.cursor = "wait";
//we will be executing the SharePoint WebService "UpdateListItems" with the Command "Delete" to delete
//a list entry from the list “Time”  
     $().SPServices({
      operation: "UpdateListItems",
      async: false,
      listName: "Time",
      updates: "<Batch OnError='Continue' PreCalc='TRUE'>" +
                "<Method ID='1' Cmd='Delete'>" +
                    "<Field Name='ID'>" + timeEntryID +  "</Field>" +
                "</Method>" +
            "</Batch>",
        completefunc: function (xData, Status) {
                                                //check for errors here
                        //reload the page after the deletion has occurred
        }    
     });
 //Turn hourglass off
  document.body.style.cursor = "default";
 }
 </SCRIPT>

Pretty simple? It’s basically just one call.  We pass in the ID for the Time entry (timeEntryID) we want to delete, and SPServices executes the UpdateListItems Web Service method to delete that entry from the list called “Time”, and then we reload the page. So, place the above script in your CEWP by either Clicking on the “Source Editor” button from the CEWP’s property pane or upload this script to your scripts document library and reference it in the “Content Link” of your CEWP.  Again, for development purposes I usually just copy and paste it into the CEWP:

You can actually test this code by creating an HTML button at the bottom of your script and passing in a hard coded Time Entry ID that you know exists. For instance, I know that for my screen shot up there “Title 3” has an ID of 6.  So my test button would look like:

<input type=button value="Delete a Time Entry" onclick="javascript:DeleteTimeEntry('6')">

Before button click:

After button click:

By the way, if you get the error “Object Expected” it generally means that the path to your javascript files is not correct and they did not get loaded.

Okay.. that’s all fine and dandy, but what we really want is to put a delete button on each row of the Time list that will automatically pass in the correct Time entry ID.  To accomplish this we are going to tweak our DVWP is SharePoint Designer. So, go ahead and open up the site in SPD.

Modify DVWP

Okay.. let’s add a column for our button to the Time list DVWP. If you haven’t done so already, make your DVWP show sample data so that it’s easier to work with:

Now click on the word “Title” in the DVWP, then Right click on “Title” and select “Insert->Column to the Left”

This will create an empty column for us to put our delete button in:

Next click on one of the empty cells in your new column and SPD should bring you to the corresponding location in your code for that cell. I wish SharePoint was always consistent, but it’s not.  In my DVWP the code looked like:

 <td class="ms-vb">
                <xsl:text xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" ddwrt:nbsp-preserve="yes" disable-output-escaping="yes">&nbsp;</xsl:text>
            </td>

Go ahead and delete that whole line between the <td> and </td> we don’t want that.  We want to put a button there that calls our javascript.  It will look something like:

           <td class="ms-vb">
                <input type="button" value="Delete" onclick="javascript:DeleteTimeEntry('6');" />
            </td>

However we need to pass in the ID of Time entry and not the hard coded “6” from our test button.  This turns out to be super easy to do, because we are in our DVWP we can specify the ID for the row we are on by using “{@ID}”.  this is very similar to what we did in the Parent/Child post referenced above in case you need step by step instructions on how to do this.  Anyway, the resulting cell looks like:

 <td class="ms-vb">
                <input type="button" value="Delete" onclick="javascript:DeleteTimeEntry('{@ID}');" />
            </td>

And that’s it! We’re done! Simply load your page in SharePoint and click one of the delete buttons. The page should reload fairly quickly with the corresponding Time entry deleted":

By the way, don’t forget to remove your test button at the bottom of the page.

So there you go! Not exactly rocket science, but hopefully a fairly non-threatening introduction to SPServices and jQuery in SharePoint.

Please stay tuned for more, I cannot and will not promise that it will not get much more hairy from here.

As always, let me know if I need to elaborate on anything. If you find yourself completely lost, go back and view: Creating a SharePoint List Parent/Child Relationship – VIDEO REMIX then come back here and everything should make much more sense.

Cheers!

Guest Author: Mark Rackley
The SharePoint Hillbilly

Mark has been developing software applications for over 15 years filling the roles of Project Manager, Business Analyst, Lead Developer, and Software Architect. He has been involved in projects for such companies as Dell, Motorola, Intel and Agilent Technologies. He has worked in large corporate environments, small software start-ups, and as a consultant. Mark currently works for Juniper Strategy, LLC as a Solutions Architect making key SharePoint architecture and development decisions as well as bringing the appropriate SharePoint Best Practices to his clients and customers.

Mark’s goal as a speaker, blogger, and author is to help every new architect and developer avoid the frustrations and brick walls he ran into while learning SharePoint.

Blog:  http://www.sharepointhillbilly.com
Email: mrackley@gmail.com
Twitter: http://www.twitter.com/mrackley

[tweet]

SharePoint: Integrate ASP.net controls with Forms - Part 4: Trimming Drop Down List results using CAML

Guest Author: Matt Bramer
http://mattbramer.blogspot.com

ACK!!! CODE!!!

I’ve been writing these posts by using a *real* no code approach, sort of. I have a very different view of what no code means, but that’s a different story altogether. However, this article I’d like to have you peer into the dark-side. I know all too well, viewing code can make your eyes bug out, but I do feel it’s necessary at some point to learn. I’ve taught myself most of the programming skills I possess today, so I know you can too. I understand trying to learn these languages on your own can be a real burden, so if you don’t understand how it works, just try it anyway. The worst that will happen is the solution will not work. There’s no shame in trying and if it does work, then you can impress your boss!

DVWP & CAML

We should probably look at how these two are related. CAML (Collaborative Application Markup Language) queries are the instructions within the DVWP or SPDatasource that controls what data is retrieved from the database. The CAML query is hidden from you unless you know what you are looking for. Here’s a sample line of code that contains a CAML query:

<SharePoint:SPDataSource runat="server" DataSourceMode="List" SelectCommand="<View></View>" UseInternalName="True" ID="dataformwebpart2">

Within this line of code is a SelectCommand. This command combined with the CAML: "<View></View>" will control what information is displayed to us in the browser. I wont get into all of the details here, but I thought it would be important to show you what’s happening under the hood.

Okay CAML, I sort of get it. Now what?

What we want to do is trim the results of the Drop Down List to only show what items have been created by the currently logged in user. To do that, we need to update the SelectCommand for our SPDatasource with our own CAML. What I like to do is search for the SelectCommand by clicking into the Code View window, and then clicking on Edit, Find. Remember to click into the code view at the top of the page.


If you’ve followed along from Step 1, then the first SelectCommand that you’ll find is the one we’ll need to update. The code should look similar to this:

<SharePoint:SPDataSource runat="server" DataSourceMode="List" UseInternalName="true" selectcommand="<View></View>" id="spdatasource1">
	<SelectParameters>
		<asp:Parameter Name="ListID" DefaultValue="{D3CB17ED-B351-4463-94E5-9C4863A3CEA3}"/>
	</SelectParameters>
	<DeleteParameters>
		<asp:Parameter Name="ListID" DefaultValue="{D3CB17ED-B351-4463-94E5-9C4863A3CEA3}"/>
	</DeleteParameters>
	<UpdateParameters>
		<asp:Parameter Name="ListID" DefaultValue="{D3CB17ED-B351-4463-94E5-9C4863A3CEA3}"/>
	</UpdateParameters>
	<InsertParameters>
		<asp:Parameter Name="ListID" DefaultValue="{D3CB17ED-B351-4463-94E5-9C4863A3CEA3}"/>
	</InsertParameters>
</SharePoint:SPDataSource>

We’ll need to only update the SelectCommand with our custom CAML query:

<View><Query><Where><Eq><FieldRef
Name="Author"/><Value
Type="Integer"><UserID/></Value></Eq></Where></Query></View>>

The final result should look similar to this:

<SharePoint:SPDataSource runat="server" DataSourceMode="List" UseInternalName="true" selectcommand="<View><Query><Where><Eq><FieldRef Name="Author"/><Value Type="Integer"><UserID/></Value></Eq></Where></Query></View>" id="spdatasource1">
	<SelectParameters>
		<asp:Parameter Name="ListID" DefaultValue="{D3CB17ED-B351-4463-94E5-9C4863A3CEA3}"/>
	</SelectParameters>
	<DeleteParameters>
		<asp:Parameter Name="ListID" DefaultValue="{D3CB17ED-B351-4463-94E5-9C4863A3CEA3}"/>
	</DeleteParameters>
	<UpdateParameters>
		<asp:Parameter Name="ListID" DefaultValue="{D3CB17ED-B351-4463-94E5-9C4863A3CEA3}"/>
	</UpdateParameters>
	<InsertParameters>
		<asp:Parameter Name="ListID" DefaultValue="{D3CB17ED-B351-4463-94E5-9C4863A3CEA3}"/>
	</InsertParameters>
</SharePoint:SPDataSource>

Now would be a good time to save your work! When we view the page now, all you will see in the Drop Down is the documents you’ve created. When a different user views this page, the same will hold true. They’ll only view the documents that they’ve created. With this tiny piece of CAML, you can see how easy it can be to change the interaction within the page. Don’t lock yourself into a box either, CAML will allow you to filter anything within the list. So, if I wanted to, I could change the CAML to retrieve only the documents I’ve created and also if the DocCategory equals: I’ve been slacking. Try to be as creative as you can, I think you’ll be impressed with what you can do with this.

CAML is tough to learn. Is there an easier way?

Absolutely! There are several ways of learning CAML. First you *could* decipher the official documentation for CAML on MSDN. Or you can try out these 2 different approaches. First up is to crack open your Document Library and create a view. Let’s filter this library for all Docs created by [Me] AND when the DocCategory equals: I’ve been slacking.

Once you’ve created this view, you’ll notice in SPD, the view appears as an .aspx page. If it doesn’t, refresh SPD by pressing F5 and it’ll be there.

We need to open this page and convert this Web Part into an XSLT View. I do that by right clicking on the Web Part and selecting; you guessed it: Convert To XSLT Data View. Once this has been converted, we can search through the code for our SelectCommand. Yep, we just used SharePoint Designer as a CAML code generator. Pretty cool eh? I use this approach when I know my filters are going to be more complex than normal. I can take it as far as I can before I have to tweak it manually. So that’s one way to start learning CAML.

Next up is to use the free CAML Builders that are on the internet. These two are the best I’ve found: U2U CAML Query Builder & Stramit CAML Viewer. These work a little differently than the first method, but you can build your code all the same. I suggest downloading both of them and experimenting with the capabilities of both. I’m still learning the nuances of CAML myself, so I always use these different methods to generate my code. Once you’ve generated the code, learning the language will take you to the next level and allow you to produce some very cool results.

You’ll also notice when you use these two tools, the code is in this format:

<View>
   <Query>
      <Where>
         <Eq>
            <FieldRef Name="Author"/>
            <Value Type="Integer">
               <UserID/>
            </Value>
         </Eq>
      </Where>
   </Query>
</View>

You’ll need to escape this code in order to work well with your DVWP or SPDatasource. I’ve wrote a PowerShell script to do just that or you can use the XML Escape Tool. Both of these will convert all of the characters that aren’t allowed in the SelectCommand into characters that are allowed. I’ve listed them below for you:


Original Character
Escaped

'

"

&

&

<

>

Note: The CAML query cannot contain any white space. The code must also be in one continuous line. It sounds like a lot of steps, but once you get the hang of it, you’ll be flying through this stuff. Post a comment and let me know which method you like the best.

What’s next?

This article wasn’t supposed to be this long, but in the end, I felt it was necessary. Hopefully it was clear enough to follow. There’s still one more tweak I’d like to show you. With the next article, I’ll show you how to force a selection within the Drop Down List. This will make the page a bit more user friendly, so that’s always worth the extra effort. I promise, we’ll jump out of code view and start clicking around more: Screenshots and all… Are you still interested?

Guest Author: Matt Bramer
http://mattbramer.blogspot.com

Matt Bramer works as a Systems Admin in the construction industry.  He has been working with Search Server Express since 2008 and frequently blogs about his findings at http://mattbramer.blogspot.com.  Matt often posts to Stump the Panel and likes to tweet about his IT projects on Twitter (@iOnline247).

[tweet]