Strapi plugin logo for Filter Button

Filter Button

This package provides a custom field for Strapi that lets you add a filter button in no time.

thumbnail for Filter Button

Filter Button

About

App Screenshot

This package provides a custom field for Strapi that lets you add a filter button in no time.

Custom fields are supported since Strapi 4.4+ and offer powerful API to create highly customizable fields.

This plugin lets you view filtered data according to your configurations.

Installation

To install this plugin, you need to add an NPM dependency to your Strapi application:

For NPM:

npm i filter-button

For Yarn:

yarn add filter-button

Now we need to register plugin so strapi can use it. In order to do that we need to create (if not already created) ./config/plugins.js file and add entry to it.

module.exports = {
    'filter-button': {
        enabled: true,
    },
}

Configuration

create relations first for filter button to work

if relation is many to many then add boolean manyToMany:true in configuration

Add webpack.config.js file into src/admin and paste this content there.

'use strict';

/* eslint-disable no-unused-vars */
module.exports = (config, webpack) => {
  config.plugins.push(
    new webpack.DefinePlugin({
      CONTENT_TYPES: JSON.stringify(
        [
          {
            from: 'api::topic.topic', // collection where button will be added
            to: 'api::card.card', // which collection you want to filter
            filterBy: 'title', // field name by which you want to filter
            attributeName: 'viewCards', //attribute name added while adding button
            buttonTitle: 'View Cards', // title of button
          },
          {
            from: 'api::category.category',
            to: 'api::topic.topic',
            filterBy: 'title',
            attributeName: 'viewTopics',
            buttonTitle: 'View Topics',
          },
          {
            from: 'api::category.category', //adding multiple buttons for same collection
            to: 'api::card.card',
            filterBy: 'title',
            attributeName: 'viewCards',
            buttonTitle: 'View Cards',
          }
        ]
      ),
    })
  )
  return config;
};

Then run build:

For NPM:

npm run build

For Yarn:

yarn build

How To Use

  1. Once all necessary configuration is done, create a elation between from and to collections.
  2. Add button from custom fields
  3. make sure attributeName is matching with configurations while creating custom field

Install now

npm install filter-button

STATS

4 GitHub stars32 weekly downloads

Last updated

489 days ago

Strapi Version

4.4.0 and above

Author

github profile image for Kalpesh Rane
Kalpesh Rane

Useful links

Create your own plugin

Check out the available plugin resources that will help you to develop your plugin or provider and get it listed on the marketplace.