Create a custom moderation view
This example shows you how you can implement a moderation view with a custom Approve/Reject workflow.
In our example, we want to Approve or Reject products to moderate content on our website:
We want to preview products images
We want to bulk Approve/Reject products
How it works
Smart view definition
Learn more about smart views.
File template.hbs
This file contains the HTML and CSS needed to build the view.
<div class='view-wrapper'>
<div class='table-wrapper'>
<table class='c-table-frame'>
<thead class='l-table-frame-headers'>
<tr class='l-table-frame-headers-line'>
<th
scope='col'
role='button'
class='c-table-frame__header c-table-frame__header--select-all'
>
<div class='c-table-frame__checkbox-select-all'>
<div class='l-table-frame-checkbox-select-all'>
<BetaCheckbox
@value={{this.allSelected}}
@small={{true}}
@disabled={{false}}
@onChange={{fn this.selectAll}}
/>
</div>
</div>
</th>
<th scope='col' class='c-table-frame__header c-table-column-header'>
<span class='c-table-column-header__content'>
<span
class='c-table-column-header__display-name c-table-column-header__display-name--sortable c-table-column-header__display-name--first'
role='button'
>
Product details
</span>
</span>
</th>
<th scope='col' class='c-table-frame__header c-table-column-header'>
<span class='c-table-column-header__content'>
<span class='c-table-column-header__display-name' role='button'>
Images
</span>
</span>
</th>
<th scope='col' class='c-table-frame__header c-table-column-header'>
<span class='c-table-column-header__content'>
<span class='c-table-column-header__display-name' role='button'>
<Button::BetaButton
@type='primary'
@text='Approve'
@size='tiny'
@action={{fn this.triggerSmartAction @collection 'Approve' this.selectedRecords}}
@disabled={{this.disableButtons}}
@class='no-margin'
/>
<Button::BetaButton
@type='danger'
@text='Reject'
@size='tiny'
@disabled={{this.disableButtons}}
@action={{fn this.triggerSmartAction @collection 'Reject' this.selectedRecords}}
@class='no-margin'
/>
</span>
</span>
</th>
</tr>
</thead>
<tbody class='l-table-frame-body'>
{{#each this.formatedRecords as |record|}}
<tr>
<td class='align-top first-column' role=''>
<BetaCheckbox
@value={{record._selected}}
@small={{true}}
@disabled={{false}}
@onChange={{fn this.selectRecord}}
/>
</td>
<td class='align-top'>
<div class='title'>
<LinkTo
@route='project.rendering.data.collection.list.viewEdit.details'
@models={{array @collection.id record.id}}
>
{{record.forest-name}}
</LinkTo>
</div>
<div class='status'>
<span
class='c-badge'
style='--badge-color:#0cc251; --badge-background-color:#0cc25133;'
>
<p class='c-badge__label'>
{{record.forest-state}}
</p>
</span>
</div>
</td>
<td class='second-column'>
{{#each record.forest-imagesSF as |image|}}
<Widgets::Display::FileViewer::WidgetLayout
@value={{image}}
@field={{this.pictureField}}
/>
{{/each}}
</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
<Table::TableFooter
@collection={{@collection}}
@records={{@records}}
@selectedRecordsCount={{this.selectedRecords.length}}
@recordsCount={{@recordsCount}}
@currentPage={{@currentPage}}
@numberOfPages={{@numberOfPages}}
@fetchRecords={{@fetchRecords}}
@canEdit={{@canEdit}}
@isLoading={{@isLoading}}
@displaySearchExtendedButton={{@displaySearchExtendedButton}}
@disablePagination={{false}}
@hasShowMore={{false}}
@class='pagination'
/>
</div>
Last updated