Studio Developer Manual / Version 2304
Table Of ContentsCopyright CoreMedia GmbH © 2023
CoreMedia GmbH
Altes Klöpperhaus, 5. OG
Rödingsmarkt 9
20459 Hamburg
International
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.
Germany
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.
October 11, 2023- 1. Introduction
- 2. Overview
- 3. Deployment
- 4. Quick Start
- 5. Concepts and Technology
- 6. Structure of the Studio Client Workspace
- 7. Developing with the Studio Client Workspace
- 8. Using the Development Environment
- 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.6. Customizing Property Fields
- 9.7. Hiding Components on Content Forms
- 9.8. Coupling Studio and Embedded Preview
- 9.9. Storing Preferences
- 9.10. Customizing Central Toolbars
- 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.16. Studio Frontend Development
- 9.17. Work Area Tabs
- 9.18. Re-Using Studio Tabs For Better Performance
- 9.19. Dashboard
- 9.20. Configuring MIME Types
- 9.21. Server-Side Content Processing
- 9.22. Available Locales
- 9.23. Toasts and Notifications
- 9.24. Annotated LinkLists
- 9.25. Thumbnails
- 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.28. Feedback Hub
- 9.29. User Manager
- 9.30. User Properties
- 9.31. Adding Entity Controllers
- 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.34. Locale Switcher Configuration
- 10. Rich Text Editing
- 10.1. CKEditor 5 Rich Text Editing
- 10.2. CKEditor 4 Rich Text Editing
- 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
- 12. Configuration Reference
- Glossary
- Index
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 Tables
- 1.1. Typographic conventions
- 1.2. Pictographs
- 1.3. CoreMedia manuals
- 1.4. Changes
- 5.1. TypeScript class to Ext JS example
- 5.2. Runtime Interfaces in TypeScript and Ext JS
- 9.1. Property Fields
- 9.2.
ImageEditorPropertyField
Configuration Settings - 9.3. Hide Service Spring Properties
- 9.4. Different Icon Scales
- 9.5. Predefined Widget Types
- 9.6. Selected predefined validators
- 9.7. Levels of Validators
- 9.8. Connection Struct Properties
- 9.9. Settings Struct Properties
- 9.10. Settings Struct Properties
- 9.11. Connection Struct Properties
- 9.12. Localization for Custom Feedback Hub Adapter
- 9.13.
FeedbackItem
ScoreBarFeedbackItem
- 9.14.
FeedbackItem
RatingBarFeedbackItem
- 9.15.
FeedbackItem
PercentageBarFeedbackItem
- 9.16.
FeedbackItem
GaugeFeedbackItem
- 9.17.
FeedbackItem
KeywordFeedbackItem
- 9.18.
FeedbackItem
ComparingScoreBarFeedbackItem
- 9.19.
FeedbackItem
LabelFeedbackItem
- 9.20.
FeedbackItem
ExternalLinkFeedbackItem
- 9.21.
FeedbackItem
EmptyFeedbackItem
- 9.22.
FeedbackItem
FeedbackLinkFeedbackItem
- 9.23.
FeedbackItem
ErrorFeedbackItem
- 9.24. User Manager Spring Properties
- 9.25. User Provider Property Mapping
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 document 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 document types without preview
- 9.26. Defining excluded document types
- 9.27. Defining excluded document 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 documents 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.114.
- 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. Locale Switcher Visibility Configuration
- 9.149. 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
andCoreMediaRichTextArea
- 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