App integration

Personalize the PIM by incorporating and customizing it with your own custom applications.

App integration allows you to introduce new functionality directly into Struct PIM, opening up possibilities for extending the system to better fit your workflows.

This approach enhances the flexibility of the platform while maintaining a consistent and user-friendly experience. The setup between your custom apps and the PIM is designed to be simple and straightforward, enabling you to get started quickly, iterate efficiently, and explore new features with minimal technical overhead.

The streamlined process ensures that custom and native functionality coexist seamlessly within the same interface, helping you extend the platform without disrupting existing workflows. By combining custom and built-in features, you can enhance productivity while keeping the overall user experience intuitive and cohesive.

---

What you can do with App Integration

• Easily integrate custom apps into the PIM through a user-friendly setup process, allowing you to connect new functionality directly into the system. Used to integrate custom app functionality into a singular tenant.

• Set up extensions for your custom app to embed its functionality into the PIM’s workflows, ensuring a smooth and consistent user experience across all features.

• Enhance the user experience by embedding custom functionality cohesively within the PIM interface, without interrupting existing workflows.

---

Getting started

When working with app integration, it is important to understand the different types of apps and how they are used within Struct.

Apps can be created for different purposes and distributed in different ways depending on your needs.

• Custom apps are built to solve specific use cases or extend functionality within Struct PIM. They are typically tailored to a particular workflow or business need and are often used within a single tenant.

• Private apps are only available to tenants within your organization. They are used for internal functionality or integrations that are not intended for public distribution.

• Public apps are available to all tenants through the app store. These apps must go through a review and approval process before they can be published.

Requirements

Before working with app integration, you need access to the following:

Extensions SDK package

The Struct extension SDK enables developers to create custom extensions for Struct PIM. These extensions operate as iframes embedded within the Struct PIM user interface.

Once a connection has been established using the SDK package, it gives you the option to communicate between the custom app and the PIM through actions and events.

import { createStructSDK } from '@structdk/extension-sdk';
import type { TabContextPayload } from '@structdk/extension-sdk';

// 1. Create SDK instance (optionally lock to a specific origin)
const struct = createStructSDK({ hostOrigin: 'https://your-struct-instance.struct.com' });

// 2. Request context from the host
const ctx = await struct.actions.getContext<TabContextPayload>();
console.log('Entity:', ctx.entityType, ctx.entityId);
console.log('Slug:', ctx.slug);

// 3. Auto-resize the iframe to fit content
struct.actions.enableAutoResize({ maxHeight: 800 });

// 4. Register event listeners for ongoing changes
struct.events.onEntityChangedEvent((payload) => {
  console.log('Entity updated:', payload.entityId);
});

struct.events.onLanguageChangedEvent((payload) => {
  console.log('Language:', payload.currentLanguage);
});

// 5. Clean up when done
struct.destroy();

For more information, see: How to use the Extensions SDK package

Icon package

Struct Icon provides streamlined solutions for PIM and partner developers, prioritizing rapid deployment and easy integration with publish-ready sprites, raw SVGs, and versatile framework components.

Below are examples from the npm package page demonstrating its versatility.

React

// import Calendar24 from '@structdk/struct-icon/react/24/calendar';
<Calendar24 className='w-6 h-6 text-foreground' aria-label='Calendar' />;

Vue 3

<script setup>
import Calendar24 from '@structdk/struct-icon/vue/24/calendar.vue';
</script>

<template>
  <Calendar24 class="w-6 h-6 text-foreground" aria-label="Calendar" />
</template>

Svelte

<script>
  import Calendar24 from '@structdk/struct-icon/svelte/24/calendar.svelte';
</script>

<Calendar24 class="w-6 h-6 text-foreground" ariaLabel="Calendar" />

For more information, see: How to use Icon package

UI package

Struct UI provides a ready-to-use CSS file (struct-ui.css / struct-ui.min.css), featuring a curated collection of components and layout primitives compatible with any tech stack.

The UI components are easy to use and require only the CSS file to be imported. Below is an example from the npm package page.

// main.jsx / main.tsx
import '@structdk/ui/dist/struct-ui.css';

export function PrimaryButton({ children }) {
  return <button className='btn btn-primary'>{children}</button>;
}

For more information, see: How to use UI package

Related articles

• Quickstart

• Best practices

• App store

• Example projects