loading table of contents...

Studio Developer Manual / Version 2310

Table Of Contents

Studio Developer Manual

Copyright CoreMedia GmbH © 2023

CoreMedia GmbH

Altes Klöpperhaus, 5. OG

Rödingsmarkt 9

20459 Hamburg


All rights reserved. No part of this manual or the corresponding program may be reproduced or copied in any form (print, photocopy or other process) without the written permission of CoreMedia GmbH.


Alle Rechte vorbehalten. CoreMedia und weitere im Text erwähnte CoreMedia Produkte sowie die entsprechenden Logos sind Marken oder eingetragene Marken der CoreMedia GmbH in Deutschland. Alle anderen Namen von Produkten sind Marken der jeweiligen Firmen.

Das Handbuch bzw. Teile hiervon sowie die dazugehörigen Programme dürfen in keiner Weise (Druck, Fotokopie oder sonstige Verfahren) ohne schriftliche Genehmigung der CoreMedia GmbH reproduziert oder vervielfältigt werden. Unberührt hiervon bleiben die gesetzlich erlaubten Nutzungsarten nach dem UrhG.

Licenses and Trademarks

All trademarks acknowledged.

December 11, 2023

1. Introduction
1.1. Audience
1.2. Typographic Conventions
1.3. CoreMedia Services
1.3.1. Registration
1.3.2. CoreMedia Releases
1.3.3. Documentation
1.3.4. CoreMedia Training
1.3.5. CoreMedia Support
1.4. Changelog
2. Overview
2.1. Architecture
2.2. Technologies
3. Deployment
3.1. Connecting to the Repository
3.2. Control Room Configuration
3.3. Basic Preview Configuration
3.4. Editorial Comments Database Configuration
3.5. Development Setup
4. Quick Start
4.1. Setting Up the Workspace and IDE
4.2. Building Studio Server
4.3. Building Studio Client
4.4. Creating a Simple Studio Client Extension
5. Concepts and Technology
5.1. Ext JS Primer
5.1.1. Components
5.1.2. Component Plugins
5.1.3. Actions
5.2. Ext TS: Developing Ext JS in TypeScript
5.2.1. Classes
5.2.2. Interfaces
5.2.3. Imports and Exports
5.2.4. Mixins
5.2.5. Using the Ext Config System
5.3. Client-side Model
5.3.1. Beans
5.3.2. Remote Beans
5.3.3. Issues
5.3.4. Operation Results
5.3.5. Model Beans for Custom Components
5.3.6. Value Expressions
5.4. Remote CoreMedia Objects
5.4.1. Connection and Services
5.4.2. Content
5.4.3. Workflow
5.4.4. Structs
5.4.5. Types and Property Descriptors
5.4.6. Concurrency
5.5. Web Application Structure
5.6. Localization
5.7. Multi-Site and Localization Management
5.8. Jobs Framework
5.8.1. Defining Local Jobs
5.8.2. Defining Remote Jobs
5.8.3. Executing Jobs
5.8.4. Visualize Jobs Within the BackgroundJobsWindow
5.9. Further Reading
6. Structure of the Studio Client Workspace
7. Developing with the Studio Client Workspace
8. Using the Development Environment
8.1. Configuring Connections
8.2. Build Process
8.3. Debugging
8.3.1. Browser Developer Tools
8.3.2. Debugging Tips and Tricks
8.3.3. Tracing Memory Leaks
9. Customizing CoreMedia Studio
9.1. General Remarks On Customizing (Multiple) Studio Apps
9.2. Adding Entries to the Apps Menu
9.3. Studio Plugins
9.4. Localizing Labels
9.5. Document Type Model
9.5.1. Localizing Types and Fields
9.5.2. Customizing Content Forms
9.5.3. Image Cropping and Image Transformation
9.5.4. Enabling Image Map Editing
9.5.5. Disabling Preview for Specific Content Types
9.5.6. Excluding Content Types from the Library
9.5.7. Client-side initialization of new content items
9.6. Customizing Property Fields
9.6.1. Conventions for Property Fields
9.6.2. Standard Component StringPropertyField
9.6.3. Compound Field
9.6.4. Complex Setups
9.7. Hiding Components on Content Forms
9.7.1. Code Customization for the HideService
9.7.2. Studio Logging
9.7.3. Configuration Options
9.8. Coupling Studio and Embedded Preview
9.8.1. Built-in Processing of Content and Property Metadata
9.8.2. Using the Preview Metadata Service
9.9. Storing Preferences
9.10. Customizing Central Toolbars
9.10.1. Adding Buttons to the Header Toolbar
9.10.2. Providing Default Search Folders
9.10.3. Adding a Button with a Custom Action
9.10.4. Adding Disapprove Buttons
9.11. Managed Actions
9.12. Adding Shortcuts
9.13. Inheritance of Property Values
9.14. HTML5 Drag And Drop
9.15. Customizing the Library Window
9.15.1. Defining List View Columns in Repository Mode
9.15.2. Defining Additional Data Fields for List Views
9.15.3. Defining List View Columns in Search Mode
9.15.4. Configuring the Thumbnail View
9.15.5. Adding Search Filters
9.15.6. Make Columns Sortable in Search and Repository View
9.16. Studio Frontend Development
9.16.1. Blueprint Studio Theme
9.16.2. Studio Styling with Skins
9.16.3. Styling of Custom Studio Components
9.16.4. Icons / CoreMedia Icon Font
9.16.5. Usage of BEM and Spacing Plugins
9.16.6. Component States
9.17. Work Area Tabs
9.17.1. Configuring a Work Area Tab
9.17.2. Configure an Action to Open a Work Area Tab
9.17.3. Configure a Singleton Work Area Tab
9.17.4. Storing the State of a Work Area Tab
9.17.5. Customizing the Start-up Behavior
9.17.6. Customizing the Work Area Tab Context Menu
9.18. Re-Using Studio Tabs For Better Performance
9.18.1. Concept
9.18.2. Prerequisites
9.18.3. Usage
9.19. Dashboard
9.19.1. Concepts
9.19.2. Defining the Dashboard
9.19.3. Predefined Widget Types
9.19.4. Adding Custom Widget Types
9.20. Configuring MIME Types
9.21. Server-Side Content Processing
9.21.1. Validators
9.21.2. Intercepting Write Requests
9.21.3. Immediate Validation
9.21.4. Post-processing Write Requests
9.22. Available Locales
9.23. Toasts and Notifications
9.23.1. Configure Notifications
9.23.2. Adding Custom Notifications
9.23.3. Creating Notifications (Server Side)
9.23.4. Displaying Notifications (Client Side)
9.23.5. Displaying Toasts
9.24. Annotated LinkLists
9.24.1. Studio Configuration
9.24.2. Data Migration
9.25. Thumbnails
9.25.1. Thumbnail Resolvers
9.25.2. Custom Thumbnail Resolvers
9.25.3. Default Pictures
9.26. Custom Workflows
9.26.1. Fundamentals
9.26.2. Workflow Steps
9.26.3. Workflow Fields
9.26.4. Additional Workflow List Actions
9.26.5. Workflow Validation
9.26.6. Customizing Validation of Built-In Workflows
9.26.7. Workflow Localization
9.26.8. Publication Workflow Specifics
9.26.9. Translation Workflow Specifics
9.26.10. Synchronization Workflow Specifics
9.27. Content Hub
9.27.1. Basic Setup
9.27.2. Adapter Configuration
9.27.3. Content Hub Content Creation
9.27.4. Content Hub Object Preview
9.27.5. Content Hub Error Handling
9.27.6. Studio Customization
9.28. Feedback Hub
9.28.1. Basic Setup
9.28.2. Adapter Configuration
9.28.3. Localization
9.28.4. Error handling
9.28.5. FeedbackItem Rendering
9.28.6. Predefined FeedbackItems
9.28.7. Custom Adapters for Feedback Hub
9.28.8. Editorial Comments for Feedback Hub
9.28.9. Keywords Integration for Feedback Hub
9.29. User Manager
9.30. User Properties
9.31. Adding Entity Controllers
9.31.1. Prerequisites
9.31.2. Implementing the Java Backend
9.31.3. Implementing Studio Remote Beans
9.31.4. Using the EntityController
9.31.5. REST Linking (Java Backend)
9.31.6. REST Linking (Studio RemoteBeans)
9.32. Multiple Previews Configuration
9.32.1. Configuration of a preview
9.32.2. CAE Preview Provider
9.32.3. Headless Preview Provider
9.32.4. Commerce Headless Preview Provider
9.32.5. Studio URI-Template Preview Provider
9.32.6. Common URI-Template Preview Provider
9.32.7. Generic Preview URL Service Provider
9.32.8. Public API of the Preview URL Service
9.33. Quick Search Configuration
9.33.1. Quick Search Types
9.33.2. Search for Custom Actions
9.34. Quick Create
9.34.1. Default Folders
9.34.2. Quick Create Post-Processing
9.35. Locale Switcher Configuration
10. Rich Text Editing
10.1. CKEditor 5 Rich Text Editing
10.1.1. CKEditor 5 Concepts
10.1.2. CKEditor 5 CoreMedia Plugins
10.1.3. CKEditor 5 Customization
10.1.4. Debugging CKEditor 5
10.2. CKEditor 4 Rich Text Editing
10.2.1. Downgrading to CKEditor 4
10.2.2. Customizing CKEditor 4
10.2.3. Debugging CKEditor 4
10.3. Upgrading from CKEditor 4 to CKEditor 5
10.3.1. Additional Upgrade Steps for Versions Prior to 2110.1
10.3.2. Recommended Branch Setup
10.3.3. Enable CKEditor 5
10.3.4. Upgrade Conditional Changes via Studio Plugins
10.3.5. Upgrade Marketplace Plugins
10.3.6. Upgrade Custom Plugins
10.3.7. Upgrade CoreMedia Plugins Configuration
10.3.8. Comparing CKEditor 4 Integration With CKEditor 5
11. Security
11.1. Preview Integration
11.2. Content Security Policy
11.3. Single Sign On Integration
11.3.1. Disable EditingRestSecurityAutoConfiguration
11.3.2. Create your own AutoConfiguration
11.3.3. Create your own SecurityFilterChain
11.3.4. Create your own SpringSecurityCapUserFinder
11.3.5. Studio Login Url
11.3.6. Proxy settings
11.4. Auto Logout
11.5. Logging
12. Configuration Reference

List of Figures

2.1. Architecture of CoreMedia Studio
2.2. Runtime components
4.1. Added string property with the title of the content
5.1. Ext JSON
8.1. Open Chrome Developer Tools settings
8.2. Enable Source Maps in Chrome Developer Tools settings
8.3. Google Chrome Console
8.4. The Browser Console Log Button
8.5. Example of a content dump
8.6. Inspect an Ext JS component selected in the DOM
8.7. Studio main view component tree
8.8. Record Ext JS component events
8.9. Google Chrome's Developer Tools Support Comparing Heap Snapshots
9.1. The Apps Menu inside the Side Bar of Each Studio App
9.2. Plugin structure
9.3. Document form with a collapsible property field group
9.4. Hide Service Dialog
9.5. Theming Inheritance in Ext JS and CoreMedia
9.6. Premular Reusability (For A Reusability Limit Of 2 For Articles)
9.7. Dashboard UML overview
9.8. Annotated LinkList with item with changed default value
9.9. Thumbnails
9.10. Start Workflow form Extension for the Global Link Translation Workflow
9.11. Start Workflow form Extension for a Running Global Link Translation Workflow
9.12. Workflow validators model class diagram
9.13. Default Rendering of FeedbackItems used for the CoreMedia Labs project "Imagga"
9.14. Tabbed Rendering of FeedbackItems used for the CoreMedia Labs project "Searchmetrics"
9.15. Example of a ScoreBarFeedbackItem
9.16. Example of a RatingBarFeedbackItem
9.17. Example of a PercentageBarFeedbackItem
9.18. Example of a GaugeFeedbackItem
9.19. Example of a KeywordFeedbackItem with service "Imagga".
9.20. Example of a ComparingScoreBarFeedbackItem
9.21. Example of a bold LabelFeedbackItem
9.22. Example of a ExternalLinkFeedbackItem used inside a "Siteimprove" integration
9.23. Example of a ErrorFeedbackItem inside an integration of "Siteimprove"
9.24. Settings Document with two configured previews
9.25. Example configuration of the Generic URI-Template Preview Provider
9.26. Studio with multiple Previews
10.1. CKEditor 5 Editing Layers
10.2. CKEditor 5 Source Editing Feature
10.3. CKEditor 4
10.4. CKEditor 5

List of Examples

3.1. Running Liquibase via cmd tool
3.2. Release lock via docker-container
4.1. SimplePluginExample.ts
4.2. jangaroo.config.js
4.3. package.json
5.1. Ext JSON
5.2. Ext JSON in TypeScript
5.3. Plugin usage in Ext JSON
5.4. Using the default export for Ext TS classes
5.5. Ext Mixin in TypeScript example
5.6. Ext Config example
5.7. Ext JS Bindable Configs
5.8. Simple and Bindable Config Properties in TypeScript
5.9. Declaring Config type as virtual class member
5.10. Extending superclass Config type
5.11. TypeScript detecting type errors for existing properties
5.12. Preventing use of untyped properties
5.13. Create Ext Config objects with Config function
5.14. Instantiate object from Config object
5.15. Inline ad-hoc Config object
5.16. Typical work of constructor done in TypeScript
5.17. Using ConfigUtils utility class
5.18. Component with utility class in client
5.19. Updating multiple bean properties
5.20. Model bean factory method
5.21. Model bean access
5.22. Adding a listener and initializing
5.23. Creating a property path expression
5.24. Creating a function value expression
5.25. Creating a value expression from a private function
5.26. Creating a value expression from a static function
5.27. Manual dependency tracking
5.28. Comprehensive example of a FunctionValueExpression
5.29. Property paths into struct
5.30. Adding struct properties
9.1. Marking a module as an extension for the Workflow App
9.2. Bootstrapping auto-loaded scripts
9.3. App Path Shortcuts for the workflow app
9.4. Registering a Service Method to Trigger the Tags App
9.5. Service Shortcut for the Tags Sub-App
9.6. Adding a plugin rule to customize the actions toolbar
9.7. Adding a separator and a button with a custom action to a toolbar
9.8. Adding a plugin rule to customize all LinkList property field toolbars
9.9. Using NestedRulesPlugin to customize a subcomponent using its container's API
9.10. Using NestedRulesPlugin to customize a subcomponent
9.11. Registering a plugin
9.12. Loading external resources
9.13. Adding a search button
9.14. Example property file
9.15. Overriding properties
9.16. Localizing content types
9.17. Allows the import of SVG icons in a typescript file
9.18. Content type icon optimized for the sizes 16px, 24px and 32px
9.19. Article form
9.20. Collapsible Property Field Group
9.21. Configuring the Image Editor
9.22. Configuring an image variant
9.23. Configuring an Image Map Editor
9.24. Configuring a validator for image maps
9.25. Defining content types without preview
9.26. Defining excluded content types
9.27. Defining excluded content types in TypeScript
9.28. Defining a content initializer
9.29. Custom property field
9.30. Using a base class method
9.31. HidableMixin.ts
9.32. DocumentFormBase.ts
9.33. CMArticleForm.ts
9.34. DetailsDocumentForm.ts
9.35. Adding a search for content items to be published
9.36. Adding a custom search folder
9.37. Creating a custom action
9.38. Using a custom action
9.39. Adding disapprove action using enableDisapprovePlugin
9.40. Configuring Property Inheritance
9.41. Obtaining The Dragged Objects from the DragEvent
9.42. Obtaining Drag Info Via the Service Agent
9.43. Defining list view fields
9.44. Configuring the thumbnail view
9.45. Two additional attributes for sorting.
9.46. Optional sortDirection Attribute to enable only one sort direction.
9.47. defaultSortColumn Attribute to configure one column as the default for sorting.
9.48. Sass namespace
9.49. namespace + Sass namespace (only needed for parallel styling of own components and components of other packages)
9.50. Overriding theme variables
9.51. Overriding global CoreMedia variables
9.52. Simple Skin Example
9.53. Switching off skins
9.54. TypeScript Skin Constants
9.55. Applying a Skin to a Component
9.56. Usage of CoreIcons_properties.ts
9.57. Usage of CoreMedia Icons in SCSS
9.58. Get Resources in SCSS Code
9.59. Use Image as IconClass
9.60. Importing SVG in TypeScript
9.61. SVG definition
9.62. Generating CSS class for SVG icon
9.63. BEM Example HTML Code
9.64. BEM Example SCSS Code
9.65. Usage of the BEM Plugin
9.66. Using BEM Plugin with Element
9.67. Usage of the BEM Mixin
9.68. VerticalSpacing Plugin Example
9.69. Set Validation State
9.70. Adding a button to open a tab
9.71. Adding a button to open a browser tab
9.72. Base class for browser tab
9.73. Dashboard Configuration
9.74. Fixed Search widget Configuration
9.75. Simple Search Widget Configuration
9.76. Simple Search Widget Type
9.77. Simple Search widget Type with Editor Component
9.78. Simple Search Widget Editor Component
9.79. widget State Class for Simple Search widget
9.80. Override *.exe MIME Type Detection
9.81. Declaring a validator as Spring bean
9.82. Declaring a property validator as Spring bean
9.83. Json declaration of validators
9.84. Implementing a property validator
9.85. Declaring a property validator as Spring bean
9.86. A Json-enabled property validator
9.87. Providing a property validator factory
9.88. Declaring a property validator with Json
9.89. Implementing a content validator
9.90. Declaring a content validator as Spring bean
9.91. A Json-enabled content validator
9.92. Providing a content validator factory
9.93. Declaring a content validator with Json
9.94. Declaring a general validator with Json
9.95. Configuring validator messages
9.96. Defining a Write Interceptor
9.97. Configuring a Write Interceptor
9.98. Configuring Immediate Validation
9.99. Example thumbnail resolver configuration
9.100. Example content thumbnail resolver configuration
9.101. Add a new workflow with the name StudioThreeStepPublication to publicationProcessNames
9.102. Enable notifications for new StudioThreeStepPublication workflow
9.103. Minimal Studio client enabling of a custom translation workflow
9.104. Workflow steps configuration for the built-in 2-step publication workflow
9.105. Defining assignable performers policy for tasks
9.106. Start workflow form extension for Global Link Translation Workflow
9.107. Running workflow form extension for Global Link Translation Workflow
9.108. Workflow localization example
9.109. Workflow validation configuration for the StudioThreeStepPublication workflow
9.110. Adding a New Merge Strategy
9.111. Implementing a ContentHubTransformer (1)
9.112. Implementing a ContentHubTransformer (2)
9.113. Defining a Custom ColumnModelProvider
9.115. Note model
9.116. Representation class for note model
9.117. Service for note handling
9.118. Entity Controller class for TEST operations
9.119. Annotation for bean creation
9.120. REST GET method of NoteEntityController
9.121. Deletion of note in NoteEntityController
9.122. Update of note in NoteEntityController
9.123. Declare NoteEntityController as bean
9.124. Abstract class of Note remote bean
9.125. Implementing class of Note remote bean
9.126. Remote Bean URI path
9.127. Register class as remote bean
9.128. Result of Note
9.129. Invoke class from TypeScript
9.130. Output from remote bean
9.131. Remote bean used inside a component
9.132. Java class for notes list
9.133. Notes list representation
9.134. NotesEntityController for notes list
9.135. Put mapping for notes list
9.136. Adding a Spring bean to Spring configuration
9.137. Interface for remote bean for notes list
9.138. Implementing class for remote bean for notes list
9.139. Register remote bean with Studio
9.140. Test result of remote bean
9.141. Invoke notes in TypeScript
9.142. Display child elements of notes list
9.143. Output of notes list
9.144. Reverse order of notes list
9.145. Request header of PUT request
9.146. Quick Search Default Configuration
9.147. Quick Search Default Configuration
9.148. Adding a FolderChooserListView lookup method
9.149. Quick Create Success Handler Registration
9.150. Locale Switcher Visibility Configuration
9.151. Locale Switcher Strict Hierarchy Flag
10.1. Strictness Configuration
10.2. CKEditor 5 Instance Localization
10.3. Using LocalizationUtils
10.4. Webpack config with inlined assets
10.5. Inlined asset usage in CSS files
10.6. Inlined asset usage in TypeScript files
10.7. Configuration of Embeddable Media in CKEditor 5
10.8. Link Configuration in ckeditorDefault.ts
10.9. Text Alignment Configuration
10.10. Image Alignment Configuration
10.11. CoreMedia Rich Text 1.0 in CoreMedia Studio
10.12. Feature Flag in ckeditorDefault.ts
10.13. CoreMedia Rich Text 1.0 in CoreMedia Studio
10.14. LinkAttributes Configuration
10.15. LinkAttributes Configuration Usage
10.16. LinkAttributes at Plugin Initialization
10.17. Example Usage of mapArtificialXLinkRole
10.18. Example Configuration of mapArtificialXLinkRole
10.19. Adapting Bean reservedClassToElementFilter
10.20. Adapting variables/_coremedia-richtext-1.0.scss
10.21. Adapting partials/_coremedia-richtext-1.0.scss
10.22. Adapting richtext/includes/classes.yml
10.23. Adapting richtext/default.yml
10.24. Adapting ckeditor.ts
10.25. Adapting init.ts
10.26. Adapting DetailsDocumentForm
10.27. CoreMediaRichText: Rules Overview
10.28. CoreMediaRichText: From Data to Data View
10.29. CoreMediaRichText: From Data View to Data
10.30. To Data Processing: Processing Stages
10.31. Sanitation: Default Operation
10.32. Sanitation: Warnings
10.33. Remove CKEditor 5 Plugin Package
10.34. Replace RichTextPropertyField
10.35. Replace TeaserOverlayContainer
10.36. Inline Images in Rich Text
10.37. Adding table cell merge and split commands
10.38. Configuring the rich text symbol mapping
10.39. Customizing the rich text editor toolbar
10.40. Adding a custom icon to the rich text editor toolbar
10.41. Adding InternalLinkButton to the toolbar in TeaserOverlayPropertyField
10.42. Adding two more buttons to the toolbar
10.43. Adding the packageConfig.js in the sencha/src folder
10.44. Adding the reference to the jangaroo.config.js
10.45. Customizing CKEditor 4
10.46. Customizing the CKEditor 4 configuration
10.47. Adding resource path of skin to sencha/src/packageConfig.js
10.48. ckdebug, non-verbose
10.49. ckdebug, verbose
10.50. Add CKEditor 5 Plugin Package
10.51. Replace RichTextPropertyField
10.52. Replace TeaserOverlayContainer
10.53. Replace RichTextArea and CoreMediaRichTextArea
10.54. CoreMedia Rich Text 1.0 in CoreMedia Studio
11.1. Example Output
11.2. Marker Hierarchy
11.3. Configure Access Log
11.4. Configure Security Log
11.5. Configure Default Log
11.6. Configure Logger
11.7. Suppress Security Logging

Search Results

Table Of Contents

Your Internet Explorer is no longer supported.

Please use Mozilla Firefox, Google Chrome, or Microsoft Edge.