{ "id": "F01", "title": "Standard form", "topic": "forms", "use": "Our forms follow a twelve-column grid. Every form has buttons that complete the entry or discard it.", "decisions": [ "Up to one or two screen heights a form is this pattern; above that it is F02 with its navigation aid: the height is what the user scrolls, and twelve fields with long labels and hints are taller than twenty short ones.", "The rows sit on the twelve-column grid, and the fields size themselves in steps on the form's own width: on a narrow form short fields widen to half a row, and no row holds more than two.", "Creating and editing are one pattern, not two: the same sections, rows and columns, so whoever created the record finds every field in the same place when editing it. They differ in four things — the start (empty or filled), the closing label (Create client or Save changes), what a discard protects (the entries, or the changes it names), and the way back (to the list, or to the record).", "The closing actions sit in a toolbar that holds at the top while the form scrolls, so they stay in reach however far down the user is.", "The closing actions are disabled until a value differs from where the form started, and again once that value is typed back: the buttons show whether there is anything to save, and while they are disabled an ed-tooltip on each says why: Nothing has changed. The tooltips stand outside the bar, since in the action slot they would count as actions.", "Saving checks the required fields only when pressed: the first missing field says what is missing and takes the focus, and nothing is saved.", "Discarding asks first in a warning dialog that names what is lost — the changed fields when editing, the entries when creating — because it cannot be undone." ], "try": [ { "do": "Change the street, then type the old value back in", "then": "Save changes and Discard changes become available with the change and are disabled again once nothing differs from what was saved; pointed at while disabled, each says “Nothing has changed”" }, { "do": "Empty Company name and press Save changes", "then": "the field says what is missing and takes the focus, and nothing is saved" }, { "do": "Change two fields and press Discard changes", "then": "a warning names both fields first; Discard changes puts them back to their saved values, Keep editing leaves the change" }, { "do": "Change Company name and press Save changes", "then": "a toast confirms, the page title shows the new name, and both actions are disabled again" }, { "do": "Switch the case to Create", "then": "the same form starts empty, the actions read Create client and Discard entries, and the way back leads to the client list instead of the client" }, { "do": "Fill in the required fields and press Create client", "then": "a toast confirms the new client, and the empty form is ready for the next one" }, { "do": "Scroll down", "then": "the toolbar holds at the top while the way back and the title scroll away" }, { "do": "Open the pattern in a new tab and narrow the window", "then": "the short fields widen to half the row, and no row holds more than two fields" } ], "revision": 2, "changes": [ { "revision": 2, "change": "Why Save changes and Discard changes are disabled is an ed-tooltip on each, outside the toolbar, not the buttons' title; it shows only while the button is disabled." } ], "reviewed": true, "source": "\n\n
\n\n
\n

Back to client 104721

\n
\n
\n

Bergmann & Sons Vehicle Engineering GmbH & Co. KG

\n

Client 104721 · Saarbrücken office

\n
\n Active\n
\n
\n\n
\n \n Save changes\n \n Discard changes\n \n Nothing has changed\n Nothing has changed\n
\n\n
\n
\n
\n

Client

\n

Company name and legal form appear in letters and reports exactly as they stand here.

\n
\n
\n \n \n
\n
\n \n Sole proprietorship\n e. K.\n GbR\n OHG\n KG\n GmbH\n GmbH & Co. KG\n UG (haftungsbeschränkt)\n AG\n eG\n \n \n 45.20.3 — Maintenance and repair of motor vehicles\n 45.11.1 — Sale of motor vehicles\n 46.69.0 — Wholesale of machinery\n 25.62.0 — Machining of metals\n 71.12.1 — Engineering offices for overall building design\n \n
\n
\n \n \n Saarbrücken\n Saarlouis\n Homburg\n Neunkirchen\n \n
\n
\n\n
\n
\n

Address

\n

The registered office moved in September. The old address stays in this year's reports until the end of the year.

\n
\n
\n \n \n
\n
\n \n \n
\n
\n \n Germany\n France\n Luxembourg\n Belgium\n Austria\n Switzerland\n \n
\n
\n\n
\n
\n

Service

\n

A change of clerk applies from the next payroll period; open tasks stay with the current clerk.

\n
\n
\n \n Sophie Brandt\n Andrea Jansen\n Thorsten Reinke\n Marie-Luise Hoffmann-Grote\n \n \n \n Monthly payroll\n Semi-monthly payroll\n Weekly payroll\n No payroll\n \n
\n
\n
\n
\n\n\n \n\n\n\n\n\n\n", "page": "https://test-apps.eurodata.de/a/eurodata-ui/docs/patterns/forms/f01-standard-form/", "topicPage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/patterns/forms/" }