💡 Sept. Tip => law and order but order first
Or how to display a use case input fields in the right order.
During this month of September 2025, we'll highlight various and interesting aspects of libmodulor
.
Why is it easy to find a book at La Fnac, a phone number in an old school directory or a name in a list ? You named it : order. Things are arranged alphabetically so the mind can easily find them.
That's why libmodulor
enforces a lot this aspect in most of the code.
As an example, the input fields in a use case must be declared from A to Z.
export const SignInUCD: UCDef<SignInInput, SignInOPI0> = {
// ...
io: {
i: {
fields: {
password: {
type: new TPassword({ minLength: 10 }),
},
username: {
type: new TUsername(),
},
},
},
}
// ...
With the use case above, we can quickly see that although it makes sense for the developer, it does not for the user. Indeed, most GUI targets will iterate on the input fields and thus, display something like this :
+----------------------------------+
| Password: [____________________] |
| Username: [____________________] |
+----------------------------------+
| [ Submit ] [ Cancel ] |
+----------------------------------+
This is not "natural" at all. We have never seen a form asking for the password
before the username
.
Let's use the order
property to adjust this :
export const SignInUCD: UCDef<SignInInput, SignInOPI0> = {
// ...
io: {
i: {
fields: {
password: {
type: new TPassword({ minLength: 10 }),
},
username: {
type: new TUsername(),
},
},
// Defining explicitly the order so username comes before password
order: ['username', 'password'],
},
}
// ...
And there we go, we get a more "logical" form :
+----------------------------------+
| Username: [____________________] |
| Password: [____________________] |
+----------------------------------+
| [ Submit ] [ Cancel ] |
+----------------------------------+
Voilà c'est tout.