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 front-end, single-page applications that provide the visual entry point into your Kinetic Platform Space. They connect users with the forms, content, and workflows they need, whether for onboarding, requesting assets, approving changes, or other business operations.

While each Space can have multiple Kapps, it’s important to note that only one front-end bundle can be assigned per Space. This means all Kapps within that Space must share a frontend. However, through conditional rendering and configuration, you can still deliver tailored user experiences to different audiences within the same Space.

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

From a front-end perspective, Kapps define the URL structure and organization for your portal. Each Kapp acts as a routeable segment in the application, typically surfacing a group of related forms through navigation or dynamic routing (e.g., /kapps/hr/forms/onboarding).

Forms are rendered using the <CoreForm /> component from the Kinetic React library. They are loaded dynamically based on the Kapp and form slug and can be extended with custom layout, validation, or rendering logic using component overrides.

You can use Kapps to:

  • Group and filter forms for different audiences
  • Customize display settings, attributes, and permissions
  • Support shared components and navigation within a bundle

While forms live inside Kapps, the portal determines how and when they're shown, whether as embedded components, modal flows, or full-page interactions.

CoreForm Component

Kinetic Forms are rendered server-side (to enable the functionality provided by our form builder), and are rendered in portals using the CoreForm component from the @kineticdata/react library."

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

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

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 Platform 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 about 1 month ago

What’s Next