Developer Programs
Vendor Integration Program (VIP)
Direct access to Jack Henry's technical integration resources.
Technical Account Manager (TAM)
Get technical integration help from a single point of contact.
Developer Account
Create a developer acccount to access resources that help you integrate with Jack Henry.
Learn
Shared Responsibility
Learn about shared roles and responsibilities of customers and Jack Henry in open banking.
Developer Use Cases
Find a use case that fits your development needs.
Developer Video Gallery
Watch the latest demos, webinars, and more.
Developer Conference
Connect with industry leaders, gain insights from expert speakers, and explore our latest innovations.
Docs
Admin API
Create solutions for an institution's back office support tools.
Authentication Framework
Map customer identities to your existing system IDs.
Consumer API
Access financial data for user accounts, transactions, and more.
Data Broker
Get deeper access to financial institution data.
Enterprise Event System
Respond to events in real-time using this powerful pub/sub-based solution.
jXchange - REST API
Translate business information between Jack Henry and third-party applications using a REST-based API.
jXchange - SOAP API
Translate business information between Jack Henry and third-party applications using a SOAP-based API.
Operational Data Integration (ODI)
Get customized queries for bulk data needs.
Payments
Embed check deposits, ACH, bill pay, cards, and real-time payments.
Plugin Framework
Embed the best of the fintech world directly into your user's dashboard.
SymXchange
Query Symitar core member accounts, post transactions, run PowerOn scripts, and more.
Xperience
Modern UI that provides consistent visual integration across Jack Henry products.

Content Layout

Fundamentals > Content Layout
Learn how to partition and structure the data and functionality within each content view in your application.

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.

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.

The following hierarchy exists for containing data and options within the content area.

  • The function view is the outermost container for a function. It displays the function title, optional subtitle, toolbar, and breadcrumbs at the top of the view, with its content displayed below that. There is only one function view per navigation endpoint.
  • Display blocks are the next level of container in the hierarchy, appearing within the function view. Each display block has a title, an optional subtitle and toolbar, with its content displayed below that. Display blocks are the top-level containers within the function view.
  • Group boxes are an optional next level of container in the hierarchy, appearing within a display block. Each group box has a title and can optionally offer expand/collapse and accordion behavior.
  • Tabs can also be used within a display block. Each tab has a header and content.
  • A subheader can be used to title subsections of content within a display block. It can be a visually lightweight alternative to group boxes.
  • A well can be used to highlight blocks of text or record detail within a display block.

Group boxes and tabs are considered sibling components in that they are each an equivalent level of container, within a display block. You can use group boxes or tabs to partition the content in a display block, but you should not nest tabs within a group box (or vice versa) since that level of grouping tends to make your app less responsive. Instead, try to use display blocks for the majority of your container needs, then resort to tabs or group boxes when needed.

Here we see a function view with its title (“Content Layout”), two display blocks, a tab component in the left display block, and a set of accordion group boxes in the second display block.
Content layout example
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 Wed Apr 19 2023