Add a FitlerBuilder Control to an ActivitySettingsPart - Part 1

I've had a few requests to post more examples on making cool workflow interfaces inside ILM 2 with the ActivitySettingsPart. I thought I'd start with one of the best interface features of ILM 2 (IMHO), and show you how to add a FitlerBuilder control to a custom workflow activity.

Once again, I'll use the Ensynch Diagnostic Activity as a starting point, so if you'd like to follow along, please download this handle little guy and make sure it builds, installs, and shows up correctly. I'll show you a few screen shots of the interface along the way to emphasize some important points. Keep in mind that I'm still running RC0, and this stuff is subject to change.

As promised, here's the first screen shot. This is what your diagnostic activity should look like before we begin (without the background image, of course).



Okay, now let's edit the ActivitySettingsPart. Open the EnsynchDiagnosticActivityUI.cs file (our derived class), and add the FilterBuilder as a class member at the very top of the class.

class EnsynchDianosticActivityUI : ActivitySettingsPart
{
    private FilterBuilder filterBuilder;
    ...

You should notice that the FilterBuilder resolves correctly (light-blue color). This is because we already have a reference to the
Microsoft.IdentityManagement.WebUI.Controls namespace.

Next, let's visit the InitializeControls method and add the FilterBuilder to the very end.

// Create the table row and cell
TableRow tableRow = new TableRow();
TableCell tableCell = new TableCell();
// Let the FilterBuilder extend across the entire table width
tableCell.ColumnSpan = 2;
// Instantiate the FilterBuilder; nothing to it!
filterBuilder = new FilterBuilder();
// Embed the FilterBuilder into DIV tag to assign CSS
Panel filterBuilderPanel = new Panel();
// CSS is built into the DLL, but we'll have to use a workaround
filterBuilderPanel.CssClass = "uocFilterBuilder";
// Finally, wire it all together
filterBuilderPanel.Controls.Add(filterBuilder);
tableCell.Controls.Add(filterBuilderPanel);
tableRow.Cells.Add(tableCell);
child.Rows.Add(tableRow);

At this point, you can rebuild and redeploy the project. Now your activity should look like so:



Are you thinking what I'm thinking? This doesn't exactly look like the FilterBuilder that you see everywhere else in the ILM 2 portal. What happened to the CSS? Well, you may have noticed that we didn't reference the CSS anywhere in the code. Reason being, our controls are loaded asynchronously, after all the CSS has already been loaded. Even though we may be able to point to the CSS file in the Microsoft.IdentityManagement.WebUI.Controls.dll library, we can't tell the page to load it from our ActivitySettingsPart. Luckily, there's at least one workaround (I would gladly like to hear other ideas).

If you're running Red Gate's .NET Reflector, you can easily find the CSS file in the library I just mentioned. But don't worry, I'll provide it for you in its entirety below. The workaround is to copy the contents of the FilterBuilder.css file into the SharePoint Core.css file, as I describe in this post.

Now run iisreset, and check out the workflow again. Much better!



Sorry to cut this short, but I'll have to wait until next time to show you how to finish wiring the FilterBuilder into the ActivitySettingsPart. Stay tuned...

Update: Part 2 is complete!