So you want your own Document Overview page — Part One
What started as simply adding a pulse feed to a document overview page has started a thought process to ‘enhance’ the design of the document overview pages. But we cant just go in blind for this to work, I need to be doing this for a reason.
So what needs to change on the Document Overview Page
Now ‘wrong’ is a strong word, but the there are a number of elements that I would change on the document page. This is not to say that the way OT has designed this page is wrong, I am merely offering a different approach based upon my own experiences. So on the list of changes to make we will include:
- Removing the nested tables from design, in early work I found that I reduced the size of the file from 15k to 10k. This may not seem like a lot but when users are access hundreds of thousands of documents it will quickly add up and will hopefully make the viewing experience a quicker one
- The Document Name is listed twice in the top left hand corner, at the moment I am in two minds whether we should leave this or remove it.
- On information which is found in the general tab is displayed, which in a greater context does not give you a proper overview of the document. Ideally you would include RM and Category detail into this page.
- On the right hand side are the main document actions for this page, most English readers read a page from Top-Left to Bottom-Right. These controls will be relocated to make them more obvious.
- And finally because we are adding more information to this page we have to be mindful of how we display this information, I am not looking to design a solution that will make the page un-usable because of too much content.
The important thing to recognise here is that we are attempting to make the document overview page just that…..a page which will display a complete overview of the document.
Pre Plan
Now the way I work I tend to prefer getting what I think the design should look like on paper. It doesn't have to be detailed but it will give you a guide to what you want to head to as well as give you a few tips as to what content you need to gather together.
Skeletons
Now that we have a direction for this design, my next step is to cut some HTML. Once again I look for the simplest way to do this. This means:
- No styles are being applied
- Semantic HTML with content sections collected within DIV tags. The main gripe that I have with the Content Server layout is that is still relies heavily on nested tables and spacer gifs to achieve its layout. In my mind this is not semantic HTML, tables should only be used to store tabular data (in this case we would store category information and record information within tables).
- No Web Lingo at this stage (we are trying to make this as simple as possible).
Using this approach I can settle in my mind what content should go in and scope out the challenges ahead.
With my style created Document Overview Page Skeleton I now know that I will need to add the following information:
- Mime Type
- Document Size
- Rating
- Edit/Open/Download links
- Add Version
- Notifications
- Properties
- Document Name
- Last Modified
- Last version added
- Last accessed
- Document Description
- Category Used
- Category information
- RM Classification applied
- Records Officer
- RM status
- File Number
- RSI
- Pulse Feed
Now this is a long list of things, and some of this information we will be able to lift from the OT’s original document overview page and my previous post concerning the Pulse feed but it is an exhaustive list that will take a little time to find.
Creating your blank canvas
Now that we have our blank document we can building some functionality into it as well as style the page. Functionality wise, I am only reproducing the functions that are already within the document overview page (including the pulse feed we have just added). There will be a separate and more exhaustive set of work to put the functionality into this (that will form part two of this post).
First thing to do is to back up the overview page as it is, what I did before we back this up was to take a screen shot of the page. I am a visual person and it allows me to ensure that all the features we put into this page match that of the original.
When backing up your overview.html page, be sure to stop the servers and make a backup (it is just a little safer). Once backed up we need to now replace out the overview page with our copy and restart the Content Server services. Now you will see when you go to the document overview will just display the static HTML.
Now that we need to create a location in the support directory where we still store any new images we use as well as the css we intend to use.
The temptation at this point would be to put the blank document into place and start adding the weblingo in. However since this is my first real fray into the weblingo world I will stick with my strengths which is HTML and CSS. So let’s add some style shall we.
Now that we have set this up, we need to fire up a text editor (like Notepad++) and open both the new and original overview.html. The next step is to read through the file pick out the bits of functionality that are running the overview pages. For my the best place to start is by firstly copying the header variables on the page.
;Assoc data = .fResponse.data
;String htmlPrefix = .HTMLPrefix()
;DAPINODE node = .fRequest.node
;Boolean noFunctionPopup = $WebLL.WebUtils.NoFunctionPopup( .fRequest, .fPrgCtx )
;String supportPrefix = .Img()
;String webDocSupportPrefix = .ModImg( “webdoc” )
;String overviewSupportPrefix = webDocSupportPrefix + “overview/”
;String mailTo = “mailto:?”
;Assoc versionInfo = data.versionInfo
;Object webNode = .fRequest.webNode
;Object addVersion = webNode.Cmd( “addversion” )
;Object download = webNode.Cmd( “download” )
;Object edit = data.editInfo.cmd
;Object fetch = webNode.Cmd( “fetch” )
;Object properties = webNode.Cmd( “properties” )
;Object setNotification = webNode.Cmd( “setnotification” )
;Object versionsInfo = webNode.Cmd( “versions”, “info” )
;Record webNodeRec = data.webNodeRec
;if ( System.MultiByte() );mailTo = Str.Format( “%1body=%2”, mailTo, Web.Escape( data.emailUrl ) )
;else
;mailTo = Str.Format( “%1subject=%2&body=”%2"%3%4", mailTo, Web.Escape( node.pName ), [Nickname_HTMLLabel.Emailbody], Web.Escape( data.emailUrl ) )
;end
These variables are used throughout the overview page so it is good to have them there otherwise you will send CS into fits. Now this is by now means an easy task, you will quickly see that the content is deeply intertwined with the HTML and you will see a lot of nested table action going on….ultimately it is time to queue the music and hack your way through it. Ultimately I ended up with this.
When reloading your document overview page it will display something like this:
It is worth noting that the simple act of stripping out the next tables from the page reduces the page size by about 5Kb. Now it may not seem like a lot of information, but if you have a large user base that is accessing this page for thousands or even millions of documents, it makes a difference.
A dash of color
We should now a have everything displaying (even in raw text form) document overview page. we can now start creating some styles. Now how you style your HTML is a subjective thing, but I wanted to respect the styles already existing within CS10 as much as possible, I would rather have a situation where people didn’t notice that I made the change.
These changes where made using css and Google Chrome 6 to inspect the elements and CSS styles that CS 10 uses. Javascript was used to show and hide the elements on the screen so users should now need to scroll, as far as affecting the browser compatibility on the browser side these changes working in IE 8, FF 4, and Google Chrome 6.
Now if you were only choosing to find a way to cleanly add the pulse feed to the document overview page you could use this technique with great effect. However we have only really reached halfway as we need to add the category, RM details and finally the document preview to this page…..for now it is time to fire up builder.
Originally published at anvilation.com on January 20, 2011.
