So, you want some details? First, here's what we're looking to create. It's a modified version of dispform.aspx. The list item actually has about a dozen fields, but the only ones I'm interested in displaying are the four you see at the top, as well as displaying the related video.
To start, I created a new form and applied the dispform formatting to it--don't just modify the existing dispform.aspx, or you're asking for trouble. There's plenty of resources telling you how to do this; just google sharepoint designer new dispform.
If you're familiar with the way dispform.aspx works, you might notice something strange about my page design. If you're not, here's the simple version; the fields at the top of the window and the "Created" and "Last Modified" fields at the bottom (as well as both "Close" buttons" are actually all part of one data view. I wanted to throw my custom content right in the middle, but I don't know how to (or even if you can) break that view up.
So, I did the next best thing. First, I put in a single row, two column table at the very bottom of the page. This was easiest to do in Code view, by just typing the table code in between the "" tag and the tag. For my purposes, I made the table width 100%, and the width of the first column 60% (but your formatting may demand something else--or maybe even more or fewer columns; you'll see why below). Then, I copied the entire WebPartPages:DataFormWebPart tag (basically 99% of the file) to the clipboard, and pasted it *after* my new table, but before the final tag. So, I just duplicated my Data View of the list item.
Now, if you switch back to Design view, you'll see the list item duplicated (along with Close buttons, created and modified information, etc) with a small table in between. But we're not done with the duplication yet. If you save the file and attempt to browse to it on your Sharepoint site, it'll blow up. Each item on a page requires a unique GUID, and while Sharepoint Designer will render the content, Sharepoint cannot.
So, we need a new GUID. Again, there's plenty of online tools to generate them for you. Find the "id" parameter in your second (pasted) WebPartPages:DataFormWebPart tag (the value starts with "g_"), and put your new GUID in that field. Note how it needs to be formatted, with a leading g_ and the dashes replaced by underscores. Then about two lines below that for "SharePoint:SPDataSource" and change it's id (this one isn't a guid; it's just text) by adding a "1" and the end of it.
Now we need to get rid of some of the duplicate data. Since I didn't want to display any of the field values in the bottom "copy", I just selected the table that all of the values were in and deleted it. You may want to just hide it instead, which is what I did with everything else I didn't want to show up.
To hide something on the page (make it so Sharepoint doesn't render it in the browser), you either set it to Visible=False (for those tags that support it), or you change it's style. Most everything here is in a table, so the style method is easiest. To hide a certain field from displaying, select the row it's in (don't forget about the tag chain above your page in Sharepoint Designer--just select your field and use the chain to work your way up to selecting the row), and change it's style property to "display=none". Just do this for everything you don't want to display (or display twice).
At this point, we haven't even touched video, but we're ready. My page required the video and "related links" be inserted. The related links (named "External Resources" on the example above) is a simple data view web part. In fact, the video is a data view web part as well. I brought up the Web Parts task pane and inserted new web part zones into each of the cells of the table I created at the beginning of this post. I created my data view web part for the links following the instructions in the link I posted yesterday. I just stopped after creating the filter, because I wanted this one to be a data table.
I created another data view web part in the other web part zone, again, following the same instructions. But this time I needed the XSL for changing it from an HTML table to an embedded video player. Getting the XSL to work was difficult, to say the least, and since this is getting SOOO long, I'm going to explain why in my next post. Instead of explaining the XSL here, I'm just going to give it to you straight up. The only thing that should be in any way custom to this is the field I store the Video URL in; the video URL is stored in a column called (ironically) "Video URL". This URL can be any valid URL that points to a Windows Media file. Changing it to support Youtube would be pretty straight forward, and I'll talk more on that later. But for now, here's the XSL file--just copy it and paste it into a new file in your Sharepoint site, and follow Greg Chan's instructions on pointing your data view to it. With this you don't need to worry about anything that he says in regards to modifying the XSL for the data view part--basically just create the data view so that it returns the record (in a table) that you want, and then change it's XSL template in it's properties.
(I'm having trouble getting the XSL file to upload; I'll include it in the next post)
No comments:
Post a Comment