Custom apps

project_manager

TypeScript

import {
  getCustomAppContext,
  CustomAppContext,
} from '@kontent-ai/custom-app-sdk';

const response: CustomAppContext = await getCustomAppContext();

if (response.isError) {
  console.error({
    errorCode: response.code,
    description: response.description,
  });
} else {
  console.log({ context: response.context });
}

TypeScript

import { useState } from 'react';
import { observeCustomAppContext } from '@kontent-ai/custom-app-sdk';

const useAppContext = () => {
  const [appContext, setAppContext] = useState();

  useEffect(() => {
    const { context, unsubscribe } = observeCustomAppContext(setAppContext);

    // Initial context
    setAppContext(context);

    return () => unsubscribe();
  }, []);

  return appContext;
};

TSX

// Uses the 'response' object from the previous code sample
<div>
  <div>
  <strong>Environment ID: </strong>
    <span> { response.context.environmentId } </span>
  </div>
  <div>
    <strong>User ID: </strong>
    <span> { response.context.userId } </span>
  </div>
  <div>
    <strong>User email: </strong>
    <span> { response.context.userEmail } </span>
  </div>
  <div>
    <strong>User roles: </strong>
    {
      response.context.userRoles.map(userRole => (
        <div>
        <strong>Id: </strong><span>{userRole.id}</span> <br />
        <strong> Codename: </strong><span>{userRole.codename}</span>
      </div>
      ))
    }
  </div>
  <br />
  <strong>Config: </strong>
  <pre>
    <code>{ JSON.stringify(response.config) } </code>
  </pre>
</div>

Custom apps | Kontent.ai Learn

Feature	Custom apps	Custom elements
Customizability	Extensive (UI navigation, dialogs)	Limited to content element customization
Development	Supports full applications, API-heavy	Lightweight, smaller widgets
Scope	Environment-level	Element-level
UI integration	Full-screen or dialog

Understand custom apps

Comparison: custom apps vs. custom elements

Create custom apps

Access context with the Custom app SDK

Option 1: Retrieve context once with getCustomAppContext

Option 2: React to context changes with observerCustomApp

About CustomAppContext

Adjust the dialog size

Host custom apps securely

Add custom apps to your project

Use custom apps