# Add browser tab
Add a custom tab displaying selected data to the content browser.
The Universal Discovery Widget (UDW) is a separate React module. By default, it contains two tabs: Browse and Bookmarks.
Follow the instructions below to create and add a new tab called **Images** which displays all content items of the type 'Image'.
## Create tab
First, in `assets/js/image-tab/`, add an `image.tab.module.js` file.
```js
import React, { useContext } from 'react';
import Tab from '@ibexa-admin-ui/src/bundle/ui-dev/src/modules/universal-discovery/components/tab/tab';
import ImagesList from './components/images.list';
const ImageTabModule = () => {
return (
);
};
```
Next, add the tab to the configuration in the same file. Each tab definition is an object containing the following properties:
| Property | Value | Definition |
| --------- | ------- | ------------------------------------------------------------------------------------------------------------------- |
| id | string | Tab ID, for example, `image`. |
| component | element | React component that represents the contents of a tab. |
| label | string | Label text, for example, `Images`. |
| icon | string | Path to the icon, for example, `/bundles/ibexaadminuiassets/vendors/ids-assets/dist/img/all-icons.svg#info-square`. |
```js
ibexa.addConfig(
'adminUiConfig.universalDiscoveryWidget.tabs',
[
{
id: 'image',
component: ImageTabModule,
label: 'Image',
icon: '/bundles/ibexaadminuiassets/vendors/ids-assets/dist/img/all-icons.svg#image',
},
],
true,
);
export default ImageTabModule;
```
The module governs the creation of the new tab.
Complete image.tab.module.js code
```js
import React, { useContext } from 'react';
import Tab from '@ibexa-admin-ui/src/bundle/ui-dev/src/modules/universal-discovery/components/tab/tab';
import ImagesList from './components/images.list';
const ImageTabModule = () => {
return (
);
};
ibexa.addConfig(
'adminUiConfig.universalDiscoveryWidget.tabs',
[
{
id: 'image',
component: ImageTabModule,
label: 'Image',
icon: '/bundles/ibexaadminuiassets/vendors/ids-assets/dist/img/all-icons.svg#image',
},
],
true,
);
export default ImageTabModule;
```
## Add tab to webpack config
In `webpack.config.js`, add the following declaration:
```js
const ibexaConfigManager = require('./ibexa.webpack.config.manager.js');
```
Next, provide configuration for the new module:
```js
ibexaConfigManager.add({
ibexaConfig,
entryName: 'ibexa-admin-ui-udw-tabs-js',
newItems: [path.resolve(__dirname, './assets/js/image-tab/image.tab.module.js')],
});
```
## Provide ReactJS files
Next, you need to provide a set of files used to render the module:
- `images.service.js` handles fetching the images
- `images.list.js` renders the image list
- `image.js` renders a single image
### `images.service.js`
Create a service for fetching the images by adding `images.service.js` to `assets/js/image-tab/services/`:
```js
const handleRequestResponse = (response) => {
if (!response.ok) {
throw Error(response.statusText);
}
return response.json();
};
export const getImages = ({ token, siteaccess, contentId }, callback) => {
const body = JSON.stringify({
ViewInput: {
identifier: 'images',
public: false,
LocationQuery: {
Criteria: {},
FacetBuilders: {},
SortClauses: {},
Filter: { ContentTypeIdCriterion: 5 },
},
},
});
const request = new Request('/api/ibexa/v2/views', {
method: 'POST',
headers: {
Accept: 'application/vnd.ibexa.api.View+json; version=1.1',
'Content-Type': 'application/vnd.ibexa.api.ViewInput+json; version=1.1',
'X-Siteaccess': siteaccess,
'X-CSRF-Token': token,
},
body,
mode: 'cors',
});
fetch(request)
.then(handleRequestResponse)
.then(callback)
.catch((error) => console.log('error:load:images', error));
};
export const loadImageContent = ({ token, siteaccess, contentId }, callback) => {
const body = JSON.stringify({
ViewInput: {
identifier: `image-content-${contentId}`,
public: false,
ContentQuery: {
Criteria: {},
FacetBuilders: {},
SortClauses: {},
Filter: { ContentIdCriterion: contentId },
},
},
});
const request = new Request('/api/ibexa/v2/views', {
method: 'POST',
headers: {
Accept: 'application/vnd.ibexa.api.View+json; version=1.1',
'Content-Type': 'application/vnd.ibexa.api.ViewInput+json; version=1.1',
'X-Siteaccess': siteaccess,
'X-CSRF-Token': token,
},
body,
mode: 'cors',
});
fetch(request)
.then(handleRequestResponse)
.then(callback)
.catch((error) => console.log('error:load:images', error));
};
```
### `images.list.js`
Next, create an image list by adding an `images.list.js` to `assets/js/image-tab/components/`:
```js
import React, { useState, useContext, useEffect } from 'react';
import Image from './image';
import { getImages } from '../services/images.service';
import { RestInfoContext } from '@ibexa-admin-ui/src/bundle/ui-dev/src/modules/universal-discovery/universal.discovery.module';
const ImagesList = () => {
const [images, setImages] = useState([]);
const [page, setPage] = useState(0);
const [itemsPerPage, setItemPerPage] = useState(5);
const [maxPageIndex, setMaxPageIndex] = useState(0);
const restInfo = useContext(RestInfoContext);
const updateImagesState = (response) => {
const images = response.View.Result.searchHits.searchHit.map((item) => item.value.Location);
const modulo = images.length % itemsPerPage;
const maxPageIndex = modulo ? (images.length - modulo) / itemsPerPage : images.length / itemsPerPage - 1;
setImages(images);
setMaxPageIndex(maxPageIndex);
};
const showPrevPage = () => {
const prevPage = page > 0 ? page - 1 : 0;
setPage(prevPage);
};
const showNextPage = () => {
const nextPage = maxPageIndex > page ? page + 1 : maxPageIndex;
setPage(nextPage);
};
const renderItems = () => {
const attrs = {
className: 'c-images-list__items',
style: {
transform: `translate3d(-${page * itemsPerPage * 316}px, 0, 0)`,
},
};
return (