Custom UI components

Custom components

Custom components are a powerful extension of the Prisma Admin UI. They allow you to provide a custom UI for displaying your data.

Custom component example

This example shows a custom component for a User record that renders certain fields in a customized way, e.g. the location is displayed as a map and the permissions are rendered as single tags.

How custom components works

Custom components are standard iframe HTML elements which render your data in a custom way. Prisma Admin provides the data for a specific database record to your custom component trough a query string: ${url}?data=${JSON.stringify(data)}. It's possible to have multiple view for single query.

How to add a custom component in Prisma Admin

1. In the Detail area, click the little button that looks like an eye
2. Click Add a view

3. Add custom component info:

   • Name: A name for the custom component (e.g. MyUserView)
   • URL: The HTTP endpoint where the iframe element is being served. Note that Prisma Admin will append the corresponding database record as JSON to the URL as the query string.

Example

You can find a basic example of a custom component that simply renders the database record as JSON here:

const qs = require('qs')
const url = require('url')

module.exports = (req, res) => {
  const parsed = qs.parse(url.parse(req.url).search, {
    ignoreQueryPrefix: true,
  })
  if (parsed.data) {
    res.end(JSON.stringify(JSON.parse(parsed.data), null, 2))
  } else {
    res.end('Please provide data in query string!')
  }
}