---
title: Helper rich-content views
description: Define named rich-content views inside a Helper so app builders can drop approved child Helpers into specific regions of its layout.
type: api-reference
tags: [js-api, helpers, views]
v3_relevant: true
deprecated: false
---
# Helper rich-content views
Define named rich-content views inside a Helper so app builders can drop approved child Helpers into specific regions of its layout.
## Define a rich-content view
Define a list of rich-content views for your helper using the `views` object.
Each key will correspond to the unique view name within the helper, whereas the value is required to be an object to define its configuration, including what helpers are allowed to be dropped into the view.
```js
Fliplet.Helper({
name: 'slider',
render: {
template: [
'',
'',
''
].join('')
},
views: [
{ name: 'myFirstView', displayName: 'View 1' },
{ name: 'mySecondView', displayName: 'View 2', allow: ['slide'] },
{ name: 'myThirdView', displayName: 'View 3', allow: [] }
]
});
```
The example above defines three views:
- `myFirstView` allows any helper to be dropped in
- `mySecondView` only allows an helper called `slide` to be dropped in
- `myThirdView` only allows no helpers to be dropped in
---
## Define a placeholder for a rich-content view
Views can define a placeholder HTML to be rendered when empty. Use the `placeholder` attribute as detailed here below:
```js
Fliplet.Helper({
name: 'slider',
render: {
template: [
''
].join('')
},
views: [
{
name: 'myFirstView',
displayName: 'View 1',
placeholder: 'Please drop content here
'
}
]
});
```
---
## Define where a helper can be dropped into
By default, helpers are not allowed to be dropped into other helpers. However, they can optionally be allowed to be dropped any into rich-content views defined by other helpers. To do so you must define the `childOf` array property in the child helper with a list of helpers it can be dropped to:
```js
// This helper can only be dropped in the "slider" helper
Fliplet.Helper({
name: 'slide',
childOf: ['slider']
});
```
Furthermore, if your parent helper is declaring more than one rich-content view you can restrict your child helper to only be allowed to be dropped into a specific view by using the dot notation as follows:
```js
// This helper can only be dropped in the
// "slider" helper view named "mySecondView"
Fliplet.Helper({
name: 'slide',
childOf: ['slider.mySecondView']
});
```
Note: If you want to allow an helper to be dropped in any other helper with no restrictions, you don't need to define the childOf property.
---
## Further reading