Skip to content
  • Documentation >
  • Administration >
  • Back Office >
  • Sub-items list

Sub-items list

The Sub-items List module is meant to be used as a part of the editorial interface of Ibexa DXP. It provides an interface for listing the sub-items of any Location.

Caution

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

Use sub-items list

With plain JS:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
const containerNode = document.querySelector('#sub-items-container');

    ReactDOM.render(
        React.createElement(ibexa.modules.SubItems, {
            parentLocationId: { Number },
            restInfo: {
                token: { String },
                siteaccess: { String }
            }
        }),
        containerNode
    );

With JSX:

1
2
3
4
5
6
7
8
9
const attrs = {
    parentLocationId: {Number},
    restInfo: {
        token: {String},
        siteaccess: {String}
    }
};

<SubItemsModule {...attrs}/>

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 will not 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 does not 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.