# Architect 3.10 - Ribbon & Docking guide **URL:** \ **Category:** Wiki\ **Tags:** architect\ **Created:** [April 24, 2026, 12:24pm UTC](https://community.novulo.com/t/architect-3-10-ribbon-docking-guide/922 "2026-04-24T12:24:30Z")\ **Posts on this page:** 1\ **Page:** 1
**Author:** ![Wilko](https://avatars.discourse-cdn.com/v4/letter/w/a9a28c/32.png) [@Wilko](https://community.novulo.com/u/Wilko)\ **Post date:** [April 24, 2026, 12:24pm UTC](https://community.novulo.com/t/architect-3-10-ribbon-docking-guide/922/1 "2026-04-24T12:24:30Z")
# Architect 3.10 – Ribbon & Docking Documentation **Version:** 3.10 RC **Scope:** Ribbon UI, Ribbon commands, Modern Docking * * * ## 1. Introduction The Architect 3.10 introduces a major UI/UX modernization aimed at improving **discoverability and consistency** of the application. This update focuses primarily on the command surface and window management. The most visible changes are: - A fully **reorganized Ribbon interface** - Introduction of **Modern Docking** , enabling flexible and user-controlled layouts - A new visual foundation using **FlatLaf** , integrated with **Radiance** for the Ribbon - Updated iconography based on **Microsoft Fluent UI icons** - Improved **font rendering quality** and **font-sizing** This document explains **what has changed** , **how users can work with the new UI** , **where to find the right commands** If some things are unclear or if you would like to have some extra information on certain functionality, please ask for this in the comments. * * * ## 2. Top-right instruments panel The different working modes of the Architect are available as **view-mode buttons in the top-right panel**. The available perspectives include: - Design - Data Model - Compare - Translate The image below shows the available modes that are part of the current workflow: ![top-right panel](https://canada1.discourse-cdn.com/flex008/uploads/novulo/original/2X/e/e528c486f4c69e84aafe1453e2a3b62ab5a1afc0.png) * * * #### 2.1 Selection navigation The top-right corner also contains: - **Previous selection** - **Next selection** These buttons allow you to cycle through the elements you selected earlier in the Architect. ![Navigation](https://canada1.discourse-cdn.com/flex008/uploads/novulo/original/2X/5/50f86842600527a4c87e5162f95004d9963fff85.png) * * * #### 2.2 Mode: Design Design is the default working mode used for modeling and navigation. ![design-modus](https://canada1.discourse-cdn.com/flex008/uploads/novulo/original/2X/b/b1cb65d16dd2322c30cbccb1c3c3206550dafbb1.png) Use this view to: - Navigate through modules, pages, processes, and components - Edit and structure the application model * * * #### 2.3 Mode: Data Model The Data Model view shows the underlying data model structure of the component. ![data-model-modus](https://canada1.discourse-cdn.com/flex008/uploads/novulo/original/2X/f/f5069f7e5cd880c8daad656b4185593ff4984a9b.png) Use this view to: - Inspect entities and attributes - Understand data relationships - Verify model structure - Add indexes * * * #### 2.4 Mode: Compare The Compare perspective is used to compare different revisions of a model. ![compare-modus](https://canada1.discourse-cdn.com/flex008/uploads/novulo/original/2X/2/25d369e6f823f16d6b4b9b6ee156bcfddd119056.png) How it works: 1. Click the **Compare** perspective in the top-right corner 2. A dialog opens where you select the revision to compare with ![compare_view_dialog](https://canada1.discourse-cdn.com/flex008/uploads/novulo/original/2X/a/a42380511e2bc629e1e12a91add27b64d4272466.jpeg) After selecting a revision: - The application switches into Compare mode - Differences between revisions are visualized side by side If you switch to another perspective, the Compare panels are closed automatically. * * * #### 2.5 Mode: Translate The Translate perspective is used to work with translations. How it works: 1. Click the **Translate** perspective in the top-right corner 2. Click **Choose** to open the language selection dialog 3. Select the source and target language ![translate-modus](https://canada1.discourse-cdn.com/flex008/uploads/novulo/original/2X/e/efc59c23d10ddee29772bba3d7ce90cbad753e7c.png) In this mode: - Translation-related structures become visible in the Explorer - Ribbon controls adapt to support translation actions * * * #### 2.6 Panels Panels are opened via the **Panels dropdown in the top-right panel**. - **Reset layout** – sets the panel layout back to the start settings ![Panels dropdown](https://canada1.discourse-cdn.com/flex008/uploads/novulo/original/2X/0/08aa03586a6e23c96271fb5f21913baea01f2db9.png) * * * ## 3. Ribbon Overview ### 3.1 What is the Ribbon? The Ribbon is the primary command surface in the Architect. It is located as the top bar in the application. Commands are organized by: - **Tasks** – top‑level tabs such as _Home_ and _View_ - **Bands** – logical groups of related actions within a task In addition to the Ribbon tasks, Architect 3.10 also provides **top-right instrument panel** for: - switching perspectives (working modes) - opening panels - resetting the layout - navigating through previous and next selections **Design goals of the Ribbon:** - Group related commands by user intent instead of technical origin - Reduce duplicate entry points for the same action - Improve discoverability of frequently used actions - Support contextual behavior without hiding functionality * * * ### 3.2 Old Ribbon (3.9) vs New Ribbon (3.10) #### Old Ribbon (3.9) - **Home** – clipboard, properties, input, rules - **Insert** – favorites, advanced actions, trash - **Review** – compare, translate, work items, notes, trace - **View** – views, indicators, layout actions - **Help** – online help and version info Problems with the old Ribbon: - Overlapping responsibilities - Many always-visible commands - Ribbon used for things better handled as panels - Visual style * * * #### New Ribbon (3.10) - Fewer, clearer tasks - **Home** focuses on modeling - **Review & translate** focuses on translation and work items - View modes (Design, Compare, Translate etc.) are available in the **Top-right instrument panel** - Panels and layout actions are available in the **Top-right instrument panel** - Favorites and Trash moved to dockables Key improvements: - Less clutter - Better context awareness - Alignment with Modern Docking * * * #### Notable command changes | Old location (≤ 3.9) | Feature / Band | New location (3.10) | Remarks (3.10) | | --- | --- | --- | --- | | Home → Default / Function | Expressions | Home → Expression | Split out in three options | | View → User page | Settings | Moved to the model properties dialog | This properties dialog can be found by using the context menu on the model name in the Explorer tree or by clicking Model settings on the General options page | | Review → Trace | Trace component | Home → Trace | Only visible for integrated components | | Review → Mode | Compare | Top-right instrument panel | Available as a perspective button | | Review → Mode / Translate | Translate | Top-right instrument panel | Available as a perspective button | | Review → Work items (Add/Link/View & Edit/Remove) | Work items | Review & translate | Consolidated into one Work item button | | Insert → Favorites | Favorites | Favorites dockable | Moved to its own dockable | | Insert → Trash | Trash | Trash dockable | Moved to its own dockable | | Help → About / Show version | About / Version information | File menu → About | About moved into File menu | | Title bar (top-left) | Quick navigation (Prev / Next) | Top-right instruments panel | Navigation buttons moved for better accessibility | | Title bar (top-left) | Find | Home → Find band | Search is now part of the Ribbon | | Title bar (top-left) | Save | File menu / Ctrl+S | Save button removed from the Ribbon, can be found in the File menu or triggered with Ctrl+S | | View → Window | Show panel | Top-right instrument panel → Panel | Always visible | | View → Window | Reset layout | Top-right instrument panel → Panel (last item) | Can be found in the dropdown | > If something seems missing, check the **Panels dropdown in the Top-right instrument panel** and check the available dockables. * * * ### 3.3 Contextual bands in Architect 3.10 The following table summarizes all contextual bands shown in the **Home** task and the conditions under which they appear. | Contextual band | Visible when… | Description | | --- | --- | --- | | Trace | An integrated model is opened | Navigate and inspect integrated components | | Grid settings | A grid is selected | Configure visible rows & details page | | Function settings | A function is selected | Configure function parameters & caching | | Process option | A process is selected | Open the selected process component | | Layout options | The process or expression editor is active | Set automatic and manual layout behavior | | Panel tab settings | A panel tab is selected | Configure default behavior for panel tabs | * * * ## 4. Ribbon Feature Description (Architect 3.10) ### 4.1 Home Task The **Home** task contains the most frequently used actions when working with components. ![Home task](https://canada1.discourse-cdn.com/flex008/uploads/novulo/original/2X/7/71b4f3b1c9449bde3cff8ba1f4aa7527d0874b04.png) * * * #### Clipboard - **Paste** – insert copied element - Paste is also a dropdown list with clipboard elements - Drag and drop from the Paste dropdown - Same functionality is within the Clipboard Dockable - **Cut** – remove element to clipboard - **Copy** – copy element to clipboard ![Clipboard)](https://canada1.discourse-cdn.com/flex008/uploads/novulo/original/2X/4/4a9148227f39912ccbaea432cbb19b263871d235.png) * * * #### Settings - **Name** – element name - **Width / Height** – dimensions - **Page state** – formerly _Dummy_. Set if a field should be in the page state. - **Plugin** – Opens the plugin configuration for an element. - **Process** – Open or enable a process for the element - **Functions** – Show and add functions of the currently selected records type. ![Settings](https://canada1.discourse-cdn.com/flex008/uploads/novulo/original/2X/3/31e8b4d34a5649935e8069d2f3c5b9379b774334.png) * * * #### Data Type - **Type** – Show and select type - **Decimals** – increase / decrease decimals precision for the number or float type. ![Data type band](https://canada1.discourse-cdn.com/flex008/uploads/novulo/original/2X/6/65b5493d5f8fb1ea2dcceed926abf872853e3de2.png) * * * #### Expressions The **Expressions** band groups all rule‑based behavior of an element in one place. Each command in this band opens a **dropdown with predefined rule options** , allowing you to quickly define common behavior without immediately entering advanced rule editors. This structure is consistent across all expression types, making rules easier to understand and maintain. ![Expressions band](https://canada1.discourse-cdn.com/flex008/uploads/novulo/original/2X/b/b68931de52ae563cf41210af67ce12b8b4e267c0.png) * * * **Visibility** Controls **when an element is shown**. Typical options include: - **Always visible** – the default behavior - **Never visible** – hides the element entirely - **Visible if … equal to / not equal to …** - **Visible if … is empty / is not empty** - **Manage rules** – open the rule editor for more complex conditions - **Advanced** – opens the expression editor directly to create the expression yourself * * * **Editability** Controls **when an element can be edited** by a user. Typical options include: - **Always editable** - **Never editable** - **Editable if … equal to / not equal to …** - **Editable if … is empty / is not empty** - **Manage rules** - **Advanced** * * * **Expression** Controls **how the value of an element is provided**. The options include: - **Has default value** : the value which the field automatically gets when adding a record in add mode or the value which is used when a record is added with a process or import and the field is not explicitly set. - **Show value from expression** : the value which is shown in the field based on an expression. This makes the field now purely a display field and the field is not added to the database. - **Show value from function** : the value which is shown in the field based on a function of the record type. This makes the field now purely a display field and the field is not added to the database. * * * **Validation** Controls **when a value is considered valid**. Typical options include: - **Always valid** - **Valid if not empty** - **Valid if equal to / not equal to …** - **Valid if not empty** - **Manage rules** - **Advanced** Validation rules are used to enforce correctness before saving data. * * * **Filter** Controls **what a grid, dropdown or search link shows or has as options**. Typical options include: - **Always show** - **Never show** - **Show if … equal to / not equal to …** - **Show if … is empty / is not empty** - **Manage rules** - **Advanced** * * * #### Trace (contextual band) The **Trace** band is shown in the **Home** task **only when an integrated model is opened**. Use **Trace component** to: - Find the component where the element is created - Open this component in edit mode - Open this component in view mode ![Trace band](https://canada1.discourse-cdn.com/flex008/uploads/novulo/original/2X/8/8d76b706902b57aa6de70df7730ce8d9bbd55cbc.png) > This band is dynamically rendered and is **not visible** for non‑integrated models. * * * #### Grid settings (contextual band) The **Grid settings** band is shown in the **Home** task **when a grid is selected**. Available settings are: - **Visible rows** – control how many rows are displayed in the grid - **Details page** – select or show the page set ![Grid settings band](https://canada1.discourse-cdn.com/flex008/uploads/novulo/original/2X/1/13638735c115ebff3e049debf03bc817be0f0d07.png) These settings apply only to grid components and are hidden for other selections. * * * #### Function settings (contextual band) The **Function settings** band is shown in the **Home** task **only when a function is selected** Available actions: - **Parameters** – open and edit the parameters of the selected function - **Enable cache** – enable or disable caching for the function ![Function settings band](https://canada1.discourse-cdn.com/flex008/uploads/novulo/original/2X/1/13f3fb1a2727301e36cb688e4354f767dadadbdf.png) This band is dynamically rendered and hidden when no function context is active. * * * #### Process option (contextual band) The **Process option** band is shown in the **Home** task **only when a process is selected** or when working within a process context. Available action: - **Edit component** – open the selected process component ![Process option band](https://canada1.discourse-cdn.com/flex008/uploads/novulo/original/2X/5/549ff22476b6a41f36e73a36850258f9a31f7893.png) This band appears only for process-related selections and is hidden otherwise. * * * #### Layout options (contextual band) The **Layout options** band is shown in the **Home** task when you are working in a **graphical editor** , such as while editing functions or processes. Available actions: - **Autolayout** – automatically arrange the graphical elements - **Layout now** – immediately apply the automatic layout configuration ![Layout options band](https://canada1.discourse-cdn.com/flex008/uploads/novulo/original/2X/4/40d256ea81911389960acdb5912241a7fddd536e.png) These options are context-sensitive and are not shown outside graphical editing contexts. * * * #### Panel tab settings (contextual band) The **Panel tab settings** band is shown in the **Home** task **only when a panel tab is selected** in the page editor. Available settings: - **Default on dashboard** – mark the panel tab as default on the dashboard - **Default on metro** – mark the panel tab as default on the metro ![panel-tab-band](https://canada1.discourse-cdn.com/flex008/uploads/novulo/original/2X/d/d3c36a434c61d6aafa1c9d5ae4e4a4ec66dc8b04.png) This band is hidden unless a panel tab is actively selected. ### 4.2 Review & translate The **Review & translate** task contains actions related to translation and work items. ![Review & translate task](https://canada1.discourse-cdn.com/flex008/uploads/novulo/original/2X/0/04c1a1e2f976b9d6d6e543049beaea4f1a6be4f2.png) .png) * * * #### Translate - Language selection (set translation of the selected element) - **Set language** - sets the language in which the component is shown in the Architect and what the primary language of the component is. Let it be English unless you know you need to change it to another language. - **Export** - Create a csv file of all the elements and their translations. The languages used are based on the languages set in the language selection part. Use this csv file in an external application. - **Import** - Import an exported csv file of all the elements and their translations. The csv file is interpreted that the first language column is only for display purposes in an external application, the values of the second language column is used to import those values for that element and language in your component. ![Translate band](https://canada1.discourse-cdn.com/flex008/uploads/novulo/original/2X/a/ad01deb57f7a744f2fbaafd72d50af2c44d565eb.png) * * * #### Work Item - **Add new item** - **Edit item** (if there is one) - **Remove item** (if there is one) ![Work item band](https://canada1.discourse-cdn.com/flex008/uploads/novulo/original/2X/1/114b20df2efd03bc0bc06de69e222c528447f476.png) * * * ## 5. File Menu The Architect 3.10 introduces a redesigned File menu. While the **functional scope remains largely the same** , the structure, presentation, and feedback to the user have been significantly improved. ![File menu5)](https://canada1.discourse-cdn.com/flex008/uploads/novulo/original/2X/6/66cefba6ac77c62e8cbb682ef95a3b9fab9b5e1b.png) Notable changes: - Support for **recent models and components** directly from the Open action - **Build** was renamed to **Generate** , reflecting its actual purpose more clearly - **About Architect** was moved from the former Help task into the File menu * * * ## 6. Modern Docking Architect 3.10 introduces **Modern Docking** , replacing the legacy docking system. It allows users to **rearrange panels (dockables)** to create a workspace that fits their workflow, while enforcing a consistent and supported layout model. Dockables include panels such as Explorer, Properties, Log, Clipboard, and others. * * * ### 6.1 Docking Concepts Modern Docking in Architect 3.10 is based on three core interactions: - **Drag** – move a dockable - **Drop** – place it in a new position - **Stack** – group dockables together as tabs > You can also close the dockable by pressing the X in the top-right corner * * * ### 6.2 Dragging a Dockable To move a dockable: 1. Place the mouse cursor on the **header** of the dockable 2. Click and hold the mouse button 3. Drag the dockable While dragging: - Docking indicators appear on screen - These indicators show all valid drop locations within the main window * * * ### 6.3 Dropping a Dockable When dragging a dockable, you can drop it in the following supported locations: - **Left / Right / Bottom** – dock the panel to that side of the window - **Center** – dock the panel as a tab within another dockable group The interface shows a **live preview** of the resulting layout before you release the mouse button. * * * ### 6.4 Stacking Dockables (Tabs) Dockables can be **stacked** together to form tabbed panels. To stack dockables: 1. Drag one dockable onto the **center docking indicator** of another dockable 2. Release the mouse button Result: - Multiple dockables are grouped as **tabs** - You can switch between them by clicking the tab headers Stacking is useful to reduce screen clutter while keeping related panels easily accessible. * * * ### 6.5 Resetting the Layout If the workspace becomes cluttered or confusing, you can always restore the default layout. To reset the layout: 1. Open the **View** task in the Ribbon 2. Go to the **Window** band 3. Click **Reset Layout** The layout is restored to the default configuration defined by Architect. > Resetting the layout does **not** affect your model or data and is always safe to use. * * * ### 6.6. Dockable Toolbars In Architect 3.10, dockables use a **unified toolbar design** wherever applicable. These toolbars appear at the top of dockable panels (such as Explorer, Problems, Favorites, Clipboard, Page Editor etc.) and contain actions that are **specific to the purpose of the dockable**. ### 6.7 Demo In this gif you can see how to drag, drop, stack, resize the dockables and how to reset the view. ![Architect3.10RC](https://canada1.discourse-cdn.com/flex008/uploads/novulo/original/2X/a/ae680ced1831eaa1c4f128a714bd217e5cb747dd.gif) * * * ## 7. View Mode (Read‑Only Models) Architect supports opening models in **View Mode**. In this mode, the model can be inspected and changed but **cannot be saved**. In the Architect 3.10, View Mode is indicated explicitly using a disclaimer message: ![View mode](https://canada1.discourse-cdn.com/flex008/uploads/novulo/original/2X/c/cb6f0002ac763f0c25fbfb9460c91e1f5d246b21.png)