Current version : 0.21.0
Made in 🇫🇷 ◌ GitHubNPM

💡 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.