Comment on page
Add fields
Forest Admin allows creating new Fields on any Collection, either computationally, by fetching data on an external API or based on other data that is available on the connected data sources.
By default, the fields that you create will be read-only, but you can make them filterable, sortable, and writable by using the relevant methods.
When creating a new field you will need to provide:
Field | Description |
|---|---|
columnType | |
dependencies | List of fields that you need from the source records and linked records in order to run the handler |
getValues | Handler which computes the new value for a batch of records |
enumValues (optional) | When columnType is Enum, you must specify the values that the field will support |
This example adds a
user.displayName field, which is computed by concatenating the first and last names.// "user" Collection has the following structure: { id, firstName, lastName }
agent.customizeCollection('user', collection => {
collection.addField('displayName', {
// Type of the new field
columnType: 'String',
// Dependencies which are needed to compute the new field (must not be empty)
dependencies: ['firstName', 'lastName'],
// Compute function for the new field
// Note that the function computes the new values in batches: the return value
// must be an array which contains the new values in the same order than the
// provided records.
getValues: (records, context) =>
records.map(r => `${r.firstName} ${r.lastName}`),
});
});
This example adds a
user.displayName field, which is computed by concatenating the first and last names, and then another which capitalize it.// "user" Collection has the following structure: { id, firstName, lastName }
agent.customizeCollection('user', collection => {
collection
// Create a field which is computed by concatenating the first and last names
.addField('displayName', {
columnType: 'String',
dependencies: ['firstName', 'lastName'],
getValues: (records, context) =>
records.map(r => `${r.firstName} ${r.lastName}`),
})
// Create another field which is computed by uppercasing the first field
.addField('displayNameCaps', {
columnType: 'String',
dependencies: ['displayName'], // You can depend on other computed fields
getValues: (records, context) => records.map(r => r.displayName.toUpperCase()),
});
});
We can improve the previous example by adding the city of the user to the display name.
// Structure:
// User { id, addressId, firstName, lastName }
// Address { id, city }
agent.customizeCollection('user', collection => {
collection.addField('displayName', {
columnType: 'String',
// We added 'address:city' in the list of dependencies,
// which tells forest to fetch the related record
dependencies: ['firstName', 'lastName', 'address:city'],
// The address is now available in the parameters
getValues: (records, context) =>
records.map(r => `${r.firstName} ${r.lastName} (from ${r.address.city})`),
});
});
Let's now add a
user.totalSpending field by summing the amount of all orders.// Structure
// User { id }
// Order { id, customer_id, amount }
agent.customizeCollection('user', collection => {
collection.addField('totalSpending', {
columnType: 'Number',
dependencies: ['id'],
getValues: async (records, context) => {
const recordIds = records.map(r => r.id);
// We're using Forest Admin's query interface
// (you can use an ORM or a plain SQL query)
const filter = {
conditionTree: { field: 'customer_id', operator: 'In', value: recordIds },
};
const aggregation = {
operation: 'Sum',
field: 'amount',
groups: [{ field: 'customer_id' }],
};
const rows = await context.dataSource
.getCollection('order')
.aggregate(filter, aggregation);
return records.map(record => {
const row = rows.find(r => r.group.customer_id === record.id);
return row?.value ?? 0;
});
},
});
});
Let's imagine that we want to check if the email address of our users is deliverable. We can use a verification API to perform that work.
The API we're using is fictional, and the structure of the response is:
{
"[email protected]": {
"usernameChecked": false,
"usernameValid": null,
"domainValid": true
},
"[email protected]": {
"usernameChecked": false,
"usernameValid": null,
"domainValid": true
}
}
const emailVerificationClient = require('@sendchimplio/client');
emailVerificationClient.setApiKey(process.env.SENDCHIMPLIO_API_KEY);
// "User" Collection has the following structure: { id, email }
agent.customizeCollection('user', collection => {
collection.addField('emailDeliverable', {
columnType: 'Boolean',
dependencies: ['email'],
getValues: async (records, context) => {
// Call the API to verify emails
const response = await emailVerificationClient.verifyEmails(
records.map(r => r.email),
);
// Return values in the same order than the source records
return records.map(r => {
const check = response[r.email];
return check.domainValid && (!usernameChecked || usernameValid);
});
},
});
});
When adding many fields, keep in mind that:
- You should refrain from making queries to external services
- Use relationships in the
dependenciesarray when that is possible - Use batch APIs calls instead of performing requests one by one inside of the
records.maphandler.
- Only add fields you need in the
dependencieslist- This will reduce the pressure on your data sources (fewer columns to fetch)
- And increase the probability of reducing the number of records that will be passed to your handler (records are deduplicated).
- Do not duplicate code between handlers of different fields: fields can depend on each other (no cycles allowed).
Last modified 1mo ago