Running the demo #93
-
|
Hello again,
The documentation is a bit scarce on that imo, so I wanted to run the demo project but whenever I clone the repo and run So my question is: How are you supposed to run the demo? Does someone have a writeup? |
Beta Was this translation helpful? Give feedback.
Replies: 5 comments 8 replies
-
|
Hi @SuddenDev, I'm not certain about the errors you shared, we use Have you read the docs part about customizing components? https://payloadcms.com/docs/admin/components#fields Certainly there is more we can provide when it comes to custom fields, what is it you're looking to do? I'm happy to help! |
Beta Was this translation helpful? Give feedback.
-
|
Hi @DanRibbens, I did read through the documentation, but have a bit of a trouble to wrap my head around it. Maybe it's just me, but an written example guide would be a great addition to the (already good) docs.
I'd highly appreacate it, if you could give like even just a short tutorial or write up! |
Beta Was this translation helpful? Give feedback.
-
|
We will have more tutorials up in the future. I'm going to add this to our list topics to cover in more depth. For now I'll do my best to answer your questions. What I would recommend is if you have a field that you want to reuse throughout your collections or globals, export it from a single place in your app. filename: colorField.js // assuming these are actual components in your app somewhere
import ColorPicker from '../components/ColorPicker';
import ColorChip from '../components/ColorChip';
// let's validate colors just in case
function isHexColor(val) {
return val.match(/^#(?:[0-9a-fA-F]{3}){1,2}$/) || `${val} is not a valid hex color`;
}
const colorField = {
name: 'color',
label: 'Color',
type: 'text',
validate: (val) => isHexColor(val),
admin: {
components: {
Field: ColorPicker,
Cell: ColorChip,
},
},
};
export default colorField;Then in your collection that uses the color: import colorField from '../fields/colorField';
// optionally you use colorField in your fields array unmodified, this is an example of re-use with collection specific changes
const favoriteColor = {
name: 'favoriteColor',
label: 'Favorite Color',
...colorField
};
const Users = {
slug: 'users',
auth: true,
admin: {
useAsTitle: 'email',
},
fields: [
{
name: "email",
label: "Email",
type: "email",
},
favoriteColor,
]
};
export default Users;Nothing fancy going on here, pretty much just writing javascript. The Payload backend needs to understand the You're right about |
Beta Was this translation helpful? Give feedback.
-
|
Hi @DanRibbens, |
Beta Was this translation helpful? Give feedback.
-
|
I mentioned |
Beta Was this translation helpful? Give feedback.
-
|
We published a blog post that covers how to implement custom fields. Posting here for visibility: |
Beta Was this translation helpful? Give feedback.
-
|
So I just tried a couple of things with the config. Replacing the Nav was easy, but I got an error when trying to replace views.dashboard. The error code says "not allowed". My code: My console: Any Ideas? Did I miss something? |
Beta Was this translation helpful? Give feedback.
-
|
Hi again, That looks to be a bug with our validation. I'll open an issue so we can get it patched. edit |
Beta Was this translation helpful? Give feedback.
-
|
Wow, you guys are really quick. Thanks for the quick bugfix! |
Beta Was this translation helpful? Give feedback.
-
|
Hi there, I'm also interested in playing with the demo / sandbox but haven't had any luck starting it up - any ideas? |
Beta Was this translation helpful? Give feedback.
-
|
☝🏼 seems like there's dependency on a build for |
Beta Was this translation helpful? Give feedback.
-
|
NM I'm up and running, needed to just |
Beta Was this translation helpful? Give feedback.
-
|
Hey @ssyberg — yep. Good catch! We're actually re-wiring some things so that soon, you won't need to Will be improved shortly. Let us know if you have any questions as you poke around! |
Beta Was this translation helpful? Give feedback.
Hi @SuddenDev,
We use the
demoin the repo as our develepment playground when building new features or troubleshooting. It could be useful for reference, but it might not provide a ton of value for building your own projects with Payload as your dependency. You're welcome to play with it though! You can usenpm run devfor live reload ordemo:buildwill create a dist of the demo in/dist/bin/.I'm not certain about the errors you shared, we use
yarn buildwhen its time to release each new version of Payload. I am not sure how useful that would be for you.Have you read the docs part about customizing components? https://payloadcms.com/docs/admin/components#fields
Certainly there is more w…