Integrating Forms into Your Portal UI

Once your local development environment is up and running, you're ready to start building a form-driven experience powered by the Kinetic Platform's React components.

1. Understand the Structure: What Is a Kapp?

A Kapp (short for "Kinetic Application") is a namespace within a Space that organizes related forms and assets. From a front-end standpoint, think of it as a folder or module that groups forms under a specific business function (e.g., services, onboarding, facilities).

Each Kapp is accessible via the Kinetic REST API and is rendered using the CoreForm component in the React bundle.

2. Create a Form in the Kinetic Console

Before you can display a form, you’ll need to create one:

Go to the Kinetic Space Console
Navigate to the Kapp you want the form to live in
Under the Build section in the left-hand menu, select Forms.
Name your form and define the field elements in the Form Builder (e.g., name, email, dropdowns, etc.)
Save your form.

📘
If you want more information on how to build your form, please review Building Your First Form in the Getting Started area.

You’ll reference the Kapp slug and Form slug when rendering this form in your front end.

3. Render the Form in React

Use the CoreForm component to embed the form into your front-end app:

Example:

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

const NewHireForm = () => (
  <CoreForm
    kapp="hr"
    form="new-hire"
    onCompleted={() => alert('Form submitted successfully!')}
  />
);

🔎
Need to load an existing submission or pre-fill values?
Use the submission or values props to customize behavior.
See the full prop list in the CoreForm documentation for more details.

4. (Optional) Customize the Layout or States

You can override loading indicators, layouts, and error states using the components prop:

import { CoreForm } from '@kineticdata/react'

const onCompleted = () => alert('Thank you for submitting feedback!');

const FormLayout = ({ form, content }) => (
  <div className="row">
    <div className="col-12">
      <div className="form-header">{form.name}</div>
      <div className="form-container">
        {content}
      </div>
    </div>
  </div>
);

const Pending = () => (
  <div className="loading">Loading form...</div>
);

const FeedbackForm = ({ kappSlug }) => (
  <CoreForm
    kapp={kappSlug}
    form="feedback-form"
    onCompleted={onCompleted}
    components={{
      Pending,
      Layout: FormLayout
    }}
  />
);

In this example:

onCompleted shows a thank-you alert when the form is submitted.
FormLayout is a custom layout wrapper for your form
Pending gives a custom loading spinner or message.

5. Best Practices

Group related forms within the same Kapp for better UX and maintainability
Use consistent slugs (e.g., new-hire, equipment-request) for form routing
Add permissions and categories in the Kinetic Platform to control access

Now You're Ready To:

Display live forms in your portal
Accept and route submissions through Kinetic workflows
Extend your app by chaining additional views or dashboards based on form data

Integrating Forms into Your Portal UI