Function View

Components > Content Layout > Function View

Use this component to...

Create a view for one of your application’s functions

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.

header

navigation

content

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.

In this function view we see the function title at the top, a function toolbar at the top-right, and the function content below all that.

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

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

Displays a title, optional subtitle, optional toolbar, and hosts content for the current content view.

Name	Type	Default	Description
titleText	string	''	Title displayed at top of the function
subtitleText	string	''	Optional subtitle displayed at top-right of the function
isBusy	boolean	false	Displays a busy indicator for the entire function view when set to true. Set this to true if all data within the function view is currently being loaded, false otherwise. If the data is loaded separately for an individual display block, set jhaIsBusy at the display block level instead.
busyText	string	''	Text displayed below the spinning busy indicator when isBusy is true.
isFixedLayout	boolean	false	Set this property to true if the view uses fixed layout. Leave this property at its default value of false if the view uses responsive layout.
fixedLayoutThresholdWidth	number	0	Specifies the screen width below which the function should switch from fixed layout to a vertically scrolling list of display blocks.
fixedLayoutThresholdHeight	number	0	Specifies the screen height below which the function should switch from fixed layout to a vertically scrolling list of display blocks.
trackScrolling	boolean	false	Set this to a value of true if you want your application to track scrolling updates for infinite scrolling.
rui-scrolled-to-bottom	event		This event fires when the user scrolls to the bottom of the page if you’ve set trackScrolling to true. This event is essential for infinite scrolling.
function-breadcrumbs	slot		Slot for breadcrumbs
function-toolbar-right	slot		Slot for a toolbar to the right of the function view title
function-toolbar-below	slot		Slot for a toolbar below the function view title

Implementation

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

Import the module

// 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.

Function view example

<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

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

Displays a title, optional subtitle, optional toolbar, and hosts content for the current content view.

Name	Type	Default	Description
jhaTitle	string	''	Title displayed at top of the function
jhaSubtitle	string	''	Optional subtitle displayed at top-right of the function
jhaIsBusy	boolean	false	Displays a busy indicator for the entire function view when set to true. Set this to true if all data within the function view is currently being loaded, false otherwise. If the data is loaded separately for an individual display block, set jhaIsBusy at the display block level instead.
jhaBusyText	string	''	Text displayed below the spinning busy indicator when isBusy is true.
function-breadcrumbs	slot		Slot for breadcrumbs
function-toolbar-right	slot		Slot for a toolbar to the right of the function view title
function-toolbar-below	slot		Slot for a toolbar below the function view title

Implementation

Begin by importing the JhaLayoutModule into your application.

Import the module

// 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.

Function view example

<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

Figma design info

You can find this component in the Components - Application Layout page in the Figma UI Kit.

Dev Component	Design Component Name
Function view	RUI / Layout / Function View Switch on the “Has Breadcrumbs” property if the function view displays breadcrumbs.
Function subtitle	Add text, then apply rui/toolbar as the Text Style and rui-pacific/function-title as the Color Style.

Dev Component

Design Component Name

Function view

RUI / Layout / Function View

Switch on the “Has Breadcrumbs” property if the function view displays breadcrumbs.

Function subtitle

Add text, then apply rui/toolbar as the Text Style and rui-pacific/function-title as the Color Style.

Resize the function view to fit your artboard.

Change the function view title to an appropriate value.

Adobe XD design

Adobe XD design info

You can find this component in these artboards in the Adobe XD design samples:

Layout - Header, Expanded Nav, Function View
Layout - Header, Collapsed Nav, Function View
Layout - Nav Elements - Expanded Nav Bar
Layout - Nav Elements - Collapsed Nav Bar
Layout - Nav Mega Menu
Layout - Header Elements – Basics
Layout - Header Menu Buttons
Layout - Header Mega Menu
Layout - Mobile Application
Layout - Tablet Application – Portrait
Layout - Tablet Application - Landscape

Dev Component	Design Component Name
Function view	JHA / Layout / Function View
Function view with space for breadcrumbs	JHA / Layout / Function View for Breadcrumbs
Function subtitle	Add text and apply the “JHA / Text / Function Toolbar” character style.

It can be helpful to lock these container components while you drag other components onto them.

Resize the function view to fit your artboard.

Change the function view title to an appropriate value.

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.

Did this page help you?

Last updated Thu Jun 12 2025