Home App

The @interopio/home-ui-react library provides React components and hooks that enable you to create and customize a Home App for your io.Connect Browser projects.

The Home App enhances the user and developer experience when creating an io.Connect Browser project. It provides flows for authentication and authorization (including Auth0 integration), and for initial setup in order to acquire all necessary browser permissions from the user. The Home App also includes a Launchpad app which is the central hub for io.Connect apps, Workspaces, Global Layouts, notifications, search and user profile settings.

⚠️ Note that currently the only supported option is to build a Home App that's also a Workspaces App.

The Home App is the entry point of an io.Connect Browser project. Depending on how your Home App is configured, when you first load it in the browser, you may be presented with a login form. After a successful login, the app will initiate a first-time user setup flow which includes granting all required browser permissions to ensure that the io.Connect Browser project will function properly:

If you don't grant all required permissions, the io.Connect Browser platform won't be able to operate and a page for unsuccessful user setup will appear. You will then have to grant the necessary browser permissions manually:

If the setup flow completes successfully, you will be able to start exploring and using the Home App. The Home App in these examples is also a Workspaces App, so it provides all functionalities of any normal Workspaces App. The main operational hub of the Home App is the Launchpad, accessible from the logo button of the Home App. The Launchpad is the place from which you can manage Workspaces and Global Layouts, start apps, select favorites for easy access, use the search bar to find anything within the platform, see notifications and user profile settings:

Launchpad Sections

The Launchpad offers default sections for displaying apps, Workspaces and favorite items. Custom sections can also be added when you create your own Home App. Sections can be rearranged, configured to be collapsible, configured how many items to display at once and how to sort them:

Notification Panel

Available since io.Connect Browser 3.1

The Notification Panel by default is part of the Launchpad, but can also be displayed outside it if you are creating a custom Home App. It's the place where all notifications are consolidated and displayed to the user. Notifications can be sorted and removed individually or all at once:

User Panel

The User Panel by default is part of the Launchpad, but can also be displayed outside it if you are creating a custom Home App. The User Panel shows details about the currently logged in user, settings for the platform and support information:

Layouts Panel

Available since io.Connect Browser 3.1

The Layouts Panel is expandable and is located at the bottom of the Launchpad. It contains the already available Global Layouts and shows whether a Layout is set as the default Global Layout. You can use this panel to save the current arrangement of windows and Workspaces on your screens as a named Global Layout, restore an existing one, remove Layouts, or set the default Global Layout: