Custom filter button plugin for strapi
npm install filter-buttonbash
npm i filter-button
`
#### For Yarn:
`bash
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.
`bash
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.
`bash
'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:
`bash
npm run build
`
#### For Yarn:
`bash
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