Usage in Symfony forms¶
Netgen Content Browser supports calling the browser from Symfony forms. To facilitate this, three custom Symfony form types have been implemented:
Single content browser type
Multiple content browser type
Dynamic content browser type
Requirements¶
Before you can use the Content Browser, you need to include its assets in your page head:
<meta name="ngcb-base-path" content="{{ path('ngcb_root') }}">
<link rel="stylesheet" href="{{ asset('main.css', 'ngcb_css') }}">
<script src="{{ asset('main.js', 'ngcb_js') }}"></script>
or just include the provided Twig template:
{{ include('@NetgenContentBrowser/page_head.html.twig') }}
All HTML code blocks which have js-input-browse
or js-multiple-browse
CSS class will be automatically initialized on window load with the included
JavaScript code.
If you use another CSS class, or if you wish to add Content Browser markup via AJAX to your page, you will need to manually initialize the plugin on those elements. In that case, you don’t have to include JavaScript assets in your page head. Instead, you will need to install Content Browser via Yarn/NPM and import the plugin in your own JavaScript code manually.
Content Browser JavaScript module was preinstalled for you when you installed Content Browser via Composer. Activate it in your setup with:
$ yarn add file:vendor/netgen/content-browser-ui
or
$ npm install file:vendor/netgen/content-browser-ui
Import and initialize the Content Browser plugin:
import { InputBrowse, MultipleBrowse } from '@netgen/content-browser-ui';
// initialize single item select plugin
[...document.getElementsByClassName('js-input-browse')].forEach(el => new InputBrowse(el));
// initialize multiple item select plugin
[...document.getElementsByClassName('js-multiple-browse')].forEach(el => new MultipleBrowse(el));
Single content browser type¶
Single content browser type allows you to select a single item of a predefined item type.
Form type class¶
Netgen\ContentBrowser\Form\Type\ContentBrowserType
Available options¶
item_type
This option defines which item type will the browser select
type:
string
, required: Yesstart_location
This option defines in which location the Content Browser will start.
type:
int|string
, required: No, default value:null
custom_params
This option is used to transfer any custom parameters to your backend.
type:
array
, required: No, default value:[]
Other options¶
Parent of this type is the Symfony TextType
type, so any options available
in that type can be used in this type too.
Multiple content browser type¶
Multiple content browser type allows you to select one or more items of a predefined item type.
Form type class¶
Netgen\ContentBrowser\Form\Type\ContentBrowserMultipleType
Available options¶
item_type
This option defines which item type will the browser select
type:
string
, required: Yesmin
This option defines how many items must at least be selected before the dialog can be closed. Use
null
to disable the limit.type:
int
, required: No, default value:null
max
This option defines how many items must at maximum be selected for dialog to be closed. Use
null
to disable the limit.type:
int
, required: No, default value:null
start_location
This option defines in which location the Content Browser will start.
type:
int|string
, required: No, default value:null
custom_params
This option is used to transfer any custom parameters to your backend.
type:
array
, required: No, default value:[]
Other options¶
Parent of this type is the Symfony CollectionType
type, so any options
available in that type can be used in this type too.
Dynamic content browser type¶
Dynamic content browser type allows you to select a single item, however, in
contrast to ContentBrowserType
type, this type allows you to select the item
type before calling the dialog.
This type is the composite one, meaning it is constructed from two child forms,
one that will hold the selected item type (named item_type
) and the one that
will hold the selected item ID (named item_id
).
Form type class¶
Netgen\ContentBrowser\Form\Type\ContentBrowserDynamicType
Available options¶
item_types
This option defines which item types will be available to select from
type:
array
ofstring
values, required: Yesstart_location
This option defines in which location the Content Browser will start.
type:
int|string
, required: No, default value:null
custom_params
This option is used to transfer any custom parameters to your backend.
type:
array
, required: No, default value:[]