Application

Components > Application Layout > Application

Use this component to...

Act as the outermost container for your application, unifying the header, nav bar, and content areas

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:

Infinite scrolling
Scroll-to-top behaviors
Banner notifications
Session timeouts

Development

Web component development

Component reference

rui-app

Module: rui-layout - Package: @jkhy/responsive-ui-wc

A component that provides the outermost container for an application that uses the Responsive UI web components.

Name	Type	Default	Description
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.

Implementation

If you’re using the Responsive UI web components but in an Angular application, you may be better off using the jha-app component to get built in functionality such as routing and stacked views.

Begin by importing rui-layout from the rui-wc package into your application.

Import the module

// import into app.module
import '@jkhy/responsive-ui-wc/components/rui-layout/rui-layout-imports';

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 rui-app properties that set the default value, although all properties are shown below for clarity even though these are the default values.

Using the component

<rui-app themeFilePath="./assets/rui-themes">

    <!-- 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>

</rui-app>

Angular wrapper development

Wrapper reference

jha-app

Module: JhaLayoutModule - Package: @jkhy/responsive-ui-angular

Provides the outermost container for the application

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.
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 the module

// import into app.module
import { JhaResponsiveCoreModule } from '@jkhy/responsive-ui-angular/jha-responsive-core';
import { JhaLayoutModule } from '@jkhy/responsive-ui-angular/jha-layout';

@NgModule({
    imports: [
        JhaResponsiveCoreModule.forRoot(),
        JhaLayoutModule,
        ...
    ]
})

export class AppModule(){}

Using the component

<jha-app>
    <main-header class="rui-main-header"></main-header>
    <main-nav class="rui-main-nav"></main-nav>
</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.

Support options

Have questions on this topic?

Join the Responsive UI team in Microsoft Teams to connect with the community.

See something in this page that needs to change?

Send us feedback on this page.

Last updated Tue Sep 26 2023