You can create a focused Turnkey screen by hiding its main menu, its left sidebar, or both on an individual ViewModel; this guide is for MDriven Designer developers who control the screen layout.
Choose what to hide
The main menu and the sidebar serve different purposes. Configure them independently on the ViewModel that renders the screen.
| Option on the ViewModel | What it removes | Use it when |
|---|---|---|
| Hide Sidebar | The left-side menu/sidebar, including actions made available there. | The screen provides its required actions in the content area, such as action columns or buttons. |
| Hide Main Menu | The main menu bar. | The screen needs a clean, application-like layout without top-level navigation. |
| Both options | Both the left sidebar and the main menu. | The ViewModel is a dedicated workspace, dashboard, or embedded-style screen and supplies its own navigation and actions. |
- Open the ViewModel in MDriven Designer.
- Select the ViewModel.
- Enable Hide Sidebar to remove the left-side menu for that ViewModel.
- Enable Hide Main Menu when the top-level main menu must also be hidden.
- Save the model and open the ViewModel in Turnkey to verify the result.
For example, a ViewModel named OrderWorkspace can hide both menus and expose its important commands as buttons or action columns in the workspace itself.
Plan for actions before hiding the sidebar
The sidebar is a place where actions can be available for the current UI context. When you hide it, users cannot reach actions that are presented only there. Add the actions users still need to the ViewModel content before you remove the sidebar.
For example, if users must add an item from a grid after the sidebar is hidden, expose the add operation in the grid context as an action column or another visible control. Review the screen with a user account that has the intended permissions; available actions can depend on context.
For background on actions that are available wherever a type appears in the UI, see Training:Global actions. For other action-placement approaches, see HowTos:Swipe Actions.
Remember a user's sidebar choice
By default, the sidebar's shown/hidden state can be remembered by the application or browser. If you need the state to be stored for the signed-in user, implement the sidebar-memory pattern in the model.
Add these two methods to the SysSingleton class:
GetLeftMenuShow(viewname:String):Boolean
SetLeftMenuShow(yesno:Boolean; viewname:String):Boolean
Turnkey calls these methods as the user changes the sidebar state and when a ViewModel is shown:
| Method | When Turnkey calls it | Your implementation must do |
|---|---|---|
SetLeftMenuShow(yesno:Boolean; viewname:String):Boolean
|
The user changes whether the left menu is shown. | Store yesno using a location appropriate to the current user. Return the value.
|
GetLeftMenuShow(viewname:String):Boolean
|
A ViewModel is shown. | Retrieve and return the stored Boolean value for the current user. |
viewname is the current ViewModel name. Use it when you want a separate preference for each ViewModel; ignore it when one sidebar preference should apply across all views.
Example: one preference for every view
In a minimal implementation, SysSingleton has a Boolean attribute named LeftMenu. The methods read and write that attribute and ignore viewname. This means that when a user hides the sidebar in one ViewModel, other ViewModels using the same stored preference also start with the sidebar hidden.
To make the preference user-specific, store the Boolean on the current user object, or in a model structure associated with that user. To make it view-specific, store a value keyed by both the user and viewname.
Turnkey provides the automatically injected ViewModel OCL variable __UserSidebarShowMemory:Boolean to support this behavior. Keep the persistence logic in the SysSingleton methods so the model determines how and where the preference is retained.
Watch the user-specific left-menu walkthrough.
Apply page-specific CSS
Use the ViewModel options when their built-in behavior meets your need. Use CSS when you need page-specific styling that reaches elements outside the ViewModel, including menu containers.
Turnkey sets turnkeyview and turnkeyviewmodal attributes on the document root to the ViewModel name. Scope CSS to one ViewModel with the turnkeyview attribute.
For example, this hides the main menu only when the ViewModel is named ViewValueStore and gives that page a pink background:
html[turnkeyview="ViewValueStore"] #globalNavWrapper {
visibility: hidden;
}
html[turnkeyview="ViewValueStore"] #bodyWrapper {
background: pink;
}
The selector is name-sensitive: ViewValueStore must match the ViewModel name. This CSS uses visibility: hidden, which hides the navigation wrapper without changing the selector itself; test the resulting layout and use the ViewModel menu settings when you want Turnkey to manage the screen layout.