Loading...

Business App starter

A responsive business web app running on desktop, mobile, and tablet.

Build great looking mobile-first web apps, fast

The Business App starter is a collection of best practices, patterns, and components that help you build a web app that works great on desktop and mobile.

The starter builds on Vaadin's productive Java development model and large library of components, adding application level building blocks like a hidable navigation bar, closable navigation tabs, and responsive CRUD editors.

The view templates in the Business App starter are responsive layouts that work on mobile phones, tablets, and desktops.

Try a live demo

Save several days when starting a new project

Even experienced Vaadin development teams can save several days when bootstrapping a new project using the Business App starter. If you are new to Vaadin, you can expect to save more than a week of development time with the Business App starter.

Features, components, and view templates

Application header

Application header bar with tabs and an open user menu.

The application has a user icon with a dropdown menu for actions like showing settings or logging out. It also supports top-level navigation tabs.

Navigation sidebar

  • Multiple levels of navigation items
  • Filter items for fast access
  • Collapsible for efficient space use

Mobile optimized navigation

  • Opens with a menu icon
  • Hides automatically on mobile
  • Swipe to close

Drilldown view template

The Accounts view template lets your users drill into data. The data set is displayed in a grid. When a row is selected, the application navigates to a separate details view that includes a navigation button for getting back to the main data set.

Side drawer drilldown view template

The Payments view template is an example of working with a large data set with distinct states (pending, submitted, confirmed, failed). For each sub-tab, users can view more information about a row in a drawer. On mobile, users get the information full screen instead of in a drawer.

Dashboard view template

The Statistics view template is a starting point for dashboard views. It shows data both in charts and tables.

Edit (CRUD) views

The Personnel view templates give you two optional approaches to editing items. You can display the form either in a side drawer or a bottom drawer. On mobile, both use the full screen for the form.

Installable on desktop and mobile

Business app installed on a desktop.
Business app installed on a mobile device.

Increase engagement by allowing your users to install the app on their devices. Apps created with the Business App starter are Progressive Web Apps (PWA) by default. This means that your users are able to install them on both desktop and mobile devices that support PWA. A true write once, run everywhere experience!

Customizable look and feel

Different visual variations of the same application.

The Business App starter uses the Vaadin Lumo theme which means it's easy to customize to fit your company look and feel. The starter also includes Java helpers for CSS styles so you can take advantage of them with minimal CSS knowledge.

Get started

To get started, generate a new project from the sidebar on this page. You will need a Vaadin account to activate a trial when you first start the application. If you already have a Vaadin Pro subscription or higher, you already have full access to the starter.

Get Started Documentation Demo Demo with tabs

Get Started

Instructions

  1. Extract the downloaded zip into your working directory
  2. Import the Maven project to your Favourite IDE.
    1. Read instructions for Eclipse or IntelliJ IDEA.
  3. Run the Maven goal jetty:run
    1. If you have command line Maven installed you can run mvn jetty:run in terminal
    2. You can debug or run the application as a Maven application in your IDE.
  4. Go to localhost:8080
  5. Read the documentation to learn more