Custom Virtual UI rendering

[ChuckJonas]

Virtual fields are great, but they are lacking the ability to control the display in the admin UI.

Simple Example:

Consider a virtual field for product "discount".

Returning a ratio (.20) makes sense for the API, but in the Admin UI it would be nice to be able to display this with some formatting (20% off).

I think the ideal solution would be to allow custom react components or 'render functions' to be defined:

discount: virtual({
        ui: { renderer: ({value}) => <PercentOff val={value} />  } 
        field: schema.field({
          type: schema.Float,
          async resolve(item: any, args, context) {
            return 1 - item.salePrice / item.ListPrice;
          },
        }),
    }),

There are tons of examples where this would make a huge difference to the Admin UI usability. Especially with JSON schema.

[JedWatson]

This is totally a thing you can do!

The only catch is you can't express the React component inline in the schema.

So this line:

ui: { renderer: ({value}) => <PercentOff val={value} />  } 

... needs to point at a file, instead, using the views config option:

ui: { views: require.resolve('./path-to-component') },

There's a few examples of this, but probably my favourite one is the GitHub Repos field in the Prisma Day Workshop I build recently. The virtual field is quite sophisticated and loads repos (ordered by stars) from GitHub's REST API based on a githubUsername text field elsewhere in the schema.

The front-end component then renders the first 10 repos with a star count and a little SVG:

You can find the implementation here: https://github.com/keystonejs/prisma-day-2021-workshop/blob/main/schema/users.ts

We also have an example of using custom views with a JSON field to create a completely custom editor component over repeating nested objects in a list, which is also super powerful. Check out the custom fields example here: https://github.com/keystonejs/keystone/tree/master/examples/custom-field-view

---

Regarding why you can't just express components inline... I know that for simple examples like the one you've included having a separate file is more verbose and it would be nice to not need that.

But the schema isn't something we can bundle for the client side -- the code is intended to run server-side and typically includes a whole lot of other imports that you'd never want Webpack going anywhere near. Not to mention it may include secrets / or just information (like the access control implementation) that you also don't want Webpack going anywhere near.

We can't safely pull out just the rendering code (which may depend on other variables, functions and imports in the file) so the trade-off is that you put the front-end code in a separate file we can safely include in the client-side build and give the schema a pointer to it.

On the up side having that firewall in place means Keystone is simpler, faster, and more secure, so we think creating separate View files is the right trade-off.

[0x7An]

Hi @JedWatson, this looks elegant, is still possible on v6? I couldn't find any reference on docs. If not what's the best solution?

I need to format the string returned by a virtual field.