Working with forms¶
Every edit screen in the admin has the same shape: an action bar that stays with you as you scroll, then the fields, grouped into panels or tabs.
The action bar¶
The bar carries the record's name, a status chip where the record has a status, and the buttons. It stays at the top of the screen while you scroll, so Save is always one click away.
| Button | What it does |
|---|---|
| Back | Returns to the list. It does not save |
| Delete | Asks Delete this item? and warns that it cannot be undone. Nothing happens unless you confirm. Absent on a new record and on view-only screens |
| Save and Continue | Saves and keeps you on the record |
| Save | Saves and returns to the list |
Cmd+S or Ctrl+S saves. Where the form has Save and Continue, that is the button it presses, so you stay on the record. Where Save is the only button, it presses Save and returns you to the list.
Some screens add more:
- a store scope switcher, described below;
- Previous and Next with Save and Previous and Save and Next, on screens that step through records one at a time, such as reviews;
- screen-specific buttons such as Preview, which opens a dialog over the page rather than navigating away.
A few screens are view-only. They keep Back and any navigation, and show no Save or Delete at all.
Panels and tabs¶
Fields are grouped into panels. A panel with a heading can be opened and closed by clicking the heading. Panels that start closed hold the less common settings.
Some screens present those groups as tabs across the top instead of one long page. Whether a screen does that is a setting, and you can turn it on or off in Configuration under Nebula, Nebula Admin Theme, Settings:
| Setting | Affects |
|---|---|
| Enable Product Edit Tabs | The product edit page |
| Enable CMS Page Edit Tabs | The CMS page edit page |
| Enable CMS Block Edit Tabs | The CMS block edit page |
| Enable Landing Page Edit Tabs | The landing page edit page |
Store scope¶
On a screen whose values can differ per store view, the action bar carries a scope switcher reading Scope: and the name of the scope you are editing. Open it to choose the default scope, a website, or a store view. Choosing one reloads the screen showing that scope's values.
Save while a scope is selected and you save that scope's values. Fields that are still inherited say so.
Validation¶
Press Save and the form checks itself before sending anything.
If something is wrong, nothing is submitted. The page scrolls to the first problem, puts the cursor in it, marks the field, writes the reason underneath it, and shows a message saying how many problems were found. Fix them and press Save again.
Common messages name the field, for example Title is required.
Unsaved work¶
Most forms do not warn you when you leave with unsaved changes, so save before you navigate away.
Five screens do guard your work, because losing it there costs the most:
- the category tree, when you have dragged something and not yet saved the order;
- the category merchandiser;
- the email partial editor;
- the permission tree on the role screen;
- the quick-edit drawer on a list, which asks before discarding.
The text editor¶
Rich text fields open in a visual editor with a toolbar.
| Group | Buttons |
|---|---|
| Style | Heading level, bold, italic, underline, strikethrough |
| Blocks | Quote, code block |
| Lists | Numbered, bulleted |
| Insert | Link, image, table |
| Layout | Alignment |
| Dynamic content | Insert Variable, Insert Widget |
| History | Undo, redo, clear formatting |
Link asks for the address and the words to show. Table asks how many rows and columns you want before it inserts anything.
Insert Image opens the media library so you can pick or upload a picture, give it alternative text, choose left, centre or right alignment, and set a width and a height. Insert Variable lists the store's variables, such as the store name or a customer's first name. Insert Widget lists the widget types the store has, asks for the widget's own settings, and drops the finished widget into the text.
Clicking a picture you have already inserted reopens the media library with that picture's alternative text, alignment, width and height filled in, so changing a picture is the same dialog as inserting it. Double-clicking an inserted variable or widget reopens its own dialog in the same way.
The HTML view¶
The Show HTML button above the editor swaps it for the raw markup. The button then reads Show Editor and takes you back. Three extra buttons appear while you are in the HTML view: Insert Widget…, Insert Image… and Insert Variable…, which insert at the cursor.
Your choice of view is remembered for that field and always wins from then on.
Some content opens in the HTML view on its own, without you asking. That is deliberate. The visual editor cannot reproduce every possible piece of markup, for example a wrapper element or a class on a paragraph, so content that would be changed by passing through it is opened where it can be edited exactly. If a page opens in HTML view and you would rather work visually, press Show Editor, but be aware that the first edit you make in the visual editor is what settles the markup.
Simply opening a record and saving it never rewrites its content. The editor only takes ownership once you actually edit in it.