SharePoint Apps: Alexander Malek's weblog

Welcome to VS extensions for WSS!

alexma — Tue, 07 Nov 2006 16:34:00 GMT

Download VSeWSS.

Greetings from TechEd Barcelona! Today, we finally got to announce a project I've been working on for the last year: "Visual Studio 2005 extensions for Windows SharePoint Services 3.0". Yup, the name's a mouthful :). Explaining it is pretty easy though - make "F5" work for SharePoint stuff in VS! That's essentially what VSeWSS brings to the table. Once you have it installed, you can actually boot VS, create stuff for WSS and have it work. For example, if you want to build a web part, from the "New Project" dialog in VS, choose "Web Part" under the "C#/SharePoint" node. Add some code and you're done. You can hit F5 and immediately debug your web part. Pretty cool, no?

In addition to web part support, VSeWSS also helps you build Site Definitions, List Definitions and Content Types. Over the next few weeks, I'll use this blog to explain how to use the various parts of VSeWSS. In the meanwhile, download the bits and drop any questions you have to "microsoft.public.sharepoint.development_and_programming".

Cheers,
alex

My TechEd Slides

alexma — Thu, 06 Jul 2006 00:04:00 GMT

Thanks again to everyone who showed up for the SharePoint Designer talks at TechEd! As promised, here are my slides from the presentation (attached to the posting). Thanks! -alex

Changing the ‘return URL’ for SharePoint forms

alexma — Sat, 17 Jun 2006 19:57:00 GMT

Here’s a quick little tidbit that will help when building SharePoint applications. By default, when users fill out a SharePoint form, they are navigated back to the "All Items" page after pressing OK. You can easily change this behavior by altering what is in the “source=http://…” part of the URL "query string" on the form page.

Example: Let's add a link to the Announcements “New Item” form on the home page, so that it returns the user back to the home page after they press ok.

Step 1) Add the following URL to the home page:
http://<site>/Announcements/Forms/NewItem.aspx?Source=http://<site>/default.aspx

That’s it! :) Once the user presses OK, the form will read the “source=” part of the URL and navigate the user back to that page.

Thanks to Jason and Andre for suggesting this blog tip!

So long TechEd (and thanks for all the fish)

alexma — Sat, 17 Jun 2006 00:26:00 GMT

Just about to take off for Seattle – finally catching up on a week’s worth of email backlog :). Overall, TechEd was a blast. It was great to be able to show off SharePoint Designer to so many people. Thanks to everyone who came by after the sessions or to the booth. I got tons of great questions and suggestions, many of which will help us in planning vNext. Please keep the feedback coming!

SharePoint Designer at TechEd!

alexma — Sun, 11 Jun 2006 15:21:00 GMT

I’m excited to be going to TechEd this week. I'll be presenting two sessions on SharePoint Designer 2007. If you have any questions about building apps on SharePoint, definitely come by the session or the Office booths! See ya in Boston.

Session ID: OFC210
Session Title: Office SharePoint Designer 2007: Create and Customize Microsoft SharePoint Web Sites and Build Workflow-Enabled Applications
Description: Come and learn about Office SharePoint Designer 2007. This is the powerful and easy to use tool for information workers to automate business processes and build efficient applications on top of the SharePoint platform, and tailor their SharePoint site to their needs in an IT-managed environment.
Time Slot 1: 6/13/2006 1:00PM-2:15PM [Breakout 08]
Time Slot 2: 6/14/2006 10:15AM-11:30AM [Breakout 12]

5 Cool SharePoint Designer Features

alexma — Fri, 02 Jun 2006 03:11:00 GMT

There is so much stuff in SharePoint Designer 2007, it's hard to pick favorites, but if I had to choose the five things I'm most excited about...

1) Data View v2:
In addition to update (form) support, we can also now create "aggregate" views across multiple sources, have a cool new Xpath "Expression builder", integration with the "Business Data Library", not to mention a nice UI for managing view parameters.

2) Workflow Designer:
Leveraging the new "workflow" capabilities built into the SharePoint platform, we added a "rules-based" designer to SPD that allows you to quickly add application logic to your SharePoint apps. Think of it as a way to put code behind your apps. I'll be talking about this feature lots more soon :).

3) CSS support:
We built a whole slew of features to create and manage CSS styles. We also worked with the SharePoint team to make it possible to 'detach' from ows.css (now called core.css) and easily customize the SharePoint stylesheet.

4) Better code view:
CSS/XSLT/Xpath intellisense, code view/design view sync for Data Views (best feature ever!), CSS hyperlinks, and more.

5) Rich ASP.net integration:
We collaborated with the Visual Studio team to build really deep support for ASP.net into SharePoint Designer, e.g. great previews in design view, full property grid support, as well as support for bringing up the native "builder" dialogs.

Welcome to the list of features I plan to blog about over the coming months :).

oh ya, did I mention we also built "Re-Ghost Page"?!

Welcome to Office 2007 and SharePoint Designer!

alexma — Fri, 26 May 2006 06:44:00 GMT

Now that beta2 of Office is out (grab it here for free!), I think it's a great time for me to switch over from talking about FrontPage 2003 to SharePoint Designer 2007. In case you hadn't heard, a few months back we announced that Office 2007 would include a new product called SharePoint Designer, aimed specifically at enabling rapid application development for the SharePoint platform . SharePoint Designer (SPD) is very much the continuation of what we started with SharePoint app development in FrontPage XP and 2003. SPD takes the best parts of FrontPage and adds a ton of new capabilities to the Data View web part, a cool new "Workflow" designer for adding application logic to your SharePoint site, not to mention great CSS and ASP.net support. Overall, I think this change is great for fans of building apps on SharePoint. And since Microsoft now has a dedicated product, Expression Web Designer, for addressing the needs of web designers, we as the SharePoint Designer team can focus all of our efforts on building the absolute best design tool for SharePoint.

Cool Outlook Trick

alexma — Tue, 16 May 2006 19:04:00 GMT

One of my long pet peeves about Outlook is that if you search for a user in the “Global Address List” that happens to be in your “Contacts” list, Outlook always returns the entry from the contacts list. This is a pain since sometimes there is information in the global address book (e.g. phone number) that one doesn't have copied to the local entry. Well, turns out there is a power user feature to work around this. If you type “=username” in the contact search box, it will always return the entry from the global address book. Sweet.

Allowing Users to Filter/Search a Data View

alexma — Tue, 25 Apr 2006 19:06:00 GMT

In my previous post, I talked about how Web Part Connections can be used to pass data between Web Parts. I showed building a simple master/detail scenario, where you have one view, showing all the records in a data source, filtering a second "single item" detail view of the same source. There are tons of other scenarios where Connections are useful. For example, imagine if you could have a little form on your web page, where any values entered into that form could be passed into a connection. As luck would have it :^>, we built a part exactly for this scenario, called the "Form Web Part"! Little fyi: the Form Web Part was actually the very first feature I worked on when I came to MS, so I'm kinda partial to it :)

Quick example: Using a Form Web Part to "search" the Title field of an Announcements List view

1) You can insert a Form Web Part by clicking Data/Insert Web Part, and then from the Web Parts task pane, dragging the Form Web Part into your page. By default, this is what the Form Web Part looks like, a single text box with a "Go" button:

Note: You can add more form controls (including other types of controls) to the part by using the Insert/Form menu, but for this scenario, the default setup will work.

2) Next you need to add a view of the Announcements list to your page. We'll filter this view with the value entered into the Form.

3) You can now right-click anywhere inside the Form Web Part and choose "Web Part Connections...". In the Connections Wizard, hit Next on the first two pages. On the third page, choose the "Announcements" part as your target part. However, unlike in the last example, instead of using "Filter View Using Data Values" as the Target Action, choose "Modify View Using Parameters", and hit Next.

4) Long story short, there are two ways to use Web Part Connections: 1) as show in the previous post, the source part can affect the target using one of the default connection "verbs", e.g. filter the target part, or 2) the source part can just pass a value to the target part, and leave it to the target to do whatever it wants with that value. In this demo, we're using option 2, since we want to have finer control over the type of filtering done in the target part.

The Data View has a default parameter we can use called "Input Parameter. The way to pass the value from the textbox in our form is by choosing "T1" in the left column. You then hit Next.

4) After you hit Finish in the Connections Wizard, there is still one more step remaining. We need to go to the target part, in this case, the view on Announcements and define what to do with the value that comes from the parameter. For our scenario, since we want to Filter the view with the parameter value, select the Announcements view and choose the Data/Filter menu item, which will bring up the Data View filter UI.

For the field name, choose "Title" - for the comparison, you likely want "Contains" - and for the value, we can plug the parameter in here by choosing "[Input Parameter]".

Press OK, and your done! Now, if you browse the page, you should be able to enter a value into the form part and have the view filter to only show values that contain what was typed in the form.

Note: You probably noticed that the view shows no records by default - this is due to the fact that the parameter we're filtering on is blank when the view first loads. One way to work around this is to give the parameter a "default value", which you can do in code view by searching for the following line, and setting the DefaultValue attribute to whatever you'd like the value to initially show.

<udc:ClientParameterBinding Name="filterParam" Location="Postback;Connection" DefaultValue="baz"/>

Using Web Part Connections to build a Master/Detail View

alexma — Mon, 10 Apr 2006 20:22:00 GMT

One of the great new features part of SharePoint v2 is this thing called "Web Part Connections", which allows you to easily have Web Parts communicate with each other, thus adding a level of interactivity to your web applications. In a way, you can think of connections is as a data-driven hyperlink, i.e. clicking the hyperlink will push some data to the second part, which can then consume that data. The most common Connection scenario is to use one part to filter another other one, e.g. imagine having a "master" view, where you can drill from each item to a detail view.

Quick Example: Let's look at what's involved building a master/detail view of a products table. In this example, I'll use Data Views for both my master and detail view, but it should be noted that you can connect different types of parts together too!

Step 1: The first step is to build a simple "master" view showing all the records in my products list

Step 2: Next, on the same page, let's build a "detail" view that shows a single item from the Products list, but with more detail.

Step 3: Once you have your views setup, you can quickly create a connection so that clicking an item in the master will cause the detail view to be filtered to the same item. To do this, right-click the field you want the connection hyperlink on, and choose the "Web Part Connections..." context menu item. This will bring up the Connections wizard.

When setting up a connection, it's easiest to think of the two parts as source and target. The first step is to choose what you want from the source part. 99.9999% of the time, you simply want to grab some values from the source part and pass them along - this is the default option, so you can just click next.

On the next page of the wizard, you get to choose which part to connect to. In the case of this master/detail scenario, I have the "detail" part on the same page, so I can click next again.

Here, we choose the specific part and what we want to do to that part. The default behavior is to filter the target part, which for our scenario is the desired behavior.

The last piece of information required is to choose what field the target part should be filtered to from the source part. Since both parts in this case are on the same list, we can use the ID field, since that is guaranteed to be unique.

That's it! You can now click through and complete the wizard. After you hit "Finish", you'll notice that there is a hyperlink on the original field you selected.

If you browse the page, you'll notice that clicking the hyperlink in the "master" view will cause the "detail" view to filter to the correct item. Sweet :)

How to Create a Data View that Shows a Single Item

alexma — Fri, 31 Mar 2006 03:06:00 GMT

When you first insert a Data View, the default "look" is always a tabular multi-item view; however, it's easy to change this to whatever style you want. We even include a few pre-built styles in the box that you can quickly switch between. To change the style of your view, go to the Data menu and click "Style...". From the "View Styles" dialog that pops up, you can change between a few different styles.

Quick example: One of the more common types of views you'll often want to create is a "single item" item view.

Step 1: Create a tabular Data View that includes the fields you want to end up in the single item view:

Step 2: Click Data/Styles and choose the forth style - repeating form with border. Your view should now look something like this:

Step 3: The last step is to change the view so that it only shows one record. You can do this by clicking Data/Styles again and going to the "Options" tab of the View Styles dialog. At the bottom of the dialog is a section called "record sets", where you can change how many records are shown in your view. For the single item view scenario, we want to "limit the total number of items" to 1.

Voila, you now have a view showing just one item. The only thing left to do is filter the view to the specific item you care about :).

Next time, I'll show you how you can use a feature called "Web Part Connections" to allow users to dynamically filter a single item view from a "master" multi-item view.

Welcome to Office 2007 and SharePoint Designer!

alexma — Sun, 26 Mar 2006 04:06:00 GMT

Now that beta2 of Office is out (grab it here for free!), I think it's a great time for me to switch over from talking about FrontPage 2003 to SharePoint Designer 2007. In case you hadn't heard, a few months back we announced that Office 2007 would include a new product called SharePoint Designer, aimed specifically at enabling rapid application development for the SharePoint platform . SharePoint Designer (SPD) is very much the continuation of what we started with SharePoint app development in FrontPage XP and 2003. SPD takes the best parts of FrontPage and adds a ton of new capabilities to the Data View web part, a cool new "Workflow" designer for adding application logic to your SharePoint site, not to mention great CSS and ASP.net support. Overall, I think this change is great for fans of building apps on SharePoint. Since Microsoft now has a dedicated product, Expression Web Designer, for addressing the needs of web designers, we as the SharePoint Designer team can focus all of our efforts on building the absolute best design tool for SharePoint.

Conditional Image Swapping in a Data View

alexma — Thu, 23 Mar 2006 03:45:00 GMT

One of the cooler uses for Conditional Formatting is to to dynamically swap between a set of icons/images, e.g. imagine a scenario where you want a red, yellow or green light based on how a sales department is tracking to budget. Although it's possible to build this kinda of view with the Conditional Formatting feature, it's a bit of a pain since you not only need to define the conditional to "show content", but also all the conditions when not to show the content. If you are swapping 3 or less images, you can get buy. However, since the number of total conditions grows exponentially with each image, it soon becomes untenable. Fortunately, the Data View is built on XSLT, which has a command exactly for this specific problem, and though we don't have UI to automatically create the right XSLT, it super easy to go into code view and made the change yourself.

Quick Example: Imagine you have a Data View of products, where each product comes from a different county. The default view works, but it's a little on the boring side. It's also difficult to scan and quickly see which products come from which country.

A nice little improvement would be to show the country flag instead of the name of the country.

The first step to building this view is to drag one of the flag images into your view and use "Show Content" Conditional Formatting to only show the flag when it matches the country of origin. In this case, I'll start with the Canadian products.

Next, you need to jump to code view and search for the XSLT that defines this conditional formatting: <xsl:if test="@country = 'Canada'">.

Instead of using <xsl:if>, XSLT supports a tag called <xsl:choose>, which is exactly for the scenario of choosing among multiple options. <xsl:choose> is analogous to the C# Switch construct. To use <xsl:choose>, first wrap the existing <xsl:if> block with an <xsl:choose> tag. Next, change the word if to when,, as shown here:

The last thing to do is add one <xsl:when> block for each of the possible images, like so:

That's it. When you switch back to design view, you should see the following:

Note: you can also finish your choose block with an <xsl:otherwise> block to define an "else" condition, i.e. when no condition matches.

Conditional Formatting Internals

alexma — Thu, 23 Feb 2006 11:15:00 GMT

The inner workings of Conditional Formatting are actually pretty straightforward. The key construct that makes the feature possible is a tag called <xsl:if>, which is used to conditionally add content to the HTML output of the transform.

It's easiest to grok xsl:if with the "show content" type of CondF. Basically, the content you want conditional shown is wrapped in a xsl:if tag, where the test attribute of the tag defines the "condition" to be evaluated. If the condition is true, the content contained within the xsl:if gets output into the resulting HTML. If not true, nothing gets output.
<td>
    <xsl:if test="@Units >= '500'"><img src="Dc39.jpg" width="33" height="29" /></xsl:if>
</td>

For "apply formatting" CondF, the markup is only slightly more complicated. In this case, the xsl:if part remains the same - the only trickiness is that in tis case we want to affect an attribute (style on the parent <td> container), not another tag. One does this by wrapping the xsl:if tag with an xsl:attribute tag. Using the name attribute on the xsl:attribute tag, we can define which attribute the optional content gets added to. In this case, it's the "style" attribute.
<td>
    <xsl:attribute name="style">
        <xsl:if test="@Units >= '500'">background-color: #FFFF00;</xsl:if>
    </xsl:attribute>
</td>

That's pretty much all there is to Conditional Formatting. One of the nice things about understanding the markup is that you can exact "formatting" you desire. Next time, I'll show you how how you can do some more advanced conditional formatting by manually editing the XSLT.

Grokking "Show Visibility" in the Conditional Formatting Task Pane

alexma — Sat, 11 Feb 2006 05:03:00 GMT

Sometimes true Wysiwyg is not what you want in design view. For example, if you are using Conditional Formatting to optionally show content in your view, and your data is such that all records evaluate to false, you end up in a situation where you can no longer select the tag that holds the Conditional Formatting. To address this issue, we build a little feature into the Conditional Formatting task pane called "Set Visibility", which allows you to force the Conditional Formatting "on/off" states, regardless of what the "conditional" evaluates to.

The "Set Visibility" button has three options (note: these are only available if CondF is applied to the view):
1) Default
2) All formatting hidden
3) All formatting visible

When we initially designed the feature, we had it so that "All formatting hidden" was the equivalent of forcing all "conditionals" to evaluate to false, and "All formatting visible" forced everything to evaluate to true. The problem we ran into with this design was that the resulting behavior was a little unexpected, e.g. "All formatting hidden" would cause every "Show Content" Conditional Formatting to disappear, since that's what happens when the conditionalal evaluates to false.

Since we didn't think that was the user's expectation, we changed the design so that "All formatting hidden" showed the view as if no Conditional Formatting had been applied, which translates underneath the covers to forcing "Show Content" CondF's to evaluate to true, and "Hide Content/Apply Formatting" CondF's to evaluate to false.

For the "All formatting visible" option, we left the design of that one alone - underneath the covers, it forces all conditionals to true, which means that the Show/Apply formatting are there for every row, and any content with a Hide on it, will be hidden for every row.

Example: Here's a view with a "Show Content" Conditional Formatting on the image, and "Apply Formatting" CondF on the 2nd column background.

Default view

All formatting hidden

All formatting visible

Interestingly, in the way we implemented the feature, "Set Visibility" options are actually saved into your page, which means that if you preview that page in the browser with a "Set Visibility" command like "All formatting hidden" set, you'll actually see the same thing in browser that FrontPage showed in design view. Arguably, a little weird :).