Introducing the Pageflow Sample


    Most people think of workflows as a tool to represent and automate back-end business processes. Back-end business processes normally require some user interaction but their main purpose is not to drive the user experience or manage the UI. However, there is a growing type of application that leverages workflow as a tool to drive the user interaction and drive the user experience of an interactive process. This type of technology is called page flow.

    Last year at TechEd, we showed off some bits we had been working on internally that were designed to make that possible, the ability to model the user interaction of an application using workflow. This approach provides developers the ability to continue managing the complexity of their application in a structure and scalable manner. It turned out that the code we showed at TechEd wasn’t going to end up in any of the product releases, so the dev team requested permission to release that code as a sample of how one can implement a generic navigation framework using WF that can support multiple UI technologies (i.e. ASP.NET and WPF).  This year, I just finished giving a talk showing this off and talking about how it will be available today!

    Thanks go to Shelly Guo, the developer and Israel Hilerio, the PM who had worked on this feature, and to Jon Flanders for providing packaging and quality control

    Now for the good stuff, download the bits from here!

    Navigate to setup.exe and run the setup, this will copy the sample projects and the source code for the sample, as well as some new visual studio project templates.

    Now, let’s open up a sample project, so navigate to the samples directory and open the ASPWorkflow sample, this will show off both an ASP.NET Front end as well as a WPF Controller (you can actually use the two together). Let’s get to the good stuff right away, and open up the workflow file.

    Wow… what’s going on here? It kind of looks like a state machine, but not really. What has been done here is to create a new base workflow type. Things like SequentialWorkflow and StateMachineWorkflow aren’t the only ways to write workflows, they are just two common patterns of execution. A NavigatorWorkflow type has been created (and you can inspect the source and the architecture document to see what this does) and a WorkflowDesigner has been created for it as well (again, this source is available as a guide for those of you who are creating your own workflow types).

    Each of the activities you see on the diagram above is an InteractionActivity, representing the interaction between the user (via the UI technology of their choosing) and the process. A nice model is to think of the InteractionActivity as mapping to a page within a UI. The output property is the information that is sent to that page (a list of orders or addresses to display) and the input is the information that is received from the page when the user clicks “submit”. The InteractionActivity is a composite activity, allowing one to place other activities within the activity to be executed when input is received. The interesting property of the InteractionActivity is the Transitions collection. By selecting this and opening its designer, we are presented with the following dialog:

    This allows us to specify n-transitions from this InteractionActivity or “page” to other InteractionActivities. And we can specify this via a WF activity condition. This way, we could forward orders greater than $1000 to a credit verification process, or orders containing fragile goods through a process to obtain insurance from a shipper. What’s cool about this, my page does not know about that process, it just says “GoForward” and my process defines what comes next. This de-couples the pages from the logic of your process.

    We then need to wire things up in config:

    <configSections>
    <section name="NavigationManagerSettings" 
    type="Microsoft.Samples.Workflow.UI.NavigationManagerConfigSection, Microsoft.Samples.Workflow.UI, Version=1.0.0.0, Culture=neutral, PublicKeyToken=40B940EB90393A19"/>
    <section name="AspNavigationSettings" 
    type="Microsoft.Samples.Workflow.UI.Asp.AspNavigationConfigSection, Microsoft.Samples.Workflow.UI, Version=1.0.0.0, Culture=neutral, PublicKeyToken=40B940EB90393A19"/>
    </configSections>
    
    

    <NavigationManagerSettings StartOnDemand="false">
      <Workflow mode="Compiled" value="ASPUIWorkflow.Workflow1, ASPUIWorkflow"/>
      <!--<Workflow mode="XOML" value="WebSite/XAMLWorkflow.xoml" rulesFile="WebSite/XAMLWorkflow.rules" />-->
      <Services>
        <add type="System.Workflow.Runtime.Hosting.DefaultWorkflowCommitWorkBatchService, System.Workflow.Runtime, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
        <add type="System.Workflow.Runtime.Hosting.SqlWorkflowPersistenceService, System.Workflow.Runtime, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" ConnectionString="Initial Catalog=WorkflowStore;Data Source=localhost;Integrated Security=SSPI;" UnloadOnIdle="true"/>
      </Services>
    </NavigationManagerSettings>
    <AspNavigationSettings>
      <PageMappings>
        <add bookmark="Page1" location="/WebSite/Default.aspx"/>
        <add bookmark="Page2" location="/WebSite/Page2.aspx"/>
        <add bookmark="Page3" location="/WebSite/Page3.aspx"/>
        <add bookmark="Page4" location="/WebSite/Page4.aspx"/>
        <add bookmark="Page5" location="/WebSite/Page5.aspx"/>
        <add bookmark="LastPage" location="/WebSite/LastPage.aspx"/>
      </PageMappings>
      <ExceptionMappings>
        <add type="Microsoft.Samples.Workflow.UI.WorkflowNotFoundException" location="/WebSite/ErrorPage.aspx"/>
        <add type="Microsoft.Samples.Workflow.UI.WorkflowCanceledException" location="/WebSite/ErrorPage.aspx"/>
        <add type="System.ArgumentException" location="/WebSite/ErrorPage.aspx"/>
        <add type="System.Security.SecurityException" location="/WebSite/ErrorPage.aspx"/>
      </ExceptionMappings>
    </AspNavigationSettings>
    
    

     

    Finally, let’s look inside an ASP.NET page and see what we need to do to interact with the process:

    AspNetUserInput.GoForward("Submit", userInfo, this.User);

    This code is specifying the action and is submitting a userInfo object (containing various information gathered from the page) to the InteractionActivity (in this case, it submits to the Page2 InteractionActivity). If we look at what we’ve configured as the Input for this InteractionActivity, we see the following, which we can then refer to in the transition rules in order to make decisions about where to go next:

    Plenty of other stuff we could talk about here, support for back button, persistence, etc and I could continue to ramble on about this in another record-length blog post, but I will stop here for now. I will continue to blog about this, look forward to hearing any and all types of feedback, and what you’d be interested in seeing in this. Moving forward, there aren’t any formal plans around this, but if there is enough interest in the community, we could get it created as a project on codeplex. If that sounds intriguing either contact me through this blog, leave a comment so that I can gauge the interest in such a scenario.

    Go, grab the bits!  And, if you have feedback, please contact me.


Comments (40)

  1. For designing and controlling the page flow through an application, Java-based platforms can take advantage

  2. I’m going to be confused. During the last three days we’ve seen: Acropolis : a set of tools to make it

  3. 微軟負責 Workflow Foundation 技術推廣的專家 Matt Winkler,日前在 Matt Winkler’s blog 提供了一套整合 Workflow Foundation 與 ASP.NET

  4. Daniel_Karlsson says:

    Finally access to the stuff =)

  5. S-au intamplat destul de multe in ultima vreme in ceea ce priveste "clientii" Windows: Avem o noua versiune

  6. ericmiles says:

    Awesome presentation yesterday.  Glad you got the bits posted. Look forward to leveraging your teams great work.

  7. Introducing the Pageflow Sample

  8. I couldn’t help but chuckle at the installer for the WF-based ASP.NET Pageflow sample. It first asked

  9. Page Flow WF sample Jon Flandr’s-WCF and WF session at TechEd The Moth–.NET Framework 3.5 Glenn Block

  10. Vibro.NET says:

    The idea of using Windows Workflow foundation for driving the UI behavior of an application is a very

  11. Matt Winkler gave a session this week at TechEd where he described how to use Windows Workflow Foundation

  12. I’ve had a couple of ISVs ask me about a Windows Workflow Foundation page flow session that was delivered

  13. Have you seen all the recent chatter on the MSDN Blogs about ASP.NET Page Flow this past week? The Web Client Software Factory has a Page Flow Application Block that does the same thing and is very, very slick. Read more…

  14. wleong says:

    NavigatorWorkflow looks like a state machine to me.  Why create a new workflow type?

  15. Most people think of workflows as a tool to represent and automate back-end business processes. Back-end

  16. Steven Smith says:

    Matt Winkler posted some very cool stuff regarding using Windows Workflow and ASP.NET on his blog a few

  17. Most people think of workflows as a tool to represent and automate back-end business processes. Back

  18. kexbar says:

    It’s very good idea to do such work! but, how do you block your page flow. i mean, when u finish one step, u mustn’t step down to another, u must "unload" the workflow instance. and then another guy logined to finish next step, how can i carry out this, pls?

  19. So, I got a little bit of feedback from my initial post . First, thanks, it’s great to see all of the

  20. Here’s a comment from my initial post introducing the pageflow sample from wleong: NavigatorWorkflow

  21. kexbar says:

    Eagerly, we hope to c your following wonderful illustrations about your PageFlow invention. OK?

  22. Matt Winkle introduced a sample solution called PageFlow which shows how to implement UI flow using the

  23. sprovencher says:

    Is there a way to continue a PageFlow across Sessions?

  24. Several weeks ago, Matthew Winkler posted about a new sample of how to implement Page Navigation using

  25. Here are some interesting links that I found while catching up on blogs: User Experience: Your Britain

  26. My blog says:

    Introducing the Pageflow Sample

  27. 微軟負責 Workflow Foundation 技術推廣的專家 Matt Winkler,日前在 Matt Winkler&#39;s blog 提供了一套整合 Workflow Foundation

  28. Rudi Grobler says:

    Weird title, I know. It will make sense soon… The last week I had a relative simple project that I

  29. I’ve been having some fun playing around with Visual Studio 2008 and the .NET Framework 3.5, and wanted

  30. wouterc says:

    He Matt,

    Pageflow is a cool thing to work with.

    Is there any sight of getting it on Codeplex?

    BTW I made some changes to the framework which might be useable for other:

    http://conducido.nl/blog/2007/11/29/directly-access-a-webpage-which-is-part-of-the-pageflow-workflow/

    Some other questions are there coming more updates? Further documentation etc etc? Let me know what your plans are with pageflow.

    Kinds Regards Wouter Crooy

  31. tranfamily35 says:

    Does anyone know where can I find the sample code?  I just installed the PageFlowSetup.exe ver 1.1.  I can see the new templates fine.

    Thanks,

  32. saavedrah says:

    Try :

    [Drive:]Program FilesWindows Workflow Foundation SamplesPageFlowSample

    Other question, the sample was installed and compiled, but when I’m trying to run, it is giving an error when connecting to the DB.

    Is any way to disable the connection to the DB?

  33. 微軟負責 Workflow Foundation 技術推廣的專家 Matt Winkler,日前在 Matt Winkler’s blog 提供了一套整合 Workflow Foundation 與&#160;

  34. 微軟負責 Workflow Foundation 技術推廣的專家 Matt Winkler,日前在 Matt Winkler&#39;s blog 提供了一套整合 Workflow Foundation

  35. BenL says:

    This sounds like a really cool idea.  

    It would also be cool if validation rules could be specified for input fields.

    I am super-excited about this idea, it has great potential.  I say "Go for it!".  Put it on Codeplex!

  36. ASP.NET says:

    微軟負責 Workflow Foundation 技術推廣的專家 Matt Winkler,日前在 Matt Winkler&#39;s blog 提供了一套整合 Workflow Foundation

  37. alo says:

    Is there any documentation for the NestedNavigator sample?  I can’t get it to run and I’m not sure what it is supposed to do.

  38. aftabhafeez says:

    Hello,

    I am getting some error to compile NavigatorWork through .net WorkFlowComplier.

    One is Error CS1061: ‘Sample.NV234v0_2’ does not contain a definition for ‘InteractionActivity’ and no extension method ‘InteractionActivity’ accepting a first argument of type ‘Sample.NV234v0_2’ could be found (are you missing a using directive or an assembly reference?) When i used transition between two or more InteractionActivity and with out transition its compiled properly.

    Other is error 348: Compilation failed.

    Type ‘System.Workflow.Activities.SequenceActivity’ in Assembly ‘System.Workflow.Activities,

    Version=3.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35′

    is not marked as serializable when i used transition between any .Net Base Activities.

    Please help me if any one know this issue.

    Thanks in Advance.

  39. Design and Implementation Notes The Seam project describes page flow as "complex user interactions." Microsoft’s Matt Winkler describes pageflow