Infsoft.WPE.App.Base 1.1.5

Workplace Experience (WPE) App Base Library

This library contains attributes and interfaces required to implement dynamic apps.

SUMMARY: Your app should implement IAppExtensions and annotate components with the below attributes, any annotated component must implement AppComponent or AppJsComponent and can use it's method to resolve services registered in the IAppExtensions.RegisterServices method. Additionally you must define all used routes (that require authentication).

Attributes

The following attributes allow marking of Blazor components as specific components, which can be dynamically rendered in infsoft's Workplace Experience application.

• App Fullscreen content of module (can hide navBar completely), allows arbitrary query (annotated by [SupplyFromQuery]) and static parameters (annotated with [Parameter])

• Tile Content to be rendered as tile, allows arbitrary static parameters (annotated with [Parameter]), but no query parameters

• NavEntry Entry to be rendered in the app's navbar, allows arbitrary static parameters (annotated with [Parameter]), but no query parameters

• PoIComponent Content to be rendered for a singular POI

  This component requires the interface IPoIParameters to be implemented. Any PoI component receives the unique identifier of the PoI it was opened for, as well as any properties the PoI might specify, but in constrast to the other components no further parameters are allowed

• Overlay Provides the possibility to render popups or other overlays ontop of the whole app

Notable changes to pre 1.0:

• No mobile attribute present or necessary, use media-queries instead.
• Reduced number of attribute entrypoints
• Interface changes to comply with new architecture of application

PoI Buttons

On any given PoI additional buttons can be displayed, if you wish to provide such an button implement the IPoIButton interface and annotate your class with the PoIButton attribute. Buttons are shown above any of the PoI components.

Defining Route mappings

This section is only relevant for the web application, native apps will ignore the mappings.

The application utilizes a Backend for Frontend (BFF) pattern, as such all requests that require authentication/authorization on the backend, must be proxied by the web backend. To achieve this dynamically, each app must define the mappings as assembly attributes by including the attribute in the project file (.csproj). Every request made by your app, will be filtered according to your mappings and whenever a request is made towards a defined baseUrl, it is replaced with the web app's base url and a dynamically generated hash. Then the request is made towards the web backend, which utilizes the application cookie to authorize the request and proxy it to your original URL and then returning the backend's response.

Sample:

<ItemGroup>
  <AssemblyAttribute Include = "Infsoft.WPE.App.Base.RouteMappingAttribute">
    <_Parameter1>https://postman-echo.com</_Parameter1>
  </AssemblyAttribute>
  <AssemblyAttribute Include = "Infsoft.WPE.App.Base.RouteMappingAttribute">
    <_Parameter1> https://localhost:5003</_Parameter1>
  </AssemblyAttribute>
</ItemGroup>

Dependency Injection

Services can be registered with the container for Dependency Injection. Simply follow the below guidelines.

Service registration

Every developed module might require the registration of services for dependency injection. To allow this, an extension point is provided by implementing the corresponding IAppExtensions interface. Every service, that is registered with the RegisterServices method, will be registered in a custom scope unique to the module. This allows for quick dynamic assembly loading after startup.

Service injection

To inject your services, two possiblities exist:

1. In normal .cs files, you can use constructor injection as you would anywhere else
2. In razor components, you have to inherit from the provided AppComponent or AppJsComponent and use the provided method to set your service instances. Services, that are provided globally (by infsoft), e.g. the JavaScript runtime, can be injected with the @inject directive. Sample:

    @using Infsoft.WPE.App.Modules.Base
    @inherits AppComponent
    @inject IJSRuntime JSRuntime
   
    @code {
        private ISampleService SampleService;
   
        protected override void OnInitialized()
        {
            base.OnInitialized();
            SampleService = GetService<ISampleService>();
        }
    }
   

JavaScript Modules

One caveat of separating the assemblies in different contexts, is that you cannot directly inject IJSRuntime into your code wrapper for the JavaScript code. You can only use IJSRuntime by injecting it in the razor classes and then passing it along to your module class as a method parameter.

Therefore, if you do not have JS code shared between multiple razor classes, you can simply inherit from AppJsComponent. This class provides you with InvokeVoidAsync and InvokeAsync methods, which will automatically load your module scoped JavaScript.

Sub components

While inheriting from AppComponent and AppJsComponent works for direct entry points like tiles, PoI components and such, you might want to structure your code into more components.

Components referenced by your components (such a single tile) must not implement one of the above mentioned base classes, instead inherit from SubComponent. This is necessary to receive the correct localization definition required for all localization as a cascading value.