Admin UI

Admin UI provides user management functionality at /admin-ui path when the AdminUsersFeature plugin is added to your application.

Installation

Plugins.Add(new AdminUsersFeature());

/admin-ui

By default, it also shows some simple API stats on your Admin UI dashboard, linked to the API Explorer.

The Admin UI was designed with room to grow. You can let us know what features you would find most valuable on our GitHub Discussions.

INFO

An IAuthRepository is required to be a registered dependency to use the AdminUsersFeature plugin.

Managing Users

By default, the Add and Edit Users forms contains the default layout of common properties in UserAuth.cs

Customization

To customize this user interface to accommodate custom properties, the UserFormLayout needs to be overridden.

For example, below we have a custom UserAuth called AppUser with additional properties.

// Custom User Table with extended Metadata properties
public class AppUser : UserAuth
{
    public Department Department { get; set; }
    public string? ProfileUrl { get; set; }
    public string? LastLoginIp { get; set; }

    public bool IsArchived { get; set; }
    public DateTime? ArchivedDate { get; set; }

    public DateTime? LastLoginDate { get; set; }
}

public enum Department
{
    None,
    Marketing,
    Accounts,
    Legal,
    HumanResources,
}

The AdminUsersFeature has multiple fiends that can be used to customize the UI including.

Property NameDescription
QueryUserAuthPropertiesColumns visible in query results for users.
QueryMediaRulesWhich columns start appearing at different screen sizes.
UserFormLayoutControl which fields are used for Create/Edit and their placement.

Custom User Form Layout

Similar to the API Explorer FormLayout customization, UserFormLayout is used to control placement and details about individual fields.

appHost.Plugins.Add(new ServiceStack.Admin.AdminUsersFeature {
    // Show custom fields in Search Results
    QueryUserAuthProperties = new() {
        nameof(AppUser.Id),
        nameof(AppUser.Email),
        nameof(AppUser.DisplayName),
        nameof(AppUser.Department),
        nameof(AppUser.CreatedDate),
        nameof(AppUser.LastLoginDate),
    },

    QueryMediaRules = new()
    {
        MediaRules.ExtraSmall.Show<AppUser>(x => new { x.Id, x.Email, x.DisplayName }),
        MediaRules.Small.Show<AppUser>(x => x.Department),
    },

    // Add Custom Fields to Create/Edit User Forms
    FormLayout = new() {
        Input.For<AppUser>(x => x.Email, x => x.Type = Input.Types.Email),
        Input.For<AppUser>(x => x.DisplayName),
        Input.For<AppUser>(x => x.UserName),
        Input.For<AppUser>(x => x.Company,      c => c.FieldsPerRow(2)),
        Input.For<AppUser>(x => x.Department,   c => c.FieldsPerRow(2)),
        Input.For<AppUser>(x => x.PhoneNumber,  c => c.Type = Input.Types.Tel),
        Input.For<AppUser>(x => x.Nickname,     c => {
            c.Help = "Public alias (3-12 lower alpha numeric chars)";
            c.Pattern = "^[a-z][a-z0-9_.-]{3,12}$";
        }),
        Input.For<AppUser>(x => x.ProfileUrl,   c => c.Type = Input.Types.Url),
        Input.For<AppUser>(x => x.IsArchived,   c => c.FieldsPerRow(2)),
        Input.For<AppUser>(x => x.ArchivedDate, c => c.FieldsPerRow(2)),
    }
});

Enabling the use of custom properties as well as formatting for ease of use. UserFormLayout updates the Create and Edit screens in the Admin UI.