Platform Guide
Integrations LibraryGet in Touch!

Introduction to Portals

Suggest Edits

Getting Started with Portals on the Kinetic Platform

Welcome to the world of Portals on the Kinetic Platform, a powerful, flexible way to create beautiful, responsive, and fully customizable user experiences. Whether you're a front-end developer, designer, or platform administrator, portals let you tailor the way users interact with forms, data, and workflows in your organization.

What is a Portal?

Portals are the visual entry point into your Kinetic Space, surfacing forms, content, and workflows to your end users. While each portal can display multiple Kapps (collections of forms, categories, and assets) to support a variety of business processes like onboarding, asset requests, or change approvals, it's important to note that each Space can currently only reference one front-end bundle at a time.

This means all Kapps within a Space must share a common front-end framework. However, through thoughtful configuration and conditional rendering, you can still deliver distinct user experiences for different audiences or use cases, all powered by shared workflows, integrations, and API-driven logic behind the scenes.

Who Should Use This Guide?

  • React Developers looking to build or customize the front end using our @kineticdata/react library
  • Administrators configuring themes, roles, and behavior
  • Designers applying branding and UI polish using bundle overrides
  • IT Operations managing environments, authentication, and data pipelines

Key Concepts

Kapps and Forms

Portals are powered by Kapps—containers that group forms and workflows under a common domain. For example, an HR Kapp may contain forms for onboarding, exit surveys, and equipment requests.

CoreForm Component

All forms are rendered using the <CoreForm /> component from the @kineticdata/react library. It supports loading submissions, customizing behavior, and overriding components for loading states, errors, and layout design.

import { CoreForm } from '@kineticdata/react';

const FeedbackForm = ({ kappSlug }) => (
  <CoreForm
    kapp={kappSlug}
    form="feedback-form"
    onCompleted={() => alert('Thank you for your feedback!')}
  />
);

Bundles

Bundles are more than just themes. They’re your front-end toolkit—combining JavaScript, CSS, and React components into a customizable environment for your portal. Bundles allow you to:

  • Override field renderers
  • Inject libraries like DataTables or Notifie
  • Control error handling and validation visuals

Authentication & Setup

To connect your portal to the Kinetic Platform, you'll configure:

  • Trusted Domains to allow local development access
  • OAuth Clients to manage login and session behavior
  • KineticLib Provider to wrap your app and manage authentication state

Updating Your Portal’s Front-End Bundle

Each Kinetic Space supports a single front-end bundle that controls the appearance and behavior of all forms and pages across your Kapps. You can configure which bundle is used by navigating to your Space Console and updating the settings under the Configuration.

How to Update the Front-End

  1. Go to your Space Console
  2. In the left-hand menu, select Configuration > Settings
  3. Locate the section labeled Display Type
    • Set this to Custom to use a custom front-end bundle (e.g., a React app)
  4. In the Location field, enter the full URL of your hosted bundle
    • This is typically an S3 URL or CDN location (e.g., https://s3.amazonaws.com/{url-here}/bundles/custom-bundle/index.html)
  5. Click Update Space to save your changes

⚠️

Important: Since a Space can only load one front-end bundle at a time, all Kapps and forms in the Space will use this same bundle. Be sure your bundle is designed to handle all use cases and routes.

This configuration tells the platform where to load the UI code that powers your portal experience.

Next Steps

Updated 8 days ago

What’s Next