f6eb027f23
The comments injected into auto-generated files have gotten misformatted due to linting. Here is the proper format, where both comments are adjacent to one another: ```js /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */ /* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */ ``` Some comments were also written with casing issues, here's an example: ```js /* DO NOT MODIFY it because it could be re-written at any time. */ ```
Payload Virtual Fields Example
This example demonstrates how to implement virtual fields into Payload.
Quick Start
To spin up this example locally, follow these steps:
- Clone this repo
cdinto this directory and runyarnornpm installcp .env.example .envto copy the example environment variablesyarn devornpm run devto start the server and seed the databaseopen http://localhost:8000/adminto access the admin panel- Login with email
dev@payloadcms.comand passwordtest
How it works
The term virtual field is used to describe any field that is not stored in the database and has its value populated within an afterRead hook.
In this example you have three collections: Locations, Events and Staff.
Locations Collection
In the locations collection, you have separate text fields to input a city, state and country.
Everything else here are virtual fields:
location: Text field providing a formatted location name by concatenating city + state + country which is then used as the document title.
events: Relationship field containing all events associated with the location.
nextEvent: Relationship field that returns the event with the closest date at this location.
staff: Relationship field containing all staff associated with the location.
Events Collection
This collection takes an event name and date. You will select the event location from the options you have created in the location collection.
Next we have the Ticket fields, you can input the ticket price, sales tax and additional fees - then our virtual field will calculate the total price for you:
totalPrice: Number field that is automatically populated by the sum of price * tax + fees
Staff Collection
The staff collection contains text fields for a title, first and last name.
Similarly to Events, you will assign a location to the staff member from the options you created previously.
This collection uses the following virtual field to format the staff name fields:
fullTitle: Text field providing a formatted name by concatenating title + firstName + lastName which is then used as the document title.
In the code, navigate to src/collections to see how these fields are populated and read more about afterRead hooks here.
Development
To spin up this example locally, follow the Quick Start.
Seed
On boot, a seed script is included to create a user, a home page, and a the following redirects for you to test with:
- From
/redirect-to-externaltohttps://payloadcms.com - From
/redirect-to-internalto/redirected
Production
To run Payload in production, you need to build and serve the Admin panel. To do so, follow these steps:
- First invoke the
payload buildscript by runningyarn buildornpm run buildin your project root. This creates a./builddirectory with a production-ready admin bundle. - Then run
yarn serveornpm run serveto run Node in production and serve Payload from the./builddirectory.
Deployment
The easiest way to deploy your project is to use Payload Cloud, a one-click hosting solution to deploy production-ready instances of your Payload apps directly from your GitHub repo. You can also deploy your app manually, check out the deployment documentation for full details.
Questions
If you have any issues or questions, reach out to us on Discord or start a GitHub discussion.