Custom page

Defining a custom page for an Extension (virtualType)

As we've seen from the previous chapter, a developer can register a top-level product with the product function. How about adding a custom page to your extension product? To do that, we can use the function virtualType coming from $plugin.DSL. As an example usage of that method, one could do the following:

import { IPlugin } from '@shell/core/types';

// this is the definition of a "blank cluster" for Rancher Dashboard
// definition of a "blank cluster" in Rancher Dashboard
const BLANK_CLUSTER = '_';


export function init($plugin: IPlugin, store: any) {
  const YOUR_PRODUCT_NAME = 'myProductName';
  const CUSTOM_PAGE_NAME = 'page1';
  
  const { 
    product,
    virtualType
  } = $plugin.DSL(store, YOUR_PRODUCT_NAME);

  // registering a top-level product
  product({
    icon: 'gear',
    inStore: 'management',
    weight: 100,
    to: { // this is the entry route for the Extension product, which is registered below
      name: `${ YOUR_PRODUCT_NAME }-c-cluster-${ CUSTOM_PAGE_NAME }`,
      params: {
        product: YOUR_PRODUCT_NAME,
        cluster: BLANK_CLUSTER
      }
    }
  });

  // => => => creating a custom page
  virtualType({
    labelKey: 'some.translation.key',
    name:     CUSTOM_PAGE_NAME,
    route:    {
      name:   `${ YOUR_PRODUCT_NAME }-c-cluster-${ CUSTOM_PAGE_NAME }`,
      params: {
        product: YOUR_PRODUCT_NAME,
        cluster: BLANK_CLUSTER
      }
    }
  });
}

With the route definition in the router (check the Extension Routing) chapter, you can define which Vue component will be loaded as a custom page. That will act as a "blank canvas" to render anything you want.

The acceptable parameters for the virtualType function are defined here:

Key	Type	Description
name	String	Page name (should be unique)
label	String	side-menu label for this page
labelKey	String	Same as "label" but allows for translation. Will superseed "label"
icon	[String	icon name (based on rancher icons)
weight	Int	Side menu ordering (bigger number on top)
route	Vue Router route config	Route for this custom page

Note: If no label or labelKey is set, then the side-menu label will be the name field