Flows (and Forms)

An Example

Consider a site which requires an admin system of restricted pages (the access system is described in more detail on the action page). The user's data (very simplistic) will consist of:

Username
Password
data:
- Full name

So a typical data structure used by the login process etc would be:

context://configs/adminUsers.xml

<authentication> <users> <user> <username>hsfr</username> <password>xxxxxxxxxxxxxxxxxxxxxxxxxxxx</password> <data> <fullname>Hugh Field-Richards</fullname> </data> </user> </users> </authentication>

Add User Form

Consider a means of entering a new admin user to an already password protected site. First a simple form is required (the file names are for the test accessible here). I am going to look at just the form not the surrounding content that the example consists of. First in the form we have:

context://documentation/addUserTest.xml

<pf:form id="addUserTestForm" flow="addUserTest" continuation="{flow:continuation.id}" session="{flow:__flowId}"> <pf:label>Enter user's details</pf:label>

where

id (addUserTestForm) — The identity of this form used in referencing it from the CSS file.
flow (addUserTest) — Defines which flow we are using.
continuation ({flow:continuation.id}) — Controls where we are in the flow.
session ({flow:__flowId}) — The current flow session (does not necessarily need login).

The two Paloose variables will need expanding on generation so we will need the PXTemplateTransform for this when we define the sitemap pipeline. Next we define a set of suitable fields for displaying the user entry form:

<pf:input ref="username" class="usernameField"> <pf:label>User name</pf:label> <pf:value>{flow:username}</pf:value> <pf:hint>The user's login username</pf:hint> <pf:violations/> </pf:input> <pf:input ref="fullname" class="fullnameField"> <pf:label>Full name</pf:label> <pf:value>{flow:fullname}</pf:value> <pf:hint>The user's full name (optional)</pf:hint> <pf:violations/> </pf:input> <pf:secret ref="password" class="passwordField"> <pf:label>Password</pf:label> <pf:value>{flow:password}</pf:value> <pf:hint>The user's login password</pf:hint> <pf:violations/> </pf:secret> <pf:secret ref="passwordCheck" class="passwordField"> <pf:label>Check password</pf:label> <pf:value>{flow:passwordCheck}</pf:value> <pf:hint>The user's login password again to confirm</pf:hint> <pf:violations/> </pf:secret>

The value of each one is derived from the flow data ({flow:password} etc.). Finally we define the submit button which transmits the form to the server:

<pf:submit class="button" id="next"> <pf:label>Next</pf:label> <pf:hint>Go to optional details entry</pf:hint> </pf:submit> </pf:form>

class (button) — The class of this control used in referencing it from the CSS file.
id (next) — How the flow script refers to this control.

The next page describes the flow script.