Editing Admin Pages

The administration panel in SocialStack is just a set of pages as well meaning they are editable in the same way as your frontend and you can create them directly as well. The only thing required of an admin panel page is its URL starts with /en-admin/. These pages are primarily automatically generated by the modules in your project through the InstallAdminPages call which is provided by default and commented out in the *Service.cs file by the generate command. However, there are occasionally times when you're creating a reusable module where you would like your module to manipulate the administration panel page automatically, such as extend it or entirely replace it with something custom. There are a few ways you can do this.

Components an admin panel page can use

To avoid bloating the frontend of a site with components that only admins will use, SocialStack splits components in to 3 groups:

• Email: email only components.
• UI: frontend only components.
• Admin: admin only components.

Simply put, an admin panel page can use all of them. You can make a page purely out of email group components if you wanted. This is because the underlying HTML generator for /en-admin/* pages specifically adds a js script tag for all 3 groups; if you view source on an en-admin page, you'll see the 3 main.js links there.

Injecting JSON into the default generated pages

Alternatively you can manipulate the JSON of the default admin panel pages automatically. This is how, for example, the password reset module injects a "generate link" tile onto the user edit page. In order to allow multiple extensions to manipulate the same page (and again the user edit page is likely to be popular for this kind of extension), the API represents the about-to-be-created page with an in memory structure of the JSON which you can manipulate as needed. That manipulation is done by the Events.Page.BeforeAdminPageInstall event.

Events.Page.BeforeAdminPageInstall.AddEventListener((Context context, Pages.Page page, CanvasRenderer.CanvasNode canvas, Type contentType, AdminPageType pageType) =>
{
		if (contentType == typeof(User) && pageType == AdminPageType.Single)
		{
			// Installing user admin page for a particular user.
			// Add the reset box into the user admin page (as a child of the autoform):
			var tile = new CanvasNode("Admin/Tile");
			tile.AppendChild(new CanvasNode("Admin/PasswordResetButton").With("userId", new {
					name = "user.id",
					type = "urlToken"
			}));
					
			canvas.AppendChild(
				tile
			);
		}

		return new ValueTask<Pages.Page>(page);
});

You could of course just straight swap the whole JSON with something else but doing so would be unfriendly towards other extensions so do try to keep others in mind by generally keeping a consistent structure.