Cool Solutions

Tweak your landing pages just about any which way without writing a single line of JSP!

ecoiffier

By:

March 22, 2013 2:06 pm

Reads: 1951

Comments:2

Score:0

Do you want the header of a folder element on your landing page to be the title of another landing page, displayed in your colors with rounded corner and have the visitors who click it end up in the other landing page?

AND do you want to list its entries just by titles in an ordered or unordered list, tweaking layout just about any which way?

Or maybe you want to list just the content of these entries, no titles, as a non indented ordered list and …?

Well, SElp_folder_params.jsp will let you slice, dice and splice your folders and entries just about any which way with its 23 parameters and counting.

Your imagination is the limit with this JSP, not Vibe.

This JSP has over 20 parameters, some of which allow style headers, titles, entries, etc., to give you nearly infinite control over the presentation of your folders and entries on a landing page. It even brings back the separating line between entries, if you want one.

Yes, it is not for the faint of heart. But it is for those with a need to express themselves in the layout of their landing pages, needs which go way beyond the “out of the box” and otherwise limited feature set of plain old Vibe landing pages.

Some might call it a bad work around to a much needed presentation control of the layout of landing pages. I call it a handy tool which has saved me lots of time and grief. I’m still learning some of its potential and I wrote the thing!

The comments within the JSP list the parameters with a brief description, so I won’t repeat them here.

You have control over the presentation of the element, the header, the description, the entries, the background, the format, etc. The best way to use this baby is to experiment, in a none public workspace preferably. You will not want to show everything this thing can do without taking a peek for yourself first. After all, this is more of a tool. Just as you can create beautiful art with a chainsaw and a block of ice, you could also end up with a real bloody mess, in all senses of the expression.

This article will give an example, or two, which might give you a good idea of what can be done on landing pages, all without having to write/maintain any JSP. Change a few parameters and you have a new look.

SElp_folder_params.jsp will let you do way too many things to list all possibilities here or even in the comments. So let your imagination run wild, remembering this is uncharted land.

Vertical menu / list

So you want a dynamic vertical menu changing depending on the visitors access rights. This one will be easy with SElp_folder_params, absolutely no programming on your part!

First, create a folder – I usually go for a “blog” (seems to be the default when adding folders).

Name it with the title you would like to show as the menu header on your landing page or maybe not. SElp_folder_params will let you transform the header as a link to an other landing page and use it’s title as the title of this landing page element. More on this a bit further down.

Now create an entry for each menu item. Here, you have two choices. The first, is to use titles of entries in your “menu” to display its content when visitors click on the ‘menu item’. So name entries accordingly. But way cooler, you will display the content (!) as the ‘menu items’ and visitors will be taken just about anywhere in a click!! With this option, which we will use in this example, you can use text, graphics … heck … a tiny video as ‘menu items’. Let your imagination run wild. Oh, don’t forget to set the access rights to your hearts desire … menu will thus be ‘built’ on the fly according to the visitor’s access rights. Cool, enough? Wait, add, delete or modify the entries in your folder and … tada! … the menu changes automagically with not a bit of programming.

OK, so how do you achieve this using SElp_folder_params?

Just add a JSP element to your landing page, associate it to the folder you created above, specify the number of entries to use (sorry) and type the following bit of text as the JSP, assuming JSP is saved in the directory myJSPs under customs_JSP of your Vibe implementation:

myJSPs/SElp_folder_params.jsp?style_Header=rgb(1,156,220)&style_Element=width:200px; height:225px;overflow:auto&style_Background=#B0E0E6&dList=U&style_List=list-style-type:none;margin-left:-35px&dTitle=N 

A quick breakdown of the above shows that you change the Header background color (I allow use of a shortcut), make the menu only 200px wide and 225px high (I know, I don’t pick up the values at the right place, yet) and allow for an overflow (scroll bars) just in case you miscalculated, have a background color for the body (menu itself) and the present the menu as unordered list, ‘none’ style AND no indenting. Oh, very important for the effect, no entry title, thus the menu items are the entry content (description) – text, graphics, whatever … just try to keep it short, it is a “menu”.

Say you want the header to change to the title of an other landing page and have the visitor go to it when clicking this new header title. Just add the following:

&dHeader=@40956

where “40956″ is the binderID of the target landing page.

Or you don’t want a menu header at all? Then replace the above by:

&dHeader=N

Or maybe you want the folder title as the header BUT not allow visitors to click and go directly to it? Then replace with this:

&dheader=n

Or maybe you want to have leading circles for each menu item? Then just change the “none” to a “circle” in the sample “code” above.

Want to see what the result might look like?

Go to http://vibe.csdecso.on.ca. The main landing page, where you landed with the above URL, is using a slight variation to the above to present the vertical menu at the right of the page. The same SElp_folder_params, by the way, is used with different parameters/settings to present most blocks seen on that landing page including the headerless borderless tightly squeezed in theme banner! The latter has:

myJSPs/SElp_folder_params.jsp?style_Mashup=position:relative;top:-10px;left:5px;padding:0px 0px;margin:-10px -5px;border:0px;&style_Element=width:auto; height:auto;overflow:hidden&style_Background=white&dTitle=N&dHeader=N 

for the bulk of the effect. The entry consist of a few ‘html’ tricks to complete the effect. This could be an other article, basically CSS to the table:

<table style="background-image: url(http://vibe.csdecso.on.ca/ssf/s/readFile/folderEntry/31743/8abf80db394294cb0139df101f2e30eb/1348067139000/lastView/Aimer-AP-07.png); width: 100%; background-repeat: no-repeat; background-size: 100% auto; background-clip: border-box; margin: -7px; padding: 0px;" border="0" cellspacing="0" cellpadding="5"> ...

I did say this stuff was not for the faint of heart. Then again, any such effects in just about any CMS systems will require such tweaks as they just can’t allow for every single flavour under or over the sky. Someone will always want that extra little effect …

A tad fancier presentation of a folder and its entries

Ok, so the previous example might be a bit too much for what you want to do. So here is one a bit more down to earth. You just want to change the colors and corners of the folder/entry display on your landing page. Way too easy, especially if you want to use the defaults (color scheme of the school board, which can be replaced without changing the code!)

myJSPs/SElp_folder_params.jsp?style_Element=height:225px; overflow:auto

Will give you a green background header with text in white in a landing page element of 225px high, automatic scroll bars with the entry/entries displayed on a light green background. The whole with rounded corners of .75em.

myJSPs/SElp_folder_params.jsp?sCornerTop=.5em&style_Element=height:225px; overflow:auto&style_Background=#EEFFEE&sCornerBtm=.5em 

changes the roundness of the corners and shows how to change the background color of entries (although shown is the same light green). There is tons of other tweaks which you could do with this JSP. Experiment, discover and use what satisfies your needs. Don’t hold back any longer!

What else?

You should really read the comments in SElp_folder_params.JSP and then just play with the possibilities. There is plenty there to discover and use on your landing pages.

As for the future of SElp_folder_params?

Top of the list, as you can imagine if you use this JSP often while wanting to keep a theme through your landing pages, is to actually refer to an external CSS file. So instead of having to specify the parameters each and every time for every element of a large number of landing pages, you could just refer to a “theme file” of your liking. Kind of expand on the only two build in themes of Vibe – clear and grey. How plain can you get?

I’m looking at adding a parameter (or two) to display the entries in a table format automagically. Like the list, just multiple columns (a table with just enough control of the layout). Why? Say you want to display a dynamic ‘Staff directory’. Just have a folder with entries for each employee, SElp_folder_params could then build the directory on the fly in multiple columns. I will need to add a ‘sort’ parameter as the default for Vibe is by ‘most recently updated’ (arrrrgh!) I did work around this with my SElp_menu-h.jsp with extras to boot. See a previous article for details on that JSP.

An other upcoming parameter, fancier still, will be to have the ‘menu’ like presentation, or multiple column, shown in the landing page element and actually open the entry content, or link content (?), in a neighbouring ‘frame’ of the same landing page! This would avoid having to manage multiple landing pages, each with the same list (menu) but the rest being different depending on which ‘item’ is clicked (ie. avoid landing page swapping and having to manage them). I need to do this way too much manually not to figure an extension to SElp_folder_params. What should be one landing page with a menu and a ‘window’ for content becomes a collection of landing pages.

Did I lose anyone here?

Oh well, this JSP is saving me tons of work. So it’s ok if you don’t see a need for this JSP at your end.

WARNING: I just hate how Vibe exports and imports landing pages. It seems to remember to adjust folder/entry references for every other element BUT the custom JSP even when it controls the respective attribute just as it does for the other elements. Why is that??

Don’t blink: Upcoming JSPs?

I’m working on a ‘upcoming events’ JSP which will display agenda entries from a given date (default being ‘today’, but should be able to specify other key words or an exact date) for the next few days (a number of days with entries and/or up to a given date) with a cap on the number of entries per day (with a ‘more …’ or not). The first cut should be out in ‘a few days’, depending on the rest of my schedule. Seems like a given, but it lacks in Vibe.

Do you hate how Vibe displays the agenda (ex: monthly view limitations)? Well, I’m thinking on a JSP to replace the existing calendar element of Vibe. This one will take some doing … then again, maybe not.

I have a growing list of other planned JSPs. It’s just a question of how bad I need them and how much time I can allocate to their creation.

Do you have any ideas or such JSPs to share? Don’t be afraid to post for all of us or maybe just email me.

NB: Use at your own risk, especially this one where you can do just bout anything all too easily.

VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)

Tags:
Categories: Technical, Vibe

Disclaimer: This content is not supported by Novell. It was contributed by a community member and is published "as is." It seems to have worked for at least one person, and might work for you. But please be sure to test it thoroughly before using it in a production environment.

2 Comments

  1. By:bcnx

    It is a nice tool, given some effort for understanding it correctly.
    One minor remark though: the rounded corners do not function on IE8.

    VN:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)

Comment

RSS