Creating Volto Views
Contents
Creating Volto Views¶
Full View¶
In this chapter we are going to create a new type of view for displaying
contents in a folder. We will call this view full view. In Plone there is a
view called All content with the view id full_view that we will reuse.
We start by creating a file called: components/FullView/FullView.jsx.
/**
* Full view component.
* @module components/theme/View/FullView
*/
import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { Container, Image } from 'semantic-ui-react';
import { FormattedMessage } from 'react-intl';
/**
* Full view component class.
* @function FullView
* @param {Object} content Content object.
* @returns {string} Markup of the component.
*/
const FullView = ({ content }) => (
<Container className="view-wrapper">
<article id="content">
<header>
<h1 className="documentFirstHeading">{content.title}</h1>
{content.description && (
<p className="documentDescription">{content.description}</p>
)}
</header>
<section id="content-core">
{content.items.map(item => (
<article key={item.url}>
<h2>
<Link to={item.url} title={item['@type']}>
{item.title}
</Link>
</h2>
{item.image && (
<Image
clearing
floated="right"
alt={item.image_caption ? item.image_caption : item.title}
src={item.image.scales.thumb.download}
/>
)}
{item.description && <p>{item.description}</p>}
{item.text && item.text.data && (
<p dangerouslySetInnerHTML={{ __html: item.text.data }} />
)}
</article>
))}
</section>
</article>
</Container>
);
/**
* Property types.
* @property {Object} propTypes Property types.
* @static
*/
FullView.propTypes = {
/**
* Content of the object
*/
content: PropTypes.shape({
/**
* Title of the object
*/
title: PropTypes.string,
/**
* Description of the object
*/
description: PropTypes.string,
/**
* Child items of the object
*/
items: PropTypes.arrayOf(
PropTypes.shape({
/**
* Title of the item
*/
title: PropTypes.string,
/**
* Description of the item
*/
description: PropTypes.string,
/**
* Url of the item
*/
url: PropTypes.string,
/**
* Image of the item
*/
image: PropTypes.object,
/**
* Image caption of the item
*/
image_caption: PropTypes.string,
/**
* Type of the item
*/
'@type': PropTypes.string,
}),
),
}).isRequired,
};
export default FullView;
Next we will add the view to the app components. We can do this by adding the following lines to components/index.js.
import FullView from './FullView/FullView';
export { FullView };
Registering The View¶
To register the view we will edit the config.js file. The views
configuration options contains all the views. This object contains an object
called layoutViews which registers all the layout views. We will add the full_view to this object.
import { FullView } from './components';
export const views = {
...defaultViews,
layoutViews: {
...defaultViews.layoutViews,
full_view: FullView,
},
};
Registering a new view called Album View¶
Create the Album View that shows the images in a grid. You can use the Card
class from semantic-ui, components/AlbumView/AlbumView.jsx:
/**
* Album view component.
* @module components/theme/View/AlbumView
*/
import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { Card, Container, Image } from 'semantic-ui-react';
import { FormattedMessage } from 'react-intl';
/**
* Album view component class.
* @function AlbumView
* @param {Object} content Content object.
* @returns {string} Markup of the component.
*/
const AlbumView = ({ content }) => (
<Container className="view-wrapper">
<article id="content">
<header>
<h1 className="documentFirstHeading">{content.title}</h1>
{content.description && (
<p className="documentDescription">{content.description}</p>
)}
</header>
<section id="content-core">
<Card.Group>
{content.items.map(item => (
<Card key={item.url}>
{item.image && (
<Image
alt={item.image_caption ? item.image_caption : item.title}
src={item.image.scales.thumb.download}
/>
)}
<Card.Content>
<Card.Header>
<Link to={item.url} title={item['@type']}>
{item.title}
</Link>
</Card.Header>
</Card.Content>
</Card>
))}
</Card.Group>
</section>
</article>
</Container>
);
/**
* Property types.
* @property {Object} propTypes Property types.
* @static
*/
AlbumView.propTypes = {
/**
* Content of the object
*/
content: PropTypes.shape({
/**
* Title of the object
*/
title: PropTypes.string,
/**
* Description of the object
*/
description: PropTypes.string,
/**
* Child items of the object
*/
items: PropTypes.arrayOf(
PropTypes.shape({
/**
* Title of the item
*/
title: PropTypes.string,
/**
* Description of the item
*/
description: PropTypes.string,
/**
* Url of the item
*/
url: PropTypes.string,
/**
* Image of the item
*/
image: PropTypes.object,
/**
* Image caption of the item
*/
image_caption: PropTypes.string,
/**
* Type of the item
*/
'@type': PropTypes.string,
}),
),
}).isRequired,
};
export default AlbumView;
Then in components/index.js:
/**
* Add your components here.
* @module components
* @example
* import Footer from './Footer/Footer';
*
* export {
* Footer,
* };
*/
import AlbumView from './AlbumView/AlbumView';
import FullView from './FullView/FullView';
export { AlbumView, FullView };
And in config.js:
/**
* Add your config changes here.
* @module config
* @example
* export const settings = {
* ...defaultSettings,
* port: 4300,
* listBlockTypes: {
* ...defaultSettings.listBlockTypes,
* 'my-list-item',
* }
* }
*/
import {
settings as defaultSettings,
views as defaultViews,
widgets as defaultWidgets,
blocks as defaultBlocks,
} from '@plone/volto/config';
import { AlbumView, FullView } from './components';
export const settings = {
...defaultSettings,
};
export const views = {
...defaultViews,
layoutViews: {
...defaultViews.layoutViews,
album_view: AlbumView,
full_view: FullView,
},
};
export const widgets = {
...defaultWidgets,
};
export const blocks = {
...defaultBlocks,
};
export default SummaryView;