WASM Blazor Websites

trellispark currently provides three separate WASM Blazor website projects:

• UX-WASM-B2B – Uses UX-AUTH-AAD configured for B2B authentication
• UX-WASM-B2C – Uses UX-AUTH-AAD configured for B2C authentication
• UX-WASM-SA – Uses UX-AUTH-SA configured for Stand-Alone Authentication

trellispark uses Telerik Blazor controls to implement our UX-WASM-Components project library. This means that to customize and rebuild the WASM Blazor websites you will need to obtain a Telerik license.

Project Dependencies

The UX-AUTH-AAD and UX-AUTH-SA projects will pull in the following dependent projects:

• UX-WASM-Components – the Blazor component library that implements the dynamic page builder
• UX-WASM-Services – the services that maintain application state and communicate with the backend server-side Open APIs
• Shared – the shared types used to transfer data between client and server, common interfaces and types.

Program.cs

The region “Needed by trellispark” is required by all WASM projects to initialize the services required to start and run the dynamic page builder.

#region Needed by trellispark

builder.Services.AddTelerikBlazor();

builder.Services.AddSingleton(sp => new HttpClient { BaseAddress = new Uri(builder.Configuration["APIURL"]) });
builder.Services.AddSingleton<EventLog, EventLog>();
builder.Services.AddSingleton<ApplicationState, ApplicationState>();

builder.Services.AddSingleton<HTTPClientService<UserInformation, UserInformation>, HTTPClientService<UserInformation, UserInformation>>();
builder.Services.AddSingleton<HTTPClientService<InstanceInformation, InstanceInformation>, HTTPClientService<InstanceInformation, InstanceInformation>>();
builder.Services.AddSingleton<HTTPClientService<URLParameterInformation, URLParameterInformation>, HTTPClientService<URLParameterInformation, URLParameterInformation>>();
builder.Services.AddSingleton<HTTPClientService<DashboardInformation, PBIEmbedConfig>, HTTPClientService<DashboardInformation, PBIEmbedConfig>>();
builder.Services.AddSingleton<HTTPClientService<DashboardInformation, DashboardInformation>, HTTPClientService<DashboardInformation, DashboardInformation>>();
builder.Services.AddSingleton<HTTPClientService<DocumentInformation, DocumentInformation>, HTTPClientService<DocumentInformation, DocumentInformation>>();
builder.Services.AddSingleton<HTTPClientService<MessageInformation, MessageInformation>, HTTPClientService<MessageInformation, MessageInformation>>();
builder.Services.AddSingleton<HTTPClientService<BookmarkInformation, BookmarkInformation>, HTTPClientService<BookmarkInformation, BookmarkInformation>>();
builder.Services.AddSingleton<HTTPClientService<ExecuteSQLInformation, ExecuteSQLInformation>, HTTPClientService<ExecuteSQLInformation, ExecuteSQLInformation>>();
builder.Services.AddSingleton<HTTPClientService<ExecuteCommandInformation, ExecuteCommandInformation>, HTTPClientService<ExecuteCommandInformation, ExecuteCommandInformation>>();
builder.Services.AddSingleton<HTTPClientService<ExecuteLocalCommandInformation, ExecuteLocalCommandInformation>, HTTPClientService<ExecuteLocalCommandInformation, ExecuteLocalCommandInformation>>();

builder.Services.AddScoped<IPrintingService, PrintingService>();

builder.Services.AddSingleton<IGI_Map, GI_WASM_Map>();
builder.Services.AddSingleton<IGI_Contact, GI_WASM_Contact>();
builder.Services.AddSingleton<IGI_Storage, GI_WASM_Storage>();

#endregion

The HttpClient service is used to establish a general network connection to the backend Open API endpoints. The base URL for the network connection is maintained in wwwroot/appsettings.json.

The EventLog service is used to log events (mostly errors) to the EventLog endpoint where they are looged to application insights and the DAS-RSS database EventLog table.

The ApplicationState service is used to maintain the applications state and act as a signaling service for page updates as the user interacts with the application.

The HTTPClientService generic instantiations are used to maintain connection to the specific backend Open API endpoints required by the application.

For a WASM project, the IGI-X services will use the default empty services for device specific services that would be available in MAUI applications. These empty services are defined in the UX-WASM-Services project in the WASM-MAUI-Services folder.

App.razor – SA project

<Router AppAssembly="@typeof(Program).Assembly"
        AdditionalAssemblies="new[] { 
            typeof(GreatIdeaz.trellispark.UX.AUTH.SA.Pages.Index).Assembly,
            typeof(GreatIdeaz.trellispark.UX.WASM.Components.Pages.Instance).Assembly}">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(GreatIdeaz.trellispark.UX.AUTH.SA.Shared.MainLayout)" />
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(GreatIdeaz.trellispark.UX.AUTH.SA.Shared.MainLayout)">
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

The Router component needs to be extended to include Additional Assemblies for both the UX-AUTH-SA project and UX-WASM-Components projects

App.razor – B2B and B2C projects

<CascadingAuthenticationState>
    <Router AppAssembly="@typeof(Program).Assembly"
            AdditionalAssemblies="new[] {
            typeof(GreatIdeaz.trellispark.UX.AUTH.AAD.Pages.Index).Assembly,
            typeof(GreatIdeaz.trellispark.UX.WASM.Components.Pages.Instance).Assembly}">
        <Found Context="routeData">
            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(GreatIdeaz.trellispark.UX.AUTH.AAD.Shared.MainLayout)">
                <NotAuthorized>
                    @if (!context.User.Identity.IsAuthenticated)
                    {
                        <RedirectToLogin />
                    }
                    else
                    {
                        <p>You are not authorized to access this resource.</p>
                    }
                </NotAuthorized>
            </AuthorizeRouteView>
        </Found>
        <NotFound>
            <LayoutView Layout="@typeof(GreatIdeaz.trellispark.UX.AUTH.AAD.Shared.MainLayout)">
                <p>Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingAuthenticationState>

The Router component needs to be extended to include Additional Assemblies for both the UX-AUTH-AAD project and UX-WASM-Components projects

wwwwroot/index.html

Styling

<link rel="stylesheet" href="GreatIdeaz.trellispark.UX.WASM.SA.styles.css" />
<link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-default@latest/dist/all.css" />
<link rel="stylesheet" id="FontThemeLink" href="https://fonts.googleapis.com/css2?family=Oxygen">
<link rel="stylesheet" id="TelerikThemeLink" href="_content/GreatIdeaz.trellispark.UX.WASM.Components/css/Theme/trellispark.css" />
<link rel="stylesheet" id="AppThemeLink" href="_content/GreatIdeaz.trellispark.UX.WASM.Components/css/app.css" />

The trellispark theming mechanism is setup to override the TelerikThemeLink, AppThemeLink, and FontThemeLink stylesheets that are built into the UX-WASM-Components project.

• The TelerikThemeLink enables a UX Creator to create a new set of Telerik control themes using the Telerik them builder and upload them to cloud storage.
• The AppThemeLink enables a UX Creator to provide a link to a CSS file in cloud storage to overide the application styling.
• The FontThemeLink enables a UX Creator to provide a link to a font that will be applied to the application.

Creation of new Themes is defined by a Workspace Owner. Once a workspace theme has been defined, any workspace user can select it as their default theme for that workspace.

javascript

trellispark uses the Telerik Blazor controls so these lines are always required:

<script src="_content/Telerik.UI.for.Blazor/js/telerik-blazor.js" defer></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

trellispark contains an integration with the Telerik Report Builder in the GI_Report field. To use this, you need to add the following:

Head:
<script src="https://reporting-dev.greatideaz.com/api/reports/resources/js/telerikReportViewer"></script>

Body:
<script src="_content/Telerik.ReportViewer.Blazor/interop.js" defer></script>

trellispark contains an integration with Microsoft PowerBI in the GI_PowerBI field. To use this, you need to add the following:

<script src="_content/GreatIdeaz.trellispark.UX.WASM.Components/powerbi.js"></script>
<script src="_content/GreatIdeaz.trellispark.UX.WASM.Components/pbi-client.js"></script>

the general javascript help functions used throughout the components are included in the following:

<script src="_content/GreatIdeaz.trellispark.UX.WASM.Components/helper.js"></script>

trellispark contains an integration with Google Maps in the GI_Address field that is used in both WASM and MAUI clients. To use this, you need to add the following and use your own Google API key value:

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAcccccc732QQo&libraries=places&v=weekly"></script>

Finally, trellispark uses font awesome:

<script src="https://kit.fontawesome.com/59a972d609.js" crossorigin="anonymous"></script>