How do I customize the print layout of a SharePoint list item?

Question

i need to be able to produce a "pretty" printout of an individual list item's values, with the goals being:

• get rid of all navigation
• organize data as it would appear on a typical paper form (a customer requirement)

i'm avoiding using InfoPath at this time due to other issues (which i'll post separate questions for...)

for example, i have an individual list item that normally displays similar to the following DispForm.aspx example:

i need a printed version (PrintForm.aspx??) that will display similar to the following example:

from what i can tell, i can't do this just by modifying/creating custom CSS.

it also seems that i can't quite do this just by creating my own "print" version of DispForm.aspx.

any suggestions, ideas, links would be very helpful.

Answer 1

Creating a custom list form is probably what you want. Without the master page attached to it or anything.

You can find a walkthrough here that will get you started:

http://office.microsoft.com/en-us/sharepointdesigner/HA101191111033.aspx

Enjoy.

Answer 2

You could use CSS to hide all the navigation etc. that you don't need using a media="print" stylesheet, but you won't be able to make the exact changes to the layout you've illustrated.

If it doesn't have to be exactly like the example, it would be fairly trivial to hide all but the name->value table and just print that. If you really do need to merge fields and re-layout the table then you likely have to hack up the server-side.

Why can't you create your own version of the page?

Answer 3

Using Sharepoint Designer, you could create a custom aspx page that uses a dataview webpart to do this...

Answer 4

@mortenbpost's link was just what i needed: Create a new page that contains a custom list form

specifically, here's what you need to do to get a "basic" custom page for a list item -- from which you can completely customize it with XHTML/CSS:

first

ensure your list has all the columns you'll need

second

here's how to create a custom "view" page (virtually the same steps can be followed for a custom "new" or custom "edit" page):

1. Open MS Office SharePoint Designer
2. File -> Open Site...
3. enter your web-site URL
4. Make sure the "Folder List" Task Pane is visible (Task Panes -> Folder List)
5. Expand the "Lists" folder
6. You should see entries like the following:

   Announcements
Calendar
   ...
   YOUR LIST NAME
   ...
   

7. Expand the entry with YOUR LIST NAME
8. You should see entries like the following

   Attachments
Items
AllItems.aspx
DispForm.aspx
EditForm.aspx
NewForm.aspx
   

9. Right-Click on YOUR LIST NAME
10. Select New -> ASPX
11. Re-name the file to something meaningful, like: PrintForm.aspx
12. Open PrintForm.aspx
13. View in "Split" mode
14. In the Code pane, you should see your insert-point inside a blank html form
15. Insert -> SharePoint Controls -> Custom List Form...
16. Select YOUR LIST NAME from the first drop-down (List or document library to use for form)
17. Select "Item" from the second drop-down (Content type to use for form)
18. Select "Display item form (used to view list items)" (this is where you choose between view, new, edit)
19. Un-check "Show standard toolbar" when creating a printable form
20. Click OK
21. In the Design pane, you should see a basic table layout with labels on the left and values on the right
22. In the Code pane, you should see such code as the following for every Column in your list (this one's for a "Single line of text" column type):

    <tr>
        <td width="190px" valign="top" class="ms-formlabel">
            <H3 class="ms-standardheader">
                <nobr>Column name</nobr>
            </H3>
        </td>
        <td width="400px" valign="top" class="ms-formbody">
            <xsl:value-of select="@Column_x0020_name"/>
        </td>
    </tr>

23. You can now just take all those <xsl:value-of select="@Column_x0020_name"/> entries and do standard XHTML/CSS layout
24. To test, save your work
25. Then, in a web browser, navigate to your SharePoint web-site
26. Select an item you've already entered data for
27. Choose "View Item"
28. In the address bar, replace DispForm.aspx with PrintForm.aspx

some things to keep in mind:

• spaces and punctuation characters make for annoying naming of Column name
• Column name in the code will have a maximum length of 32 -- any names longer will be truncated, e.g.:

  SharePoint Column name: this is a long name
  becomes in the code: this_x0020_is_x0020_a_x0020_long
  

• any Column name in the code that would be a duplicate will be length 32 plus a numeric suffix. so, given the above column also exists, we would then have e.g.:

  SharePoint Column name: this is a long name also
  becomes in the code: this_x0020_is_x0020_a_x0020_long0
  

• if you add columns or modify columns, you'll have to add them in by hand to this page (do the Insert -> SharePoint Controls -> Custom List Form... on another "dummy" page to get the naming right)

again, i couldn't have done this without @mortenbpost's answer!

Answer 5

*****You can now just take all those entries and do standard XHTML/CSS layout *****

can you expand this with an example on how to do it?

Answer 6

This isn't an answer so much as a note to the above.

Use a custom list form but keep in mind that if any of the columns have versioning turned on you will not be able to get at the "data" easily. For example if one of your colums is a Notes column and everytime someone edits the notes field a new version is appended then none of that is accessible as it's essentially a seperate "list." I'm stuck on this issue as I also have a client asking for a print out which "doesn't look like it's from SharePoint."

Answer 7

Alternatively, you could export to a spreadsheet & print from there.