Add CustomViews to EditConfigWithRoot

[cgilly2fast]

I am running into an issue where I need to define the root of the edit collection admin config. But I also need to define a custom view like this: /collections/:collectionSlug/:id/change change being the name of my custom view.

I would like to be able to set the admin config like this:

  admin: {
    group: 'Billing',
    components: {
      views: {
        edit: {
          root: {
            Component: '@/collections/Billings/components/root#BillingRoot',
          },
          change: {
            Component: '@/collections/Billings/components/ChangePlan#ChangePlan'
          }
        },
      },
    },
  },

Or is there a way to do this and I am just not aware of it?

From the code base

 export type EditConfigWithRoot = {
    api?: never;
    default?: never;
    livePreview?: never;
    /**
     * Replace or modify _all_ nested document views and routes, including the document header, controls, and tabs. This cannot be used in conjunction with other nested views.
     * + `root` - `/admin/collections/:collection/:id/**\/*`
     */
    root: Partial<EditViewConfig>;
    version?: never;
    versions?: never;
};

[akhrarovsaid]

Hey @cgilly2fast,

Yeah, this is possible with some adjustment. The way you have it written right now means you will override the root of the entire document view - no doc header, no tabs, everything will be bespoke but it also means you won't have access to the other nested views which is why you would get an error there. See warning banner at the bottom of this section.

If you'd like to override the edit view which is responsible for the view where you can actually edit the document fields in the edit tab of the document view, then you're looking for the default property instead. See table in docs here. Doing it this way will allow you to define another view with its own path which you can put into a tab (for example by defining a tab property in that view config), or link to it by other means.

admin: {
  ...
  components: {
    views: {
      edit: {
        default: {
          Component: '@/collections/Billings/components/root#BillingRoot',
        },
        change: {
          Component: '@/collections/Billings/components/ChangePlan#ChangePlan',
          path: '/change'
        }
      }
    }
  }

If you need to override the entirety of the root document view via views.edit.root and define that custom view, then something you could possibly try is adding a root view for that change view you have, although I'm not positive this will work as I can't remember exactly how these views are handled atm and if it'll thread accordingly. Payload uses path-to-regexp which supports the syntax you have in your original message so it may be worth a shot.

Yeah so, the above won't work unfortunately as it'll still thread through to your root view. But a workaround might be to define it as a root view but change the structure of the path so it's not /:collection/:id/change but maybe /change/:collection/:id and link to it, or to handle this view in your own root component entirely. There's probably many ways you could go about this here.

[cgilly2fast]

Hey @akhrarovsaid ,

Thanks for taking the time to write this response but unfortunately I do need to override the root because I don't want the payload document headers/tabs visible on the page. Here is the page I am working on:

It will be different per document, (one document per user) in my billings collection. I would like to able to push /change the router and then go to my change plan view when a user clicks "Add billing info" for example.

I tried adding the path to the root as you suggested but appears payload ignored it.

I am using payload to build a SaaS product so that is the place where my suggestions/questions come from. I am probably attempting to customize the admin ui much more than most people want/need.

[cgilly2fast]

I am going to make a view at the payload config level and route people there for now.

[cgilly2fast]

I just saw your update, thanks, will look into.

[JarrodMFlesch]

I am wondering if it would make more sense to create a totally custom view at the route: /billing where you load the billing data to display the view. You could still have a billings collection and you would just query it, ie:

const billingInfo = await payload.find({
  collection: 'billing',
  overrideAccess: false,
  user,
  where: {
      ownerField: {
        equals: userID
      }
  }
})

I mean if you had access control setup properly on the billing collection you could probably just query the collection without the where condition.

[cgilly2fast]

This probably is the best way, will reply in the thread what I do when I figure it out.