Installing Admin Pages

By default when you generate a new service with the generate command e.g:

socialstack generate Api/Things

Your *Service.cs file will contain a call to InstallAdminPages which is commented out by default, as a lot of the time an admin page is not required. This page describes the detail of what InstallAdminPages does.

Ensuring pages are editable

Firstly, we want to make sure admin pages are editable like any other page. We also want to make sure the navigation menu is too. This means sites can insert additional components on to pages as needed or people can rename parts of the admin experience to things that are more appropriate for their business. So, InstallAdminPages does 2 things:

• Creates page entries if a page does not already exist at the URL
• Creates an admin navigation menu entry if a menu entry does not already exist which points at the same URL

By checking if the entry exists by URL, the link text and body of the pages can be changed as much as desired without any risk of a server restart essentially replacing or overwriting your edits.

InstallAdminPages parameters

A typical InstallAdminPages call looks like this:

InstallAdminPages("Users", "fa:fa-user", new string[] { "id", "email", "username" });

This call specifies 3 things:

• The content type name to display on the navigation menu and in page titles
• The icon to use on the navigation menu
• Fields to display on the list of content

Changing the listed fields

It's common to want to change the listed fields after the fact, and there are 2 ways to do this:

• Delete and regenerate. On the admin panel in the pages section, you could delete the page, e.g. the one at /en-admin/thing/, and let InstallAdminPages generate it again using your newly updated config. This usually requires a restart of the site because InstallAdminPages is usually called only once in service constructors. It is however just a normal method and you can call it whenever you want to do so.

• Edit the existing page. The search fields specified in InstallAdminPages end up in the JSON of a particular admin panel page. So if you go in to the pages section of the admin panel, then to the page you want to update e.g. /en-admin/thing/ and edit the page JSON, you'll see the editable list of search fields there and can change it as you need. Here's an example of the default generated JSON:

{
	"c": {
		"t": "Admin/Layouts/List",
		"d": {
			"endpoint": "user",
			"fields": [
				"id",
				"email",
				"username",
				"createdUtc"
			],
			"singular": "User",
			"plural": "users"
		}
	}
}

The array called "fields" is the array that originated from the InstallAdminPages call.

Changing the navigation menu text or icon

Similarly you can take 2 routes here either via deleting and letting a nav menu item get regenerated on restart, or edit the existing one. You'll find these in a section of the admin panel called "Admin Nav Menu Item", located at /en-admin/adminnavmenuitem/.

Installing a totally custom page

You can leave the default InstallAdminPages commented out and instead create pages directly from code. This is done via calling Install on the PageService, typically in the Events.Service.AfterStart event handler. For the page to be treated as part of the admin panel, all it needs is a URL that starts with /en-admin/ - aside from that its content is whatever you need it to be:

// Inside your services constructor, for a service which would like to install pages.
// You can either inject PageService and use it, or more typically, use AfterStart:

Events.Service.AfterStart.AddEventListener((Context context, object sender) => {

    // This route is suggested rather than dependency injection
    // Because some projects (particularly fully headless and micro instances) don't have a page service installed.
    var pageService = Services.Get<PageService>();

    pageService.Install(
		new Page()
		{
			Url = "/en-admin/custom-page/",
			Title = "My custom admin panel page",
			BodyJson = @"{
							""t"": ""Admin/Layouts/Default"",
							""c"": ""Hello world! This is the content of a new admin panel page. Use Admin/Tile to get one or more tiles in your layout.""
						}"
		});

    return new ValueTask<object>(sender);
});

This does of course work for any type of page; it is not specific to admin panel pages.