Application
Overview
The application component wraps your application’s primary elements:
- A header displays at the top.
- A navigation bar displays on the left. This section includes buttons that link to the application’s content views.
- The rest of the screen displays the content for the currently-selected function.
The application component also embeds and manages several behaviors so you don’t have to, including:
- Stacked views
- Infinite scrolling
- Scroll-to-top behaviors
- Banner notifications
- Session timeouts
And for the web component version, the component acts as a bridge between Angular routing and the non-Angular components.
Development
Web component development
Component reference
jha-app
An Angular component that provides the outermost container for an Angular application that uses the Responsive UI web components.
| Name | Type | Default | Description |
|---|---|---|---|
| routeMatchPrefix | string | '/#' | Specifies the prefix used on routes in Angular so the Responsive UI web components can use route matching to light up the active routes in header and nav buttons. (The web components don’t have Angular routing baked in so they need some clues to identify active routes.) You should leave this at the default value of “/#” for Angular applications that using a HashLocationStrategy. For Angular applications using PathLocationStrategy set the value to empty: “”. |
| themeFilePath | string | './assets/rui-themes' | Specifies the relative pathname from the generated dist folder where you have placed Responsive UI theme files. The jha-app component will load theme files from this specified location. |
| includeSessionTimeout | boolean | true | Specifies whether to embed a session timeout element in the jha-app component. Leave this at the default value of true if your app uses session timeouts. You can set this to a value of false if your app does not use session timeouts. |
| includeUnsavedChangesDialog | boolean | true | Specifies whether to embed the unsaved changes dialog in the jha-app component. Leave this at the default value of true if your app displays the unsaved changes dialog. You can set this to a value of false if your app does not display the unsaved changes dialog. |
Implementation
You import all Responsive UI web components from the rui-wc package, but we still need a handful of Angular elements in Angular applications that consume these web components. The jha-app component in the rui-angular package is one of those Angular elements. It acts as an outer container that stitches together your application header, navigation, and content areas into a single cohesive user experience.
If you’re using the Responsive UI web components in a non-Angular application, you’ll need a non-Angular element to replace the Angular jha-app component.
If you’re in this situation, contact us and we can help you understand what needs to be done.
Begin by importing the JhaLayoutModule from the rui-angular package into your application.
// import into app.module
import { JhaLayoutModule } from '@jha/rui-angular/jha-layout';
@NgModule({
imports: [
JhaLayoutModule,
...
]
})
export class AppModule(){}
Jack Henry applications typically define their header in a component named main-header and their navigation in a component named main-nav. You wire up the header, nav, and content sections in your app.component.html template as shown below. You can omit any jha-app properties that set the default value, although all properties are shown below for clarity even though these are the default values.
<jha-app
routeMatchPrefix="/#"
themeFilePath="./assets/rui-themes"
[includeBannerNotification]="true"
[includeSessionTimeout]="true"
[includeUnsavedChangesDialog]="true">
<!-- Application header: apply the rui-app-header CSS class -->
<main-header class="rui-app-header"></main-header>
<!-- Application nav bar: apply the rui-app-nav CSS class -->
<main-nav class="rui-app-nav"></main-nav>
</jha-app>
Angular component development
Component reference
jha-app
Provides the outermost container for the application
| Name | Type | Default | Description |
|---|---|---|---|
| jhaOnActivateRouterOutlet | event | Event fired when the OnActivate event is fired in the Angular router-outlet. | |
| jhaOnDeactivateRouterOutlet | event | Event fired when the OnDeactivate event is fired in the Angular router-outlet. | |
| jhaOnAttachRouterOutlet | event | Event fired when the OnAttach event is fired in the Angular router-outlet. | |
| jhaOnDetachRouterOutlet | event | Event fired when the OnDetach event is fired in the Angular router-outlet. |
Implementation
Begin by importing the JhaResponsiveCoreModule and JhaLayoutModule into your application.
// import into app.module
import { JhaResponsiveCoreModule } from '@jha/jharesponsive/jha-responsive-core';
import { JhaLayoutModule } from '@jha/jharesponsive/jha-layout';
@NgModule({
imports: [
JhaResponsiveCoreModule.forRoot(),
JhaLayoutModule,
...
]
})
export class AppModule(){}
Jack Henry applications typically define their header in a component named main-header and their navigation in a component named main-nav. You wire up the header, nav, and content sections in your app.component.html template like this:
<jha-app>
<main-header class="jha-main-header"></main-header>
<main-nav class="jha-main-nav" id="jha-main-nav"></main-nav>
<!-- Unsaved Changes Dialog -->
<jha-unsaved-changes-dialog-box></jha-unsaved-changes-dialog-box>
</jha-app>
There is a master “main” HTML page that contains and lays out the header, navigation, and content; this is generated implicitly and automatically by the code above.
Design
The application is a conglomeration of header, navigation, and content, so see other sections for design details.