User interface
Add a module initializer
A module initializer is a JavaScript function that runs when the related module is started. This is useful for doing any configuration or script loading that should be done before the edit user interface is made available.
Configure CMS user interface
If you get this message in edit view, you have hit the response timeout for the editing iframe Preview Unavailable Failed to load the preview within the given time constraints. The default time to load a preview is 15 seconds.
Configure Shell modules
There are two different kinds of shell modules protected and public. Protected ones are secured by default, while public ones are accessible to all users.
Context-sensitive components
Optimizely Content Management System (CMS) supports context-sensitive client components. Context could be the current page that the user is working with.
Create an MVC component for the UI
The Optimizely Content Management System (CMS) extension of the IFrameComponent has the following additional parameters UrlFromUtil – Optional. The URL to the source is relative to the Utils folder.
Create a React component
Optimizely Content Management System (CMS) supports JavaScript frameworks in the user interface. You can use them to build components editors use in the on-page edit view.
Debug CMS UI
You can run your site with uncompressed JavaScript in edit view to debug the Optimizely Content Management System (CMS) user interface. To do this, you need to enable debug mode for client resources by adding \<clientResources debug="true" /> to your web.
Describe content in the UI
In Optimizely Content Management System (CMS) version 7. 0, the content system was introduced to use the central types of pages and blocks in CMS.
Dialog boxes
The Optimizely Content Management System (CMS) user interface uses dialog boxes in many places to communicate information or perform tasks within the current view. The following examples are on Optimizely's GitHub https //github.
Drag-and-drop
Drag-and-drop (dnd) in Optimizely Content Management System (CMS) uses the "dnd" system in Dojo with some additions. See the Dojo Drag'n'Drop Redux http //www.
Text box width example
The Custom Settings tab configures a limited length for the text editor in the edit view. First, create a settings class, CustomStringSettings .
Extend the Tasks pane with custom queries
The Tasks panel contains predefined lists with queries like Drafts, Rejected, or Recently Changed. You can also build a query and plug it into the tasks list.
Dojo JavaScript framework
Optimizely Content Management System (CMS) uses the Dojo Toolkit http //dojotoolkit. org/ as the JavaScript framework to develop on the client side.
Message service pool
The message service alerts an editor of the current working page status, such as when an editor edits a page property or submits a page for editing. The message service store uses a central message pool with two main parts A central message hub service that supports other parts in adding or removing items.
Plug-in areas
Optimizely Content Management System (CMS) has a flexible user interface where you can add components. CMS added plug-in areas at common extension points to let partner developers extend the CMS user interface.
Plug in a gadget
To extend the editorial interface, you can plug gadgets with information related to the content into the navigation panel and assets panel. These gadgets can have their tab on the tab toolbar.
Publish and subscribe messaging system
Optimizely Content Management System (CMS) uses the Dojo publish and subscribe messaging system to pass events or notifications to components in the user interface. The Dojo toolkit provides functionality to facilitate this kind of communication because Dojo promotes class declaration and modular development, and one of the main mechanisms for ensuring that modules remain decoupled is to use this publish and subscribe messaging system.
Service locator
The service locator ensures you can build the system modularly by registering dependencies shared loosely and lets you control global exposure without creating multiple global objects. Instead, a single global container object holds these dependencies.
Shell profile
Optimizely Shell contains a profile API store for storing editor settings, similar to the ASP. NET profile but more practical to use, and has a client API available for Dojo components.
Store architecture
The Optimizely Content Management System (CMS) user interface extensively uses the object store API available in the Dojo Toolkit. To create an environment where you can share object store data across components with minimal dependencies, use the epi.
User interface
The Optimizely Content Management System (CMS) user interface is component-based and pluggable and uses the UI framework across platform parts. It supports drag-and-drop (DND) functionality based on the DND system in Dojo and extendable navigation for easy access to customized modules from the top global menu.
WebSocket support
A WebSocket connection notifies the user interface about available updates so that users see changes without an explicit page refresh. Use WebSockets in the Projects and Notifications areas.