Simplifying the Control Panel for Content Editors

Webvanta provides two different types of administrative accounts (accounts that allow someone to modify the site): full admin, and content editor. The full admin has unrestricted access to everything. The content editor cannot access most structural elements (templates, css, js, etc.) but have access to most other parts of the control panel.

By setting up a special Global Setting, you can hide additional parts of the control panel to simplify it further for a particular site. Currently, all content editors have the same access; if you hide something for one content editor, it is hidden for all content editors (but still available to full admins).

You can hide:

• Navigation tabs (Menus)
• Specific items on a menu
• Group panes within a specific tabs panel
• Specific items on a group pane within a panel
• "SEO" entry fields

Note: this feature currently providing only hiding, not security. A content editor can still access hidden control-panel pages if they know the URL for a control-panel page.

Setting the Customization

The setting that controls the content editor UI features is called admin.custom.control_panel.navigation. You must write a JSON string to specify what is to be hidden.

UI customizations are applied on an account-by-account basis. If you are a design partner, you can adjust the UI for each account as needed. You can also include the config setting as part of a custom SmartTheme.

To ensure that only full admins can change the UI customization setting, enter "secure" for the setting group name; this prevents all other roles from editing it.

Customization Specification Format

The customization specification is a JSON string that you enter into the Global Configs for the site whose control panel you want to modify.

The specification follows a simple scheme in which you list the exact names of the elements (in lower case) that you want to hide, organized by the area of the UI that is to be changed.

The default setting for the Content editor Role is:

{"version":2,
  "content editor":{
    "editors":{
      "seo":[]
    },
    "panels":{
      "structure":["templates","css files","js files","xml for rss and atom feeds","smartthemes"],
      "dashboard":["site statistics"],
      "settings":["activation",{"site settings":["configure external apis"]},"private label"],
      "database":[{"advanced database setup":["create custom item types","manage custom item types","import database items"]},"link types"]
    },
    "menus":{
      "structure":["templates","css files","js files","feeds & xml files","smartthemes"],
      "settings":["global settings","my sites","create new site","private label config"],
      "database":["item types","link types","import"]
    }
  }
}

Note: For help editing JSON, check out jsoneditor.net.

The structure is a JSON formatted string. All keys and values must be lowercase.

At the root level of the structure, you must specify the version of the specification (always version 2), and the roles that you want to adjust. In the example, we are going to change the UI for the "content editor" role (this is the only role currently supported).

Under each role, specify which menus (the nav tabs and menus), panels (the screens you see when you press a tab), or editors (the edit forms for built-in or custom items), you want to change.

Hiding Menus or Menu Items

Create a key for any tab (menu) that you want to change. In the example, the Structure, Settings, Database, and Analytics menus are going to be tweaked. If you want to simply hide some of the menu contents, just list out each item as it appears on the menu in a JSON array. If you want to completely hide a tab from showing up, put in the value "false" instead.

Hiding Panels

For Panels, you can hide whole sections of the panel (called "panes"), or just individual items that appear on a given pane. You refer to a panel by its menu name. In the example, we are customizing Structure, Dashboard, Settings, and Database panels.

Otherwise, you specify settings in a JSON array. To hide a whole pane, just enter a name; for instance, the Structure panel is going to hide the Templates pane. You copy the name as is shows up in the UI.

If you want to hide a subset of items on a pane, you create a JSON object with the name of the pane, then a value that is an array of those items as they exactly appear. In the example, we remove the "Add New Page" choice from the Pages Pane of the Structure panel. The format for that item is {"pages":["add new page"]} (note the brackets around the element in the array).

A few panels behave specially.

• Dashboard: The only Pane that can be hidden is the "site statistics" left panel at this time
• Files: No customization beyond hiding the whole thing
• Analytics: No customization beyond hiding the whole thing

Hiding Everything Except the Dashboard

For content editors, you may want to hide everything except the dashboard page itself, if you are providing a custom dashboard with links to everything you want the content editors to be able to do.

The following code achieves this:

{"version":2,
    "content editor": {
      "panels": {
        "dashboard": ["site statistics"]
      },
      "menus": {
        "structure":false,
        "content":false,
        "files":false,
        "people":false,
        "submissions":false,
        "settings":false,
        "database":false
      }
    }
}

Removing the SEO Fields

You can remove the SEO editor element from any of the built-in or custom item type editor forms (as well as select taxonomy editors). Simply supply a list of the item types in which you want to have the SEO hidden, as follows:

"editors": {
    "seo":["articles","posts"]
}

In this example, the SEO fields will be hidden within the Articles and Blog Posts editors.