Taking control of the EPiServer 7 user interface
The design of the user interface in EPiServer 7 has been primarily targeted toward editors and publishes. Meaning that a lot of the more advanced functionality has been hidden from the main view. Dynamic Properties is one of these pieces of functionality that has been hidden.
From my time working with previous versions of EPiServer at a partner company, I know that dynamic properties can be used quite often. So to make your lives as developers or system admins easier I’ve created a nice little plugin that will add a button to the main toolbar in edit mode. The button will display the dynamic properties edit view in the main content area of edit mode when clicked. The nice thing about this scenario is that it lets me demonstrate a couple of ways that you too can customize edit mode!
In EPiServer 7 we use a command pattern to back the visual elements in the user interface. This allows us to separate the functional concerns of a command from the visual representation. Here is the code for the edit dynamic properties command:
As you can see the only things that related to the user interface are the properties: label, tooltip, and icon class.
Here you can also see the first method for taking control of the user interface. In the _execute method we publish a topic which tells the main view to display the widget that we pass through; in this case the addon/view/DynamicProperties widget. We also pass through the model as a parameter to be set on the view since this contains the information about the current page.
The view that we’re going to display basically just wraps an iframe. This is because I’m not creating a new edit view for dynamic properties but rather just display the legacy one in the main content area.
So all this really does is get the base URL to the legacy edit dynamic properties view and then append the current page ID to the end as a query parameter.
Getting the Command into the Main Toolbar
So now for the next method for taking control of the user interface. While not simple, it is possible to plug into the main toolbar. But first a little explanation.
EPiServer 7 uses a provider and consumer pattern for passing commands around the interface. This allows, for example, a component to say that it provides commands without having to be concerned about where the commands are consumed or how they are displayed. In this example the component toolbar is a consumer and will automatically take those commands and display them how they should be displayed in a toolbar.
So in the global toolbar case, the toolbar is a consumer and it consumes commands that are registered in a named global provider. So we need to add our command to this named provider.
Here we have a small initialization script that will hook into the provider registration method and when the global toolbar provider is registered we’ll add our command.
How It Looks
This is the button in the toolbar
This is the edit dynamic properties view
To make your life easier, I’ve packaged this as an add-on which you can manually upload and install on your site if you want to try it out or you can just extract it to see the code.