Enhancing the pagepath field

Enhancing the pagepath field

Increase the usability of the pagepath data form field with a little bit of CSS trickery.

When I first started using the pagepath field in Wikidot data forms not all that long ago, I could not for the life of me figure out how it worked. I would enter a new name in the field and save the form - but where was that name I just entered? It was nowhere to be seen. Editing the form would confirm that it had not been saved - but why not? I'm sure I entered it.

The trick, of course, is to press the enter key after inputting the new page name. However, as far as I am aware, this is not documented anywhere. If I couldn't work it out, given I'm rather literate with the Wikidot way of life, what chance does an anonymous visitor have of knowing what to do when faced with the pagepath field. Enter CSS to the rescue.

A little bit of fiddling around with the CSS and I came up with the following enhancement, which attempts to improve the user interface of the pagepath field.

/* Add hint about creating new pages */
.field-fieldName .dataform-pagepath-chooser span a:after {
    content: ' Enter new page name, then press enter.';
    color: #222;
}
.field-fieldName .dataform-pagepath-chooser span a:hover {
    text-decoration: none;
    color: #7fb511;
}

The trick is to use CSS generated content (via the :after pseudo class on the close link) to display a short hint about how to use the field. Changing the colour makes it look less like a link and more like normal text (even though it is still a link).

The result? See below for a screenshot, or head over to RoaringApps to see a working demo on the developer field.

Before:
Pagepath field before
After:
Pagepath field after

Another improvement aims to restrict the field to a single level only (i.e. only one select box to choose from), by declaring display:none on either the second span element (which will also remove the 'Creating…' message when a new page is being created) or the second select box (which will leave behind the slash after the first select box). It's up to you which you would prefer.

/* Remove second select box */
.field-fieldName .dataform-pagepath-chooser span span {display: none;}
/* Remove second select box */
.field-fieldName .dataform-pagepath-chooser span select {display: none;}

Discussion - 5 comments

Ed Johnson avatar

AnonymousEd Johnson 06 Feb 2011 03:08

Nice work! Unless or until Wikidot grants a wish or two related to data forms and pagepath, these tips will be very useful.

Edit

James Kanjo avatar

AnonymousJames Kanjo 06 Feb 2011 10:16

Very good!

Mind you, your whole blog is a UI improvement of Wikidot :)

Edit

RobElliott avatar

RobElliottAnonymousRobElliott 18 Dec 2011 15:13

The trick, of course, is to press the enter key after inputting the new page name. However, as far as I am aware, this is not documented anywhere.

This is now included in the revised dataform documentation.

Edit

RobElliott avatar

RobElliottAnonymousRobElliott 18 Dec 2011 15:55

A little but of fiddling around with the CSS and I came up with the following enhancement, which attempts to improve the user interface of the pagepath field.

A simple static field in the dataform would have achieved the same thing::

originhint:
  type: static
  value: After you selecr or enter your value you must press Enter

Another improvement aims to restrict the field to a single level only

That's useful, thanks.

Edit

bcammo avatar

Anonymousbcammo 19 Dec 2011 05:15

This is now included in the revised dataform documentation.

Nice job on the new docs Rob :)

Edit

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.