PHPackages fab/vidi-frontend - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Search & Filtering](/categories/search) 4. / 5. fab/vidi-frontend ActiveTypo3-cms-extension[Search & Filtering](/categories/search) fab/vidi-frontend ================= Generic List Component for the Frontend where content can be filtered in an advanced way... Veni, vidi, vici! 5.0.10(3y ago)62.9k↓66.7%5[2 issues](https://github.com/fabarea/vidi_frontend/issues)[1 PRs](https://github.com/fabarea/vidi_frontend/pulls)GPL-2.0-or-laterJavaScript Since Oct 27Pushed 8mo ago2 watchersCompare [ Source](https://github.com/fabarea/vidi_frontend)[ Packagist](https://packagist.org/packages/fab/vidi-frontend)[ Docs](https://github.com/fudriot/vidi_frontend)[ RSS](/packages/fab-vidi-frontend/feed)WikiDiscussions master Synced 1mo ago READMEChangelogDependencies (5)Versions (42)Used By (0) Vidi for TYPO3 CMS ================== [](#vidi-for-typo3-cms) Generic List Component where Content can be filtered in an advanced way... Veni, vidi, vici! This extension is based on [Vidi](https://github.com/fabarea/vidi) which provides more or less the same feature set but in the Backend. [![](https://camo.githubusercontent.com/7167f949f48673c928627c135553941ae57fb7996a191260ecf93249d2f822d0/68747470733a2f2f7261772e6769746875622e636f6d2f666162617265612f766964695f66726f6e74656e642f6d61737465722f446f63756d656e746174696f6e2f46726f6e74656e642d30312e706e67)](https://camo.githubusercontent.com/7167f949f48673c928627c135553941ae57fb7996a191260ecf93249d2f822d0/68747470733a2f2f7261772e6769746875622e636f6d2f666162617265612f766964695f66726f6e74656e642f6d61737465722f446f63756d656e746174696f6e2f46726f6e74656e642d30312e706e67) Once installed, it can be configured what content type to render associated with a customizable template in the plugin record in the Backend. On the Frontend side, we use the excellent [DataTables](http://www.datatables.net/) which is a powerful jQuery plugin smart and fast to sort and filter data. The Filter bar is provided by the [Visual Search](http://documentcloud.github.io/visualsearch/) jQuery plugin which offers nice facet capabilities and intuitive search. Live example Compatibility and Maintenance ----------------------------- [](#compatibility-and-maintenance) This package is currently maintained for the following versions: TYPO3 VersionPackage VersionBranchMaintainedTYPO3 11.5.x5.xmasterYesTYPO3 10.4.x4.x-NoTYPO3 9.x3.x-NoTYPO3 9.x2.x-NoTYPO3 7.x1.x-NoProject info and releases ------------------------- [](#project-info-and-releases) Stable version: [https://extensions.typo3.org/extension/vidi\_frontend/](https://extensions.typo3.org/extension/vidi_frontend/) Development version: [https://github.com/fabarea/vidi\_frontend](https://github.com/fabarea/vidi_frontend) ``` git clone https://github.com/fabarea/vidi_frontend.git ``` News about latest development are also announced on Installation and requirement ============================ [](#installation-and-requirement) The preferred way is to install the extension via Composer as follows: ``` composer require fab/vidi-frontend # -> next step is to open the BE and activate the extension in the Extension Manager. ``` You are almost there! Create a Content Element of type "Vidi Frontend" in `General Plugin` > `Generic List Component` and configure at your convenience. [![](https://camo.githubusercontent.com/7fb8c5c5a17ff981c0beecf87607b7f5e88fbbd9313c09f1a4538071a3bc7823/68747470733a2f2f7261772e6769746875622e636f6d2f666162617265612f766964695f66726f6e74656e642f6d61737465722f446f63756d656e746174696f6e2f4261636b656e642d30312e706e67)](https://camo.githubusercontent.com/7fb8c5c5a17ff981c0beecf87607b7f5e88fbbd9313c09f1a4538071a3bc7823/68747470733a2f2f7261772e6769746875622e636f6d2f666162617265612f766964695f66726f6e74656e642f6d61737465722f446f63756d656e746174696f6e2f4261636b656e642d30312e706e67) Template based display ====================== [](#template-based-display) As of Vidi Frontend 1.3, it is possible to configure a custom template to display the records. We can register a new template by TypoScript. ``` plugin.tx_vidifrontend { settings { # Used in plugin "Generic List - with template listTemplates { # We disable existing template for demo purposes 1 > # Best is to use a key as of 100 to not override existing configuration # Tip: get inspired by EXT:vidi_frontend/Resources/Private/Standalone/DemoTemplateList.html 100 { label = My specila list path = EXT:my_extension/Resources/Private/Standalone/MyList.html additionalSettingsHelp ( # We can add additional settings tip for the BE user. # The settings will be passed to list view. ) } } } } ``` Start editing template file `EXT:my_extension/Resources/Private/Standalone/MyList.html`. Route Enhancer ============== [](#route-enhancer) For TYPO3 v9, to be added in `/config/sites/[SITE_IDENTIFIER]/config.yml`. ``` routeEnhancers: VidiFrontend: type: Plugin # limitToPages: [12] routePath: '/content/{action}/{contentElement}-{content}' namespace: 'tx_vidifrontend_pi1' defaults: action: "show" requirements: content: '[0-9].*' contentElement: '[0-9].*' ``` Configuration ============= [](#configuration) The plugin can be configured in various places such as TypoScript, PHP or in the plugin record itself. **Important** by default, the CSS + JS files are loaded for Bootstrap. For a more Vanilla flavor, edit the `path` in the `settings` key in TypoScript and load the right assets for you. See below the comments:: ``` ############################# # plugin.tx_vidifrontend ############################# plugin.tx_vidifrontend { settings { asset { vidiCss { # For none Bootstrap replace "vidi_frontend.bootstrap.min.css" by "vidi_frontend.min.css" path = EXT:vidi_frontend/Resources/Public/Build/StyleSheets/vidi_frontend.bootstrap.min.css type = css } vidiJs { # For none Bootstrap replace "vidi_frontend.bootstrap.min.js" by "vidi_frontend.min.js" path = EXT:vidi_frontend/Resources/Public/Build/JavaScript/vidi_frontend.bootstrap.min.js type = js } } } } ``` Custom Grid Renderer -------------------- [](#custom-grid-renderer) Assumming we want a complete customized output for a column, we can can achieve this by implementing a Grid Render. Here is an exemple for table `fe_users`. We first have to register the new column in the TCA in some `Configuration/TCA/Override/fe_users.php`. ``` $tca = [ 'grid_frontend' => [ 'columns' => [ # The key is totally free here. However we prefix with "__" to distinguish between a "regular" column associated to a field. '__my_custom_column' => [ 'renderers' => array( 'Vendor\MyExt\Grid\MyColumnRenderer', ), 'sorting' => FALSE, 'sortable' => FALSE, 'label' => '', ], ], ], ]; \TYPO3\CMS\Core\Utility\ArrayUtility::mergeRecursiveWithOverrule($GLOBALS['TCA']['fe_users'], $tca); ``` The corresponding class to be placed in `EXT:MyExt/Classes/Grid/MyColumnRenderer`: ``` namespace Vendor\MyExt\Grid; /** * Class to render a custom output. */ class MyColumnRenderer extends Fab\Vidi\Grid\ColumnRendererAbstract { /** * Render a publication. * * @return string */ public function render() { return $output; } ``` Adjust column configuration --------------------------- [](#adjust-column-configuration) Configuration of the columns is taken from the TCA. Sometimes we need to adjust its configuration for the Frontend and we can simply enriches it. Best is to learn by example and get inspired by `EXT:vidi_frontend/Configuration/TCA/fe_users.php`: ``` $tca = array( 'grid_frontend' => array( 'columns' => array( # Custom fields for the FE goes here 'title' => [], ), ), ); ``` Custom Facets ------------- [](#custom-facets) Facets are visible in the Visual Search and enable the search by criteria. Facets are generally mapped to a field but it is not mandatory ; it can be arbitrary values. To provide a custom Facet, the interface `\Fab\Vidi\Facet\FacetInterface` must be implemented. Best is to take inspiration of the `\Fab\Vidi\Facet\StandardFacet` and provide your own implementation. ``` $tca = [ 'grid_frontend' => [ 'facets' => [ new \Vendor\MyExt\Facets\MyCustomFacet(), ], ], ]; \TYPO3\CMS\Core\Utility\ArrayUtility::mergeRecursiveWithOverrule($GLOBALS['TCA']['fe_users'], $tca); ``` The associate class: ```