Function View

Overview

Responsive UI applications display a header at the top, a navigation bar to the left, with the content taking the rest of the screen.

As the user navigates to new endpoints in your application, the content area updates to reflect that, while the header and nav bar stay the same. We use the term function view to refer to these individual navigation endpoints since each provides a specific set of business functionality for your application.

Within the content area, each function view displays a title and an optional subtitle at the top. Breadcrumbs and a function toolbar are optional. The function-specific content displays below all of that.

Data Density

We support two different spacing modes for your function views:

• The default mode is what we call data sparse. Data sparse views typically display fewer elements in the screen. These views often correspond to the “mobile first” approach, where the view is designed primarily for tablet and/or mobile use.
• The other mode is what we call data dense. Data dense views typically display more elements in the screen. Desktop apps typically use data dense mode.

Your app may be all data sparse, all data dense, or a mix of both data sparse and data dense views, depending on the app’s needs. For example, an app may be data sparse for most users, with some data dense views reserved for administrative users who are (presumably) using a desktop system.

Layout Options

Responsive UI apps typically use responsive layout, where display blocks take as much height as needed, with their width set by the layout grid. There’s one vertical scrollbar for the entire page.

Responsive UI also supports fixed layout, where all display blocks fit fully within the visible viewport. Each display block in turn displays an internal scrollbar for its content, as needed.

Development

Web component development

Component reference

rui-function-view

Implementation

Begin by importing the rui-layout module into your application.

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

Nest the function content and (optional function toolbar) within a rui-function-view tag.

<rui-function-view titleText="Customer Search" subtitleText="{{results.length}} RESULT(S)" [isBusy]="searching">

    <!-- Function toolbar -->
    <rui-toolbar slot="function-toolbar-below">
         <!-- Function toolbar elements go here -->
    </rui-toolbar>

     <!-- Function content goes here -->

</rui-function-view>

See Toolbar for more information on setting up toolbars in your function view.

Angular wrapper development

Wrapper reference

jha-function-view

Implementation

Begin by importing the JhaLayoutModule into your application.

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

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

export class AppModule(){}

Nest the function content and (optional function toolbar) within a jha-function-view tag.

<jha-function-view jhaTitle="Customer Search" jhaSubtitle="{{results.length}} RESULT(S)" [jhaIsBusy]="searching">

    <!-- Function toolbar -->
    <jha-function-toolbar>
        <jha-button jhaText="Edit" (jhaClick)="startEditing()"></jha-button>
    </jha-function-toolbar>

     <!-- Function content goes here -->

</jha-function-view>

See Toolbar for more information on setting up toolbars in your function view.

Component playground

Design

Figma design

Resize the function view to fit your artboard.

Change the function view title to an appropriate value.

Adobe XD design

Resize the function view to fit your artboard.

Change the function view title to an appropriate value.