Home › Blogs › gskinner's blog

Adding a channel list (version 1) to the title bar as a menu item

Fri, 2007-12-21 14:25 — gskinner
0
No votes yet

Ok, here comes my first blog entry.

With our upcoming migration to Luminis IV, I really wanted to reinvent some of the layout features found in the portal. I didn't want people to suffer through an upgrade, and then go "what was the point of upgrading". So I'm sneaking some of my own mods in to smooth over the upgrade and hopefully wow people. Here's what I have planned so far.

1. Channel List in the title bar
2. Drag and Drop channels (about 80% done, anyone know in Lum IV how to grab a column id from the main screen. I hate empty columns!!) Ok, sorry for my rant.
3. MyNotes Ajaxian channel (still have a ways to go)

So today I wanted to talk about the channel list. Here's my vision. I loved UVic's Channel List Channel Click here for that article It's a very valuable feature and I wanted it on every tab for people to use. So I figured out a way to place it in the top nav. NOTE: this code will work for any channel out there. I'm interested to hear other possible nav additions.

I'm attaching a screenshot for everyone to see of what I have...

Ok, here are the meat and potatoes of the code:

First off, I did this in Luminis IV. I haven't tried it in Lum III. I'm using a custom "brownyellow" theme that I built off of the xp theme that shps with Luminis IV. I'm 99% pretty sure for what I'm doing that the "xp theme" would be the same as the "classic" theme. Sungard (or was it uPortal) thank you for custom themes!!! With this mod sitting in the custom theme, a patch shouldn't blow it away.

The real valuable code call is this

<channel fname="channellist"/>
"channellist" is my functional name for the UVic channel. Change the name to any other channel functional name and it will display.

Here's everything I did as far as the code and the styling

custom.xsl: (Immediately following the "td app_divider.gif image /td" used as a separator following the $mngLinks )

*** I'm attaching my code (code.txt) as I had trouble posting it ***

I also added a little bit of javascript to hide and unhide the channel content

*** I'm attaching my code (code.txt) as I had trouble posting it ***

You will also need to add a bit of css to the custom.css file

#hiddenlist {
display: none;
position: absolute;
background: white;
}

Keep in mind that I used an image to get the ball rolling (kind of like a windows "start" button feel). However this could easily be done with a link.

I hope that I explained it well enough to everyone. Once I get drag and drop working 100%, I think I might expand the UVic channel to incorporate drag n drop. It would be so nice to drag a channel from the menu and drop it right in your layout.

Comments

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.
Fri, 2007-12-21 19:37 — webmonkey

Our Concept around Drag and Drop and the Channel List

Here is what we were going to work towards regarding the drag and drop and the channel list.

The channel list would exist in the default layout, maybe like you have it, or maybe expanding from the left side, or something of that sort.

When you click on a channel it would come up in a light box
The lightboxed channel would have the option of "Add to this Tab". So the user can either use the channel, or just add it to the tab they are on. The channel would add to the Top left of the tab (you could always drag it around after). We tried doing all of this with drag and drop and the such but it was too much with the preview, and the use the channel without adding it and the adding it to the tab using d&d.

We were also looking at changing the focus option to come up in a light box all the time.

We will be attempting all of this some time in the future. Like many people we are going to do this using jQuery exclusively. If a user does not have a jQuery capable browser they would just get the Default Luminis functionality. Thats good for Mobile browsers and the such.

Cheers

Dave Wolowicz

Thu, 2007-12-27 13:18 — gskinner

Thanks for the info

Hey Dave, thanks for the info. Drag and Drop has been a little bit of a pain with Luminis IV, so I thought I might throw my two cents in to see it might help.

Problem 1: The "Content/Layout" channel doesn't seem to be initialized at login with Lum IV. Drag and drop wasn't working for me at first, unless I manually went to the "Content/Layout" link, then came back. To get around this, I added an "Enable Drag & Drop" Link up by the "Content/Layout" link. This "Enable Drag & Drop" link calls behind the scenes to this url

"/render.userLayoutRootNode.target.ctf10.uP?uP_fname=portal/userpreferences/dlm&uP_tparam=frm&frm="

I start with my channels locked until the link is clicked. I also put a cookie in to remember if that link has been clicked so I only have to click on it once per session, instead of once per page. I also stripped down some of the lightbox code to have the user wait until that channel initialization is done. (btw, I'd love to see the lightbox preview of channels you were working on).

Problem 2: I haven't been able to drag a channel to an empty column. It's not that I can't get the drag and drop code to work, but instead I don't know what the column id is (so I have no way to save it). It looks like in Lum IV (not sure about Lum III) that when moving a channel to a column with an existing channel, you can simply say place before/after the existing channel. However if it is an empty column, you need to tell it the column id. I haven't been able to pull this information. The "Content/Layout" screen somehow references the column id's, but I haven't figured out how to yet...