About the book

This is the 9th chapter of the book SharePoint 2010 Workflows in Action. It has been published with the exclusive permission of Manning.Written by: Phil WicklundPages: 400Publisher:ManningISBN-10: 9781935182719

Get 30% discountDotNetSlacker readers can get 30% off the full print book or ebook at www.manning.com using the promo code dns30 at checkout.

ASP.NET forms can be a bit tricky to develop, but they’re easy to deploy. You add the form to a workflow, SharePoint 2010 packages everything up neat and tidy, and all that’s left for you to do is to deploy the project. Once you associate the workflow to a list or initiate the workflow on an item, SharePoint will recognize and use your custom ASP.NET form! The process takes seconds!

Once deployed, you’ll notice that the form is blank. Deployment was easy, but now it’s time to put our developer hat on and add some controls to that form, so users can pass data between the form and the workflow. To illustrate this process, we’ll create a generic initiation form. (Along the way, I’ll point out differences for association forms.)

Getting started

Let’s get started by creating a new sequential workflow project called TestASPNETWorkflowForms. Create a list workflow, and bind it to a list of your choice with the project provisioning wizard. After the project has been created, right-click on Workflow1, and choose Add, New Item. The new item dialog will appear (figure 1). Select a Workflow Initiation Form.

Figure 1: ASP.NET forms are extremely easy to integrate into a Visual Studio workflow. Simply right-click the workflow and add a new item.

After adding the form, SharePoint displays an ASP.NET HTML view of the form (figure 2). This auto-generated form has a button that’s wired and ready to go. To view the code behind the form, right-click it in the Solution Explorer and choose View Code. You’ll notice four auto-generated methods

Page_Load: Use this method to set default values for the fields on your form.

GetInitiationData or GetAssociationData: Our workflow calls this method to retrieve the values the user enters into the form. Simply return a string in this method that contains a serialized class with the form data stored in it. Then, on the workflow side of things, we can deserialze this class and the workflow can do something with the data.

StartWorkflow_Click: Submits the form.

Cancel_Click: Cancels the form

There’s not much to worry about with these methods because they’re complete as is. Usually, you won’t need to alter these methods, but they’re available, if you need to.

Figure 2: The auto-generated ASP.NET form has a button and controls wired and ready to go.

Adding Controls

Return to the ASP.NET HTML view (if necessary), so we can add a few ASP.NET controls. Inside the PlaceHolderMain content placeholder, add a few text boxes. We will use these text boxes to allow the user to enter information. To ship the user input values to the workflow, we’ll use the GetInitiationData method to return a string containing the data. We don’t want to pass just any string, we need a string that represents a serialized class that both the form and the workflow can instantiate and serialize/deserialize. To this purpose, right click Workflow1, choose Add and then select New Item. Choose a class file and then name the class InitiationFormParameters. Make the class public, and add two public strings, one for each parameter in the initiation form.

This code first creates an instance of our class and assigns properties to the user input values stored in the form . Next, it serializes that class into a string with a StringWriter, and then returns that string.

Our workflow calls the GetInitiationData method and loads the string into a property of the OnWorkflowActiviated activity called InitializationData (or AssociationData). Next, we must deserialize the stored string in InitializationData into a class the workflow can use. To do so, right-click the OnWorkflowActivated activity and choose Generate Handlers. Then, replace the onWorkflowActivated1_Invoked method with the code in Listing 2.

This code retrieves the user input data so the workflow can then perform some action on that data. The first thing we want to do is read the string out of the InitiationData property (or AssociationData) into an XmlTextReader. Then, we want to deserialize that XML into a new object that is the same type the string was serialized into (in this case the InitiationFormParameters object). After we have our object, we can start assigning some global variables or take other actions.

Our last step is to make sure everything is working, so add a LogToHistoryListActivity activity below the OnWorkflowActivated activity. We can use this history logger to render our form values on the workflow status page. After the LogToHistoryActivity activity is added, right-click it and choose Generate handlers. In the method that was generated, add the following code to display the user input values:

With this activity logging our form parameters, we can start testing. First, build and deploy the project. If you hadn’t already associated the workflow to a list, do so now. Otherwise, start the workflow on an item in the list. You should see our custom ASP.NET initiation form shown in figure 3.

Figure 3: Our initiation form will prompt the user for pertinent information when the workflow starts.

Enter some values and submit the form. The form will display a status of completed. Click the status column to view the workflow status page. Figure 4 shows the workflow history, with the user input values.

Figure 4: You can tell that the code ran correctly because the values you entered via the form are displayed on the workflow status page.

Have you ever come across a requirement where you have to create web content that is accessible to people with disabilities? If yes, then you may find this article useful, if not, then the article will help you understand why your websites need to be accessible and how to go about making them accessible. Lets us understand the importance of accessibility and see how to get that in our websites.

Accessibility is a vast topic and there are many aspects to be considered while creating an accessible website. In this article, I have tried to touch upon some important points to be considered while making you website accessible.

What is website accessibility?

There are many definitions of web accessibility. I find this definition simple to understand – ‘a practice to make websites usable to people of all abilities and disabilities’. People with disabilities may be visually impaired so may not be able to see your pages or hearing impaired will not be able to listen to your podcasts or those who are immobile may not be able to use their mouse or keyboard.

When you design a website, you need to consider making your website accessible to all the users especially those with disabilities, so that they can understand and interact with the web.

How to create accessible websites?

To create an accessible website, means to create web content that is accessible for all type of users. First you create the web content and then you test it for accessibility. For better understanding, I have divided this topic into two parts. In this article (Part I) I will show you how to make you content accessible and in the next part of the article, we will see how to check the content for accessibility.

To make you content accessible, follow these tips:

Setting accessibility properties for an image

Whenever you insert an image in your web page, Expression Web prompts you with an Accessibility Properties dialog box as shown below:

Alternate text or alt text is a textual alternative to the image which makes it accessible to the screen reader users. Another usage of alternate text is, if an image is being downloaded on the page or when image cannot be found and user hovers over the placeholder of the image, a small piece of text would explain what the image is about.

This Accessibility Properties dialog box is prompted every time you insert an image on your page, unless you uncheck the option ‘ Show this prompt when inserting images’ (see image above). On the other hand, to add an alternate text to an existing image, you can double click the image in Design view and in the Picture Properties dialog box (shown below) and in the Accessibility section, insert the Alternate text.

Alternatively, you can always set the alt attribute of the <img> tag to describe the image. And similarly, add an alt attribute to any animations on your page.

Setting accessibility properties for text hyperlinks and hotspots

Text Hyperlinks:

a.Select the text you want to convert into a hyperlink and right click on it.

b.From the menu choose Hyperlink…

c.In the Insert Hyperlink dialog box, click on ScreenTip…

d.Enter the ScreenTip text which acts like the alternate text. This will add a title attribute to the <a> tag.

In addition to above, Hyperlink text should be short meaningful and should make sense when read out of context, either particularly that link or along with other links.

Image maps:

Just as you add screen tips to text hyperlinks to make them accessible, use them to make the hotspots accessible too. Follow these steps:

a.Insert the image onto your web page.

b.In the Pictures toolbar (if not visible, right click on any toolbar and choose Pictures from the menu) choose rectangular or circular hotspot.

c.Draw a hotspot on the image.

d.The Insert Hyperlink dialog box pops up as shown above.

e.Click on the ScreenTip… button to insert the screen tip. This will add a title attribute to the <area> tag.

Creating accessible Tables

Though tables can be used in page layouts, they are best used to organize data. CSS should be used for Page layouts and styles.

NOTE: Expression Web has a set of layout tables that you can use to create page layouts. Using them is quite simple.

Have you ever come across a requirement where you have to create web content that is accessible to people with disabilities? If yes, then you may find this article useful, if not, then the article will help you understand why your websites need to be accessible and how to go about making them accessible. Lets us understand the importance of accessibility and see how to get that in our websites.

Accessibility is a vast topic and there are many aspects to be considered while creating an accessible website. In this article, I have tried to touch upon some important points to be considered while making you website accessible.

Image maps:

Just as you add screen tips to text hyperlinks to make them accessible, use them to make the hotspots accessible too. Follow these steps:

a.Insert the image onto your web page.

b.In the Pictures toolbar (if not visible, right click on any toolbar and choose Pictures from the menu) choose rectangular or circular hotspot.

c.Draw a hotspot on the image.

d.The Insert Hyperlink dialog box pops up as shown above.

e.Click on the ScreenTip… button to insert the screen tip. This will add a title attribute to the <area> tag.

Creating accessible Tables

Though tables can be used in page layouts, they are best used to organize data. CSS should be used for Page layouts and styles.

NOTE: Expression Web has a set of layout tables that you can use to create page layouts. Using them is quite simple.

Table accessibility is all about adding appropriate headers to data tables. Header tags solve the purpose. Header tags <th> should be descriptive enough to describe what the table is about. Table headers are recognized by most of the browsers and rendered as bold and centered. These cause them to be visually effective to the users.

NOTE: TableHeaders should be used only for data tables and not for layouts.

To create table headers follow these steps:

a.After inserting a table, choose a cell and right click.

b.Choose Cell Properties to open the Cell Properties dialog box.

c.Check the box ‘Header cell’ and click OK.

d.This will convert the <td> tags to <th> tags.

e.Enter a table header.

Creating accessible Forms

Forms are extensively used by websites either as contact forms, search forms; online shopping websites have forms to buy products, or airline booking forms and such other. Accessibility in forms is an extensive area in itself as forms are not very simple to navigate for people with disabilities. I will cover Form accessibility in detail in one of my future articles, however over here I will give you some tips you may find useful in order to make your forms accessible.

1.Labels: Labels are used to assign a label to any form control. Use the ‘for’ attribute to specify which form control is it associated with and ‘id’ attribute to assign a unique id. Make sure labels are close to the form elements.

2.Text fields and areas: It is very difficult for blind users to interpret what to enter in a text field/area. So enter a label for the text fields.

3.Radio buttons and Checkboxes: They are similar to the text fields but the text is displayed on the right hand side. A common example for radio button would be gender. You could use a group box for such examples to group the options to be chosen in a section. Group box is explained further in this list.

4.Input buttons: Input buttons could be a normal button, submit button or reset button. The value attribute for these buttons is important so that when a user hits the tab key to get to this button, when it gets focus, it will be highlighted with a dotted border. In case of a user using a screen reader or a talking browser, it announces the text on the button.

5.Image buttons: Enter an alt attribute for the image button.

6.Group box: A group box enters a set of <fieldset> and <legend> tags. See the code below:

<fieldset name=”Group1″>

<legend>Group box</legend>

</fieldset>

Fieldsets: The fieldset tag helps to group form elements such as address line 1, address line 2 and address line 3. The fieldset tag draws a box around its containing elements and groups them.

Legend tag: is used along with the <fieldset> tag to add a title to the element group and place it within the frame.

7.Select menus or Drop down boxes: The <select> tag allows you to group choices, a drop down. Provide an appropriate label to it.

Creating accessible Frames

Frames are used to display two or more web pages in a single visual space. To be able to make these frames accessible, add a title to each frame. This will help the screen reader users to listen to the title of each of these frames, helping them to know what each frame displays.

The content in the <noframes> tag should be always available to the users. You can use the <noframes> tag to tell the users what is being displayed in the frames and also give them links to the individual pages displayed in frames, in case they want to visit.

Conclusion

Accessibility is a vast topic and there are many aspects to be considered while creating an accessible website. In this article, I have tried to touch upon some important points to be considered while making you website accessible. I hope the article was helpful to you. In the next article we will check the accessibility of the websites using the Accessibility Checker feature available in Expression Web.