Kontent.ai Bulk Actions Custom App

A custom app for Kontent.ai that enables bulk operations on content items from the item listing page.

Features

• Select multiple items in the Content Inventory
• View list of selected items with their names
• Assign Contributors: Bulk assign contributors to multiple items
• Clone Items: Clone items to different collections
• Assign Taxonomy: Bulk assign taxonomy terms to multiple items (with override or append options)
• Real-time progress tracking
• Error handling with detailed error messages
• Continue processing on error (collect all failures)

Prerequisites

• Node.js 18+
• pnpm
• Kontent.ai account with Management API access

Setup

1. Install dependencies:

   pnpm install

2. Link the custom app SDK (if using local version):

   pnpm link @kontent-ai/custom-app-sdk

3. Configure environment variables:

   cp .env.example .env

   Edit .env and add your Management API key:

   VITE_KONTENT_MANAGEMENT_API_KEY=your_management_api_key_here
   

4. Start the development server:

   pnpm dev

   The app will run on https://localhost:3001 with a self-signed certificate.

Usage

1. Install the custom app in your Kontent.ai project
2. Navigate to the Content Inventory (Item Listing page)
3. Select the items you want to perform bulk actions on
4. The app will display the selected items
5. Choose an action from the dropdown:
   • Assign Contributors: Select contributors to assign to all selected items
   • Clone Items: Clone items to a target collection (with optional full variant copying)
   • Assign Taxonomy: Select a taxonomy element and terms to assign to all selected items (with option to override or append to existing values)
6. Click the action button to start the bulk operation
7. Monitor the progress bar to see the operation status
8. Review any errors that occurred during processing

Technology Stack

• Solid.js - Reactive UI framework
• TypeScript - Type-safe development
• Vite - Build tool with HTTPS support
• CSS Modules - Scoped styling with type-safe imports
• Kontent.ai Custom App SDK - Context observation
• Kontent.ai Management SDK - Content management operations

Project Structure

src/
├── components/          # React-like components
│   ├── *.tsx           # Component logic
│   └── *.module.css    # Component styles
├── services/           # API integrations
│   ├── sdk.ts         # Custom App SDK wrapper
│   └── managementApi.ts # Management SDK operations
└── utils/             # Helper functions and types
    ├── types.ts       # TypeScript type definitions
    └── itemSelection.ts # Selection logic

Development

• pnpm dev - Start development server
• pnpm build - Build for production
• pnpm preview - Preview production build
• pnpm typecheck - Run TypeScript type checking