subitems_list.md

description	Inject a sub-items list into your back office customizations or customize the view.
month_change	false

Sub-items list

The Sub-items List module is meant to be used as a part of the editorial interface of [[= product_name =]]. It provides an interface for listing the sub-items of any location.

Create custom sub-items list view

You can extend the Sub-items List module to replace an existing view or add your own. The example below adds a new timeline view to highlight the modification date.

To recreate it, start by creating the components responsible for rendering the new view. You can create two files:

• assets/js/timeline.view.component.js responsible for rendering the whole view

[[= include_file('code_samples/back_office/subitems/timeline_view/timeline.view.component.js') =]]

• assets/js/timeline.view.item.component.js responsible for rendering a single item

[[= include_file('code_samples/back_office/subitems/timeline_view/timeline.view.item.component.js') =]]

Provide the necessary styling in assets/scss/timeline.view.scss. The example below uses [[= product_name =]]'s SCSS variables for consistency with the rest of the back office interface.

[[= include_file('code_samples/back_office/subitems/timeline_view/timeline.view.scss') =]]

The last step is adding the view module to the list of available views in the system, by using the provided registerView function.

You can create a new view by providing an unique identifier, or replace an existing one by reusing its identifier. The existing view identifiers are defined as JavaScript constants in the @ibexa-admin-ui-modules/sub-items/constants module:

• Grid view: VIEW_MODE_GRID constant
• Table view: VIEW_MODE_TABLE constant

Create a file called assets/js/registerTimelineView.js:

[[= include_file('code_samples/back_office/subitems/timeline_view/registerTimelineView.js') =]]

And include it into the back office using Webpack Encore, together with your custom styles. See configuring assets from main project files to learn more about this mechanism.

const ibexaConfigManager = require('./ibexa.webpack.config.manager.js');

//...

ibexaConfigManager.add({
    ibexaConfig,
    entryName: 'ibexa-admin-ui-layout-js',
    newItems: [
        path.resolve(__dirname, './assets/js/registerTimelineView.js')
    ],
});

ibexaConfigManager.add({
    ibexaConfig,
    entryName: 'ibexa-admin-ui-layout-css',
    newItems: [
        path.resolve(__dirname, './assets/scss/timeline.view.scss'),
    ],
});

Complete the task by running composer run post-install-cmd.

Use sub-items list

!!! caution

If you want to load the Sub-items module from your custom code, you need to load the JS code for it in your view, as it's not available by default.

With plain JS:

[[= include_file('code_samples/back_office/subitems/render_subitems.js') =]]

With JSX:

[[= include_file('code_samples/back_office/subitems/render_subitems.jsx') =]]

Properties list

The <SubItemsModule /> module can handle additional properties. There are two types of properties: required and optional. All of them are listed below.

Required props

Without all the following properties the Sub-items module cannot work.

• parentLocationId {Number} - parent location ID
• restInfo {Object} - backend config object:
  • token {String} - CSRF token
  • siteaccess {String} - SiteAccess identifier
• handleEditItem {Function} - callback to handle edit content action
• generateLink {Function} - callback to handle view content action

Optional properties

Optionally, Sub-items module can take a following list of props:

• loadContentInfo {Function} - loads content item info. Takes two params:
  • contentIds {Array} - list of content IDs
  • callback {Function} - a callback invoked when content info is loaded
• loadContentTypes {Function} - loads content types. Takes one param:
  • callback {Function} - callback invoked when content types are loaded
• loadLocation {Function} - loads location. Takes four params:
  • restInfo {Object} - REST info params:
    • token {String} - the user token
    • siteaccess {String} - the current SiteAccess
  • queryConfig {Object} - query config:
    • locationId {Number} - location ID
    • limit {Number} - content item limit
    • offset {Number} - items offset
    • sortClauses {Object} - the Sort Clauses, for example, {LocationPriority: 'ascending'}
  • callback {Function} - callback invoked when location is loaded
• updateLocationPriority - updates item location priority. Takes two params:
  • params {Object} - parameters hash containing:
    • priority {Number} - priority value
    • location {String} - REST location ID
    • token {String} - CSRF token
    • siteaccess {String} - SiteAccess identifier
  • callback {Function} - callback invoked when location priority is updated
• activeView {String} - active list view identifier
• extraActions {Array} - list of extra actions. Each action is an object containing:
  • component {Element} - React component class
  • attrs {Object} - additional component properties
• items {Array} - list of location's sub-items
• limit {Number} - items limit count
• offset {Number} - items limit offset
• labels {Object} - list of module labels, see sub.items.module.js for details. Contains definitions for sub components:
  • subItems {Object} - list of sub-items module labels
  • tableView {Object} - list of table view component labels
  • tableViewItem {Object} - list of table item view component labels
  • loadMore {Object} - list of load more component labels
  • gridViewItem {Object} - list of grid item view component labels
• languageContainerSelector {String} - selector where the language selector should be rendered

Reuse Sub-items list

To add a Sub-items list on a page that doesn't have the (right) action sidebar, you need to do one of the following things:

• add a <div> element with the .ibexa-extra-actions-container selector
• change the selector in the Sub-items settings by sending the languageContainerSelector prop which takes the selector for the element that renders the languageSelector.