Python Developer Guide
Other documentationsDemoCommunityGitHub
  • Forest Admin
  • Getting started
    • How it works
    • Quick start
      • Flask
      • Django
    • Create your agent
    • Troubleshooting
    • Migrating legacy agents
      • Pre-requisites
      • Recommendations
      • Migration steps
      • Code transformations
        • API Charts
        • Live Queries
        • Smart Charts
        • Route overrides
        • Smart Actions
        • Smart Fields
        • Smart Relationships
        • Smart Segments
  • Data Sources
    • Getting Started
      • Collection selection
      • Naming conflicts
      • Query interface and Native Queries
        • Fields and projections
        • Filters
        • Aggregations
    • Provided data sources
      • SQLAlchemy
      • Django
        • Polymorphic relationships
    • Write your own
      • Translation strategy
        • Structure declaration
        • Capabilities declaration
        • Read implementation
        • Write implementation
        • Intra-data source Relationships
      • Contribute
  • Agent customization
    • Getting Started
    • Actions
      • Scope and context
      • Result builder
      • Static Forms
      • Widgets in Forms
      • Dynamic Forms
      • Form layout customization
      • Related data invalidation
    • Charts
      • Value
      • Objective
      • Percentage
      • Distribution
      • Leaderboard
      • Time-based
    • Fields
      • Add fields
      • Move, rename and remove fields
      • Override binary field mode
      • Override writing behavior
      • Override filtering behavior
      • Override sorting behavior
      • Validation
    • Hooks
      • Collection hook
      • Collection override
    • Pagination
    • Plugins
      • Write your own
    • Relationships
      • To a single record
      • To multiple records
      • Computed foreign keys
      • Under the hood
    • Search
    • Segments
  • Frontend customization
    • Smart Charts
      • Create a table chart
      • Create a bar chart
      • Create a cohort chart
      • Create a density map
    • Smart Views
      • Create a Map view
      • Create a Calendar view
      • Create a Shipping view
      • Create a Gallery view
      • Create a custom tinder-like validation view
      • Create a custom moderation view
  • Deploying to production
    • Environments
      • Deploy on AWS
      • Deploy on Heroku
      • Deploy on GCP
      • Deploy on Ubuntu
    • Development workflow
    • Using branches
    • Deploying your changes
    • Forest Admin CLI commands
      • init
      • login
      • branch
      • switch
      • set-origin
      • push
      • environments:create
      • environments:reset
      • deploy
  • Under the hood
    • .forestadmin-schema.json
    • Data Model
      • Typing
      • Relationships
    • Security & Privacy
Powered by GitBook
On this page

Was this helpful?

  1. Frontend customization
  2. Smart Views

Create a custom tinder-like validation view

PreviousCreate a Gallery viewNextCreate a custom moderation view

Last updated 1 year ago

Was this helpful?

This is the official documentation of the forestadmin-agent-django and forestadmin-agent-flask Python agents.

This example shows you how you can implement a time-saving profile validation view using keyboard keys to trigger approve/reject actions.

In our example, we want to Approve or Reject new customers profiles and more specifically, we want to:

  • preview information from the user's profile,

  • approve a customer by pressing the ArrowRight key,

  • reject a customer by pressing the ArrowLeft key.

How it works

Models definition

Here is the definition of the underlying model for this view

module.exports = (sequelize, DataTypes) => {
  const { Sequelize } = sequelize;
  const customerValidations = sequelize.define(
    'customerValidations',
    {
      firstname: {
        type: DataTypes.STRING,
      },
      lastname: {
        type: DataTypes.STRING,
      },
      email: {
        type: DataTypes.STRING,
      },
      createdAt: {
        type: DataTypes.DATE,
      },
      status: {
        type: DataTypes.STRING,
      },
      avatar: {
        type: DataTypes.STRING,
      },
    },
    {
      tableName: 'customers',
      underscored: true,
      schema: process.env.DATABASE_SCHEMA,
    },
  );

  return customerValidations;
};

Smart view definition

This file contains the HTML, JS, and CSS needed to build the view.

<div class='c-smart-view'>
  <div class='c-smart-view__content'>
    {{#if (eq @recordsCount 0)}}
      <span
        class='c-smart-view_icon fa fa-{{@collection.iconOrDefault}} fa-5x'
      ></span>
      <h1>
        {{@collection.pluralizedDisplayName}}
      </h1>
      <p>
        There are no items to process.
      </p>
    {{/if}}
    {{#unless (eq @recordsCount 0)}}
      <div class='wrapper-view' {{did-insert this.setDefaultCurrentRecord}}>
        <div class='wrapper-list'>
          {{#each @records as |record|}}
            <div
              class='list--item align-left
                {{if (eq @records.firstObject record) "selected"}}'
            >
              <div class='list--item__values'>
                <h3><span>name:</span>
                  {{record.forest-firstname}}
                  {{record.forest-lastname}}</h3>
                <p><span>email:</span> {{record.forest-email}}</p>
                <p>{{moment-format record.forest-createdAt 'LLL'}}</p>
              </div>
            </div>
          {{/each}}
        </div>
        <div class='wrapper-content'>
          <h1>
            {{@recordsCount}}
            items to process
          </h1>
          <p>
            Press
            <i class='fa fa-arrow-right'></i>
            to approve
          </p>
          <p>
            Press
            <i class='fa fa-arrow-left'></i>
            to reject
          </p>
          <div class='record-container'>
            <div class='c-beta-label c-beta-label--top ember-view l-dmb'>
              <div class='c-beta-label__label'>Name</div>
              <p
                class='c-row-value align-left'
              >{{@records.firstObject.forest-firstname}}
                {{@records.firstObject.forest-lastname}}</p>
            </div>
            <div class='c-beta-label c-beta-label--top ember-view l-dmb'>
              <div class='c-beta-label__label'>Email</div>
              <p
                class='c-row-value align-left'
              >{{@records.firstObject.forest-email}}</p>
            </div>
            <div class='row-value-image'>
              <img
                src='{{@records.firstObject.forest-avatar}}'
                width='300'
                height='400'
              />
            </div>
            <div
              class='c-beta-button c-beta-button--secondary'
              onclick={{action
                'triggerSmartAction'
                @collection
                'reject'
                @records.firstObject
              }}
            >Reject</div>
            <div
              class='c-beta-button c-beta-button--primary'
              onclick={{action
                'triggerSmartAction'
                @collection
                'approve'
                @records.firstObject
              }}
            >Approve</div>
          </div>
        </div>
      </div>
    {{/unless}}
  </div>
</div>