The pageId property is crucial here, as it specifies which custom page you want to display when you click the tab. If you wish, you can also customize the insertion point of the menu item via the placement property:
{
// ...other properties
placement:['before','content'],
}
In this case, we are asking to show the tab before the default "Content" tab.
Menu item in the Content navigation sidebar
Similarly, we can use the contentAreaSidebarItems hook to add menu items to the sidebar that is displayed when we are inside the "Content" area:
In this example, it can be seen that it is possible to show (or not) menu items depending on the logged-in user's permissions, or to show labels translated into the user's preferred interface language.
Step 2: Rendering the page
Once you enter the page through one of the links, you can render the content of the custom pages by implementing the renderPage hook:
The strategy to adopt here is is to implement a switch that, depending on the pageId, will render a different, specialized React component.
The hook, in its second ctx argument, provides a series of information and methods for interacting with the main application. It is a good idea to pass it to the page component, in the form of a React prop.
Here's an example page component. It is important to wrap the content inside the Canvas component to give our app the look and feel of the DatoCMS web app:
import{RenderPageCtx}from'datocms-plugin-sdk';
import{Canvas}from'datocms-react-ui';
typePropTypes={
ctx:RenderPageCtx,
};
functionWelcomePage({ ctx }: PropTypes){
return(
<Canvasctx={ctx}>
Hi there!
</Canvas>
);
}
mainNavigationTabs
Use this function to declare new tabs you want to add in the top-bar of the UI.
Return value
The function must return an array of objects with the following structure:
Properties available in context
The following information and methods are available:
settingsAreaSidebarItemGroups
Use this function to declare new navigation sections in the Settings Area sidebar.
Return value
The function must return an array of objects with the following structure:
Properties available in context
The following information and methods are available:
contentAreaSidebarItems
Use this function to declare new navigation items in the Content Area sidebar.
Return value
The function must return an array of objects with the following structure:
Properties available in context
The following information and methods are available:
renderPage
This function will be called when the plugin needs to render a specific
page (see the mainNavigationTabs, settingsAreaSidebarItemGroups and
contentAreaSidebarItems functions).
Properties available in context
The following information and methods are available:
Methods available in context
The following information and methods are available: