Skip to main content

BillRuns Component

Overview​

The BillRuns component provides a visual timeline interface for viewing and interacting with bill runs in the APEX platform. It displays bill runs on a horizontal timeline with the ability to select and view details of individual bill runs.

Prerequisites​

  • Billing.Razor library
  • UI.Razor library with HorizontalTimeline component
  • HTTP client configured for billing API endpoints

Installation/Setup​

The BillRuns component is part of the Billing.Razor library and is integrated into the APEX Portal. To use it, ensure:

  1. The Billing.Razor library is referenced in your project:

    <ProjectReference Include="..\..\libs\Billing\Billing.Razor\Billing.Razor.csproj" />

  2. The BillRuns assembly is included in the Router configuration:

    <Router AppAssembly="@typeof(App).Assembly"
            AdditionalAssemblies="new[] { typeof(Billing.Razor.BillRuns).Assembly }">
        ...
    </Router>

  3. Required services are registered:

    builder.Services.AddHttpClient<BillRunsTimelineEventDataProvider>(
        client => {
            client.BaseAddress = new Uri(new Uri(builder.HostEnvironment.BaseAddress), "./api/billing/");
        });

    builder.Services.AddTransient<ITimelineEventDataProvider, BillRunsTimelineEventDataProvider>();

Basic Usage​

The BillRuns component is automatically routed to when accessing the "/billing/billrun" URL:

// Navigate to BillRuns
@inject NavigationManager NavigationManager

void ViewBillRuns()
{
    NavigationManager.NavigateTo("/billing/billrun");
}

API Reference​

Dependencies​

DependencyTypeDescription
TimelineDataProviderITimelineEventDataProviderProvider for timeline events data

Properties​

PropertyTypeDescription
_timelineEventSelectedTimelineEvent?Currently selected timeline event
_timelineOptionsTimelineOptionsConfiguration options for the timeline

Methods​

MethodReturn TypeDescription
HandleEventSelectedTaskHandles the event when a timeline item is selected
OnParametersSetAsyncTaskLifecycle method for component initialization

Components Used​

  1. HorizontalTimeline: Timeline component from UI.Razor
  2. Card: Card components for layout structure

Examples​

Customizing Timeline Options​

To customize the appearance and behavior of the bill runs timeline:

_timelineOptions = new TimelineOptions
{
    TimestampFormat = "MMMM dd, yyyy",
    MaxEventSize = 75,
    Height = 200,
    ShowCurrentDateLine = true
};

Best Practices​

  • Ensure the API endpoint for bill runs data is properly configured
  • Handle the offline state gracefully with appropriate user feedback
  • Provide meaningful details when a bill run is selected
  • Use consistent date formatting across the application
  • Consider user experience for both mouse and touch interactions with the timeline

Common Issues and Solutions​

Issue: Timeline shows no events​

Solution: Verify the API endpoint is correctly configured and returning data. Check network requests to ensure the data is being fetched correctly.

Issue: Selected events don't display details​

Solution: Ensure the event selection handler is working correctly and that the _timelineEventSelected variable is being updated.

Issue: Timeline appearance issues​

Solution: Review the TimelineOptions configuration and CSS styling to ensure proper display.