Create a record with a multiselect through a many-to-many relationship

Create a record with a multiselect through a many-to-many relationship

Context: In this case, a card has many expense categories through a many to many relationships, using a join table (card expense categories). We want to be able to create a card, selecting the categories, and creating the card expense categories at the same time.

Implementation:

We will use a smart action form with a hook to retrieve the categories as values for the multi select.

Then we implement the creation of cards and expenseCategories in the form.

forest/cards.js

const { collection } = require('forest-express-sequelize');
const { expenseCategories } = require('../models');

// This file allows you to add to your Forest UI:
// - Smart actions: <https://docs.forestadmin.com/documentation/reference-guide/actions/create-and-manage-smart-actions>
// - Smart fields: <https://docs.forestadmin.com/documentation/reference-guide/fields/create-and-manage-smart-fields>
// - Smart relationships: <https://docs.forestadmin.com/documentation/reference-guide/relationships/create-a-smart-relationship>
// - Smart segments: <https://docs.forestadmin.com/documentation/reference-guide/segments/smart-segments>
collection('cards', {
  actions: [
    {
      name: 'Create card',
      type: 'global',
      fields: [
        {
          field: 'name',
          type: 'String',
          isRequired: true,
        },
        {
          field: 'user',
          type: 'Number',
          reference: 'users.id',
          isRequired: true,
        },
        {
          field: 'categories',
          type: ['Enum'],
        },
      ],
      hooks: {
        load: async ({ fields, request }) => {
          const categories = fields.find(
            (field) => field.field === 'categories'
          );
          categories.enums = await expenseCategories
            .findAll({ raw: true })
            .map((category) => category.title);
          return fields;
        },
      },
    },
  ],
  fields: [],
  segments: [],
});

routes/cards.js

Rails version:

lib/forest_liana/collections/card.rb

config/routes.rb

controllers/forest/cards_controller.rb

Last updated

Was this helpful?