Client Quick Start

This page gets you from service registration to a working metadata-driven page.

1. Register services

using Benevia.Core.Blazor;
using Blazored.LocalStorage;

builder.Services.AddHttpClient("Api", client =>
{
	client.BaseAddress = new Uri(builder.Configuration["ApiBaseUrl"]!);
});

builder.Services.AddScoped(sp =>
	sp.GetRequiredService<IHttpClientFactory>().CreateClient("Api"));

builder.Services.AddBlazoredLocalStorage();
builder.Services.AddCoreBlazor();

AddCoreBlazor() registers the client and Blazor services, including component mappings used by PropertyComponent.

2. Build a graph

Define the data shape your page needs:

private static GraphBuilder BuildGraph() => new GraphBuilder("Customer")
	.Property("Id")
	.Reference("BillingCustomer")
	.Navigation("PrimaryContact", pc => pc
		.Properties(["FirstName", "LastName", "PrimaryEmail"])
		.Property("PrimaryPhone")
		.Navigation("MailingAddress", ma => ma
			.Property("Street")
			.Property("City")
			.Property("State")
			.Property("PostalCode")
			.Reference("Country")));

3. Create a page with DataGraph and PropertyComponent

@page "/customers/{CustomerGuid:guid}"
@page "/customers/new"
@using Benevia.Core.Blazor
@using Benevia.Core.Blazor.DynamicComponents
@using Benevia.Core.Client.DataSets
@using Benevia.Core.Client.GraphDefinitions.Builders
@using Benevia.Core.Client.OData
@using MudBlazor
@inject IODataClient OData

<DataGraph Builder="@BuildGraph" DataSet="@_dataSet" EntityGuid="@CustomerGuid">
	<MudStack Spacing="4">
		<MudPaper Class="pa-4 rounded-lg" Elevation="2">
			<MudText Typo="Typo.h6" Class="mb-4">Profile</MudText>
			<MudGrid Spacing="3">
				<MudItem xs="12" sm="6">
					<PropertyComponent Path="Id" />
				</MudItem>
				<MudItem xs="12" sm="6">
					<PropertyComponent Path="PrimaryContact.FirstName" />
				</MudItem>
				<MudItem xs="12" sm="6">
					<PropertyComponent Path="PrimaryContact.LastName" />
				</MudItem>
				<MudItem xs="12" sm="6">
					<PropertyComponent Path="BillingCustomer" />
				</MudItem>
			</MudGrid>
		</MudPaper>

		<MudPaper Class="pa-4 rounded-lg" Elevation="2">
			<MudText Typo="Typo.h6" Class="mb-4">Contact</MudText>
			<MudGrid Spacing="3">
				<MudItem xs="12" sm="6">
					<PropertyComponent Path="PrimaryContact.PrimaryEmail" />
				</MudItem>
				<MudItem xs="12" sm="6">
					<PropertyComponent Path="PrimaryContact.PrimaryPhone" />
				</MudItem>
			</MudGrid>
		</MudPaper>

		<MudPaper Class="pa-4 rounded-lg" Elevation="2">
			<MudText Typo="Typo.h6" Class="mb-4">Mailing Address</MudText>
			<MudGrid Spacing="3">
				<MudItem xs="12">
					<PropertyComponent Path="PrimaryContact.MailingAddress.Street" />
				</MudItem>
				<MudItem xs="12" sm="6">
					<PropertyComponent Path="PrimaryContact.MailingAddress.City" />
				</MudItem>
				<MudItem xs="12" sm="3">
					<PropertyComponent Path="PrimaryContact.MailingAddress.State" />
				</MudItem>
				<MudItem xs="12" sm="3">
					<PropertyComponent Path="PrimaryContact.MailingAddress.PostalCode" />
				</MudItem>
				<MudItem xs="12" sm="6">
					<PropertyComponent Path="PrimaryContact.MailingAddress.Country" />
				</MudItem>
			</MudGrid>
		</MudPaper>
	</MudStack>
</DataGraph>

@code {
	[Parameter] public Guid? CustomerGuid { get; set; }

	private DataSet _dataSet = null!;

	protected override void OnInitialized()
		=> _dataSet = new DataSet(OData, BuildGraph().Build());
}

4. Understand runtime flow

1. DataGraph requests model metadata for Customer.
2. If CustomerGuid is set, the page loads data with DataSet.LoadAsync(guid). Otherwise it creates a new entity with DataSet.CreateAsync().
3. Each PropertyComponent resolves its editor and labels from metadata.
4. On edit, DataSet.SetAsync(path, value) sends a PATCH and updates local state with the server response.