Integration
[]
Load the code
The JavaScript needs to be loaded, usually directly from the corresponding HTML file. The standard build does contain index.html with everything necessary, but that is just an example.
The most common and recommended way to load JavaScript is the standard script element:
<script type="text/javascript" src="app.min.js"></script>Of course, it is also possible to load from a relative or even an absolute URL:
<script type="text/javascript" src="https://<domain>/content-picker/app.min.js"></script>The JavaScript file registers the global variable CsMediaLibrary of the type
Configuration is loaded from the relative URL picker-config.json. This configuration is resolved in the frontend, so this file is actually just a HTTP request. The Picker is displayed via onclick event of a button, registered dynamically via DOM. The sample callback shows the JSON value to the user.
Execute the Picker
To initialize and show the Picker, invoke the method named create on the global variable CsMediaLibrary. It takes one argument, object with several properties that can be seen in the TypeScript sources. The most important ones are:
- apiUrl: base URL of the HCMS, ending with hcms/v2.0 (or other version, that is usually not important)
- cancel: callback invoked when the Picker is closed by the "Cancel" button (a function with no argument)
- success: callback invoked when the Picker is closed by the "Import" button (function with an array of objects as an argument)
- Each object in the array is the value of the selected entity (usually picker_image)
Other properties are optional, two of them might be interesting:
- language: the language to use; en when no value is provided
- en or de (other languages are theoretically possible, but translations would have to be added to the sources)
- theme: complex JSON structure with customized theming
- Examples are available in the index.html file in the root of the Content Picker repository or in the shared/lib/Data/themes directory, but not the web/index.html !