Development

Learn how to build responsive web applications by installing and using the Responsive UI web components.

Responsive UI provides the following for developing responsive web apps:

• Web components that allow your team to build and maintain responsive UI applications that implement the UI patterns

• CSS-based theming that provides the appearance for all development components

• A library of icons

• Sample applications for both the web components and Angular wrappers that provide working solutions for you to examine and run:

  • You can copy code from the sample application solution and paste it into your own applications.
  • You can access a running copy of the web components samples here and a running copy of the Angular wrapper samples here.

• Starter template solutions that provide the basic scaffolding your responsive app will need:

  • This can help save time whenever you start a new project.

Code repositories

Use the links below to access the Responsive UI code repositories.

You must have access to Jack Henry GitHub to view these repos. Contact the help desk if you need this access. All repos have been set up as internal, so anyone with access to Jack Henry GitHub can view them.

We are not accepting pull requests for these repositories at this time, but you should feel free to examine this code.

• Code
  • responsive-ui-wc: Responsive UI web components
  • responsive-ui-angular: Responsive UI Angular wrappers and utilities
• Third-Party Support
  • responsive-ui-ag-grid: Responsive UI support of AG Grid
  • responsive-ui-angular-split: Responsive UI CSS support of Angular-Split
  • responsive-ui-jodit: Responsive UI CSS support of Jodit WYSIWYG Editor
  • responsive-ui-prime-ng: Responsive UI CSS support of PrimeNG Angular components
  • responsive-ui-material-design: Responsive UI CSS support of Angular Material Design
  • responsive-ui-ngx-bootstrap: Responsive UI CSS support of NGX Bootstrap components
• Samples
  • responsive-ui-samples-awc: Sample Angular application that uses the Responsive UI web components (live demo)
  • responsive-ui-samples-angular: Sample Angular application that uses the Responsive UI Angular wrappers (live demo)
  • responsive-ui-samples-plugin: Sample application that acts as a hosted plugin
• Templates
  • responsive-ui-template-awc: Template Angular application that uses the Responsive UI web components
  • responsive-ui-template-angular: Template Angular application that uses the Responsive UI Angular wrappers
• Documentation
  • responsive-ui: Documentation site
  • responsive-ui-archives: Lists archived documentation sites
  • responsive-ui-storybook: Storybook stories for documentation

Using the Responsive UI components

You have 3 approaches for using Responsive UI in your applications…

RUI web components within a non-Angular application

• Your app is built using a technology other than Angular, such as React or Blazor.
• Your app uses the Responsive UI web components.
• Your app will import the responsive-ui-wc npm package to get the Responsive UI web components.

RUI web components within an Angular application

• Your app is built using the Angular framework.
• Your app will import the responsive-ui-wc npm package to get the Responsive UI web components.
• Your app will import the responsive-ui-angular npm package to get the Responsive UI Angular extensions.

RUI Angular wrappers within an Angular application

• Your app is built using the Angular framework
• Your app will import the responsive-ui-wc npm package to get the Responsive UI web components.
• Your app will import the responsive-ui-angular npm package to get the Responsive UI Angular wrappers.
• This approach should only be used by teams who started using Responsive UI before the web components were available.

Register to access the Responsive UI packages

Before you can access any Responsive UI installation package, you must first register the Jack Henry Azure Responsive Controls Artifact.

Install the responsive UI packages

You’ll install different packages depending on whether you’re using Angular at the application level.

Angular applications

If you’re using Responsive UI within an Angular application, add the following to your package.json file after registering. Note that you will need both the Angular and web component packages, even if you’re using the Responsive UI web components.

"@jkhy/responsive-ui-angular": "8.2.0"
"@jkhy/responsive-ui-wc": "8.2.0"

Non-Angular applications

If you’re using the Responsive UI web components outside of an Angular application, add the following to your package.json file after registering.

"@jkhy/responsive-ui-wc": "8.2.0"