Skip to main content
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.

​
Template

<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.formattedRecords 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>

  <DataDisplay::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>