Customisable pages with member options

Customisable pages with member options

Give your users more control with per-page options.

I recently discovered that you can use a ListUsers module inside a ListPages module if the former is on the page you are selecting in the latter. I’m not sure if I have come across this before; chances are I have, but yesterday I actually had an application for it. Custom options for logged-in users.

With the new set-tags buttons, we can now allow registered users to customise a page. This requires a ListUsers module, containing the options for customisation, and iftags, containing the customisations themselves. While on some pages it might be fine to show the customise options all the time, on others (such as a home page) they are an unnecessary distraction that should be hidden unless the user has clicked through to them. Enter my latest discover.

We can have the customise options in a ListUsers module on a separate page, and select them onto the page to be customised with a ListPages module, only showing the module body when a parameter is passed via the URL (as we did here).

I’ll attempt to explain how this is achieved in the code below, but it might be easier to understand by looking at this example I’ve setup on the home page.

First, the ListPages module that will show our options only if a parameter is passed via the URL. Be careful to choose a different urlAttrPrefix if you've got other instances of specific messaging system on the same page.

[[module ListPages category="inc" tags="_inc-options" limit="@URL|0" urlAttrPrefix="o" separate="no"]]
%%content%%
[!-- ListUsers module will display here --]
[[/module]]

Next, we have the ListUsers module, which contains our set-tags buttons (the ‘options’ users can choose). In the example on this site, I've prettied up the links to make them look like radio fields - this is just done with a bit of padding and a background image.

[[module ListUsers users="."]]
++ Member Options
Hi %%title%%. The following options allow you to customise the appearance of the BMC Creative home page.
[[div class="options-select"]] 
[[iftags -_options-welcome-%%number%%]]
[[button set-tags +_options-welcome-%%number%% text="Show welcome message"]] 
[[span class="options-current"]]Don't show welcome message[[/span]]
[[/iftags]]
[[iftags +_options-welcome-%%number%%]]
[[span class="options-current"]]Show welcome message[[/span]]
[[button set-tags -_options-welcome-%%number%% text="Don't show welcome message"]] 
[[/iftags]]
[[/div]]
[[/module]]

And finally, we have iftags showing the customisations themselves. Remember that we need to have the iftags inside a ListUsers module so that we can select the current users options (with %%number%%).

[[module ListUsers users="."]]
[[iftags +_options-welcome-%%number%%]]
[!-- Customisations here --]
[[/iftags]]
[[/module]]
[[/iftags]]

What customisations to add?

Now the fun part - what sort of customisations can we add to a page, other than simply adjusting the appearance with a CSS module? In the example above, I’ve given users the option to always show a nice welcome message when they visit the home page. On RoaringApps I’m soon going to add an option for members to choose a page to be redirected to when they go to the root URL, bypassing the default homepage. You could also show a list of handy links, or maybe even grab some user-defined content from their per-site user profile. The options are endless. I'd be interested to know if you can think of any uses for this.

Things to consider

While this is a nice solution, it has a couple of caveats that you need to consider.

  • Permissions - currently, the user must have permission to edit the page to be able to update tags, which means the page is liable to abuse. We can reduce the risk of this by using includes, but it’s still not perfect. (Rate up this wish if you’d like more control).
  • Multiple options - each time a user selects an option, the page must reload to update the tags. This could get frustrating if you have a whole list of options, each of which requires a refresh when it is selected. I recommended limiting the number of options to only one or two to avoid annoying the user.

Enjoy the article? Tweet it!

Discussion - No comments yet.

Add a new comment

Site design © BMC WebDesign, 2011. All rights reserved. All tutorials on this site are free for commerical use, subject to conditions outlined in the disclaimer.