While working on a current project, we faced a little issue of deciding how to create "News" easily. Within MOSS2007 you have the ability to create news in different ways. The old fashioned way was to use various lists and use the built in web parts to display them or use the data view web part (DVWP). This way worked well until now, when in MOSS2007 you have the publishing features that allow us to create "News Pages" based on different layouts and then consume them using the Content Query Web Part (CQWP). We decided that the way forward to start with was to use the new inbuilt publishing features for the news. This worked great but almost seemed like an overhead. Having to create a new page for each news article seemed a little too much. Also the users were not 100% happy with the way that they had to choose "Create Page", and then define the layout before they even got to add the content. So we decided to change it and go back to using a list. This has a few advantages to the previous design but the main reason was because the users wanted a nice structured form to fill in, no layouts, and no extra choices. In reality they wanted it nice and simple. So the list was created so when you added a new item it looked as below: (*News taken from BBC website*)

Notice how neat the form is that it is very simple to complete the form. However the flip side to this was that when you viewed the new item it looked as below:

Notice once again the titles of the columns showing. This is great but not really with keeping of the overall design and layout. I decided to fix this by using a Data View Web Part to show the news instead of a Content Query Web Part and created a custom "DispForm.aspx" that took the ID of the list item and rendered it without all the extra columns. This worked well, however it did seem a little "Clunky" and didn't seem to be the correct way of doing it. So back the drawing board again, this time I went back to using page layouts. So this time when creating news you have to select the "Create Page" link from "Site Actions" and then select the page layout.

Once you have completed the details for the initial page creation, you are left with a page that looks as below:

Notice how it doesn't look very pretty and the layout isn't what you would really expect. So after completing the news in this layout we end up with the same news as before looking as below:

The page renders and this time the columns don't show but the layout isn't the best. To fix this issue was very simple we created custom page layouts. This is well documented and the best approach to take. However we did come across an issue that meant we potentially had to go back to the list option. The issue here is that the "Page Layout" once it had been designed looked just like we wanted to when it rendered it to the users, not how the contributors wanted to look like while filling it in. So our next challenge was to somehow create a page layout that looked different depending on whether you were editing it or viewing it. My initial idea was to write something in code, but then I thought maybe we could use some JavaScript to manipulate the page on loading. After a quick chat to a fellow MVP Ben Robb I decided to investigate using CSS to hide or show the relevant panels that I needed. The steps I took are below:

1. Create Custom Page Layout
2. Create "<DIV>" for viewing section
3. Add relevant fields from page columns and content type to viewing section

NOTE: I had not even realised that you can add the "Page Content" control or in fact any of the controls to the page as many times as you want as long as the associated "Fieldname" is correct and the actual ID is changed

1. Create "<DIV>" for editing section
2. Add relevant fields from page columns and content type to editing section – generally more fields in this section
3. Add some CSS tags into the "Editing Panel" to hide the "Viewing" DIV

If I open up the custom page layout within SharePoint Designer you can see that there are two defined area. The top area is for viewing and the bottom area is the editing section. I have changed the background and added a red boxed outline around the editing panel to highlight it.

Within the editing panel I have also added the following:

This code simply uses CSS to hide the top area for viewing, also as it is only ran when the "Edit Panel" loads it only ever hides the "View Panel" when editing the page. When you now edit a news item based on the custom page layout it should render as below (notice how only the edit panel is visible):

Once the page has been re-saved and then published it should then render just the viewing panel as the "Edit Panel" is hidden by default anyway.

As you can see is only a quick demonstration what you can do using a little single CSS Style. For the live solution there is a lot more involved in hiding certain areas as the layouts page also contains web parts that cannot be edited. The key to making this approach work is simply making sure that your mark-up is correct and that it is really valid XHTML. Anyway this helped me so maybe it might be useful to you. J

NOTE: The news has been taken from the BBC News website just for ease and convenience.