### Start Development Server for Sitefinity Extensions

Source: https://github.com/sitefinity/sitefinity-admin-app-extensions/blob/master/README.md

Starts the development server for the Sitefinity Admin App Extensions. This allows for live reloading and testing of your extensions during development. Requires Node.js and npm to be installed.

```shell
npm start
```

--------------------------------

### Development Server and Build Commands

Source: https://context7.com/sitefinity/sitefinity-admin-app-extensions/llms.txt

Manage the development workflow for Sitefinity Admin App extensions using npm commands. Includes commands for installing dependencies, starting a hot-reloading development server, building development and production bundles, and running code linters.

```bash
# Install dependencies
npm install

# Start development server on http://localhost:3000
npm start

# Build development bundle
npm run build
# Output: dist/sample.extensions.bundle.js

# Build minified production bundle (Sitefinity >= 11.1)
npm run build:prod

# Run ESLint on code
npm run lint

# Fix ESLint errors automatically
npm run lint:fix

# Update samples submodule
npm run submodule:update
```

--------------------------------

### Install npm Packages for Sitefinity Extensions

Source: https://github.com/sitefinity/sitefinity-admin-app-extensions/blob/master/README.md

Installs all the necessary npm packages required for developing Sitefinity Admin App extensions. This command should be executed in the root folder of the cloned repository. If version conflicts occur, 'npm install -f' can be used.

```shell
npm install
```

--------------------------------

### Clone Sitefinity Admin App Extensions Repository

Source: https://github.com/sitefinity/sitefinity-admin-app-extensions/blob/master/README.md

This command clones the Sitefinity Admin App Extensions repository and its submodules. It's the first step in setting up the development environment. Ensure you have Git installed.

```shell
git clone https://github.com/Sitefinity/sitefinity-admin-app-extensions --recurse-submodules
```

--------------------------------

### Custom Dialogs with Sitefinity Admin App SDK

Source: https://context7.com/sitefinity/sitefinity-admin-app-extensions/llms.txt

Integrate custom dialogs for content selection, data entry, or user interactions using the SelectorService. This example demonstrates opening a video selector dialog with specific configurations for content type and provider.

```typescript
import { Injectable } from '@angular/core';
import { SelectorService } from '@progress/sitefinity-adminapp-sdk/app/api/v1';

@Injectable()
export class VideoSelectorService {
    constructor(private selectorService: SelectorService) {}

    openVideoSelector() {
        const dialogConfig = {
            title: 'Select Video',
            width: '800px',
            height: '600px',
            data: {
                contentType: 'Telerik.Sitefinity.Libraries.Model.Video',
                provider: 'OpenAccessDataProvider'
            }
        };

        this.selectorService.openDialog(dialogConfig).subscribe(
            selectedItems => {
                if (selectedItems && selectedItems.length > 0) {
                    console.log('Selected video:', selectedItems[0]);
                    // Process selected video
                }
            },
            error => {
                console.error('Dialog error:', error);
            }
        );
    }
}
```

--------------------------------

### Access Sitefinity OData Services with Angular HttpClient

Source: https://github.com/sitefinity/sitefinity-admin-app-extensions/blob/master/README.md

This snippet demonstrates how to access Sitefinity CMS OData services using Angular's HttpClient. It utilizes the HTTP_PREFIX constant to ensure proper authentication for backend services. The example fetches all news items.

```typescript
const url = `${HTTP_PREFIX}/sf/system/newsitems`;
this.http.get(url).subscribe(response => { /* do work */ });
```

--------------------------------

### Implement Fields Binding Service in Sitefinity Admin App

Source: https://context7.com/sitefinity/sitefinity-admin-app-extensions/llms.txt

Demonstrates how to create a service that binds fields together, allowing dynamic updates to field values, visibility, or settings based on changes in related fields. This example uses Angular and the Sitefinity Admin App SDK.

```typescript
import { Injectable } from '@angular/core';
import { FieldsChangeService } from '@progress/sitefinity-adminapp-sdk/app/api/v1';

@Injectable()
export class CustomFieldsChangeService implements FieldsChangeService {
    handleFieldChange(changedField: any, allFields: any[]) {
        if (changedField.name === 'Category') {
            const subcategoryField = allFields.find(f => f.name === 'Subcategory');

            if (subcategoryField) {
                if (changedField.value === 'Technology') {
                    subcategoryField.visible = true;
                    subcategoryField.options = [
                        { value: 'Software', label: 'Software' },
                        { value: 'Hardware', label: 'Hardware' }
                    ];
                } else {
                    subcategoryField.visible = false;
                    subcategoryField.value = null;
                }
            }
        }
    }
}
```

--------------------------------

### Access OData Services in Sitefinity Admin App

Source: https://context7.com/sitefinity/sitefinity-admin-app-extensions/llms.txt

Provides an example of accessing Sitefinity CMS backend OData services using Angular's HttpClient. It utilizes the `HTTP_PREFIX` constant for authentication and demonstrates methods for fetching all news items and a specific news item by its ID. This allows programmatic retrieval and manipulation of CMS content.

```typescript
import { HttpClient } from '@angular/common/http';
import { HTTP_PREFIX } from '@progress/sitefinity-adminapp-sdk/app/v1';

export class NewsService {
    constructor(private http: HttpClient) {}

    getAllNewsItems() {
        const url = `${HTTP_PREFIX}/sf/system/newsitems`;

        return this.http.get(url).subscribe(
            response => {
                console.log('News items:', response);
                // Process news items
            },
            error => {
                console.error('Failed to fetch news:', error);
            }
        );
    }

    getNewsItemById(id: string) {
        const url = `${HTTP_PREFIX}/sf/system/newsitems(${id})`;
        return this.http.get(url);
    }
}
```

--------------------------------

### Custom Grid Columns with Sitefinity Admin App SDK

Source: https://context7.com/sitefinity/sitefinity-admin-app-extensions/llms.txt

Enhance content grids by adding custom columns to display additional information. This example shows how to create custom columns for 'Status' with conditional styling and 'Images' count, utilizing custom cell rendering logic.

```typescript
import { Injectable } from '@angular/core';
import { GridColumnProvider } from '@progress/sitefinity-adminapp-sdk/app/api/v1';

@Injectable()
export class CustomGridColumnProvider implements GridColumnProvider {
    getColumns() {
        return [
            {
                field: 'CustomStatus',
                title: 'Status',
                width: 150,
                cell: (dataItem: any) => {
                    const status = dataItem.Status;
                    const cssClass = status === 'Published' ? 'status-published' : 'status-draft';
                    return `<span class="${cssClass}">${status}</span>`;
                }
            },
            {
                field: 'ImageCount',
                title: 'Images',
                width: 100,
                cell: (dataItem: any) => {
                    const count = dataItem.RelatedImages?.length || 0;
                    return `<span class="image-count">${count}</span>`;
                }
            }
        ];
    }
}
```

--------------------------------

### Create Custom Widget Editor in Sitefinity Admin App

Source: https://context7.com/sitefinity/sitefinity-admin-app-extensions/llms.txt

Shows how to create a custom widget designer to override the default auto-generated property editors in the Sitefinity page editor. This example uses Angular and the Sitefinity Admin App SDK, demonstrating how to extend the WidgetEditorBase class and register the custom editor.

```typescript
import { Component } from '@angular/core';
import { WidgetEditorBase } from '@progress/sitefinity-adminapp-sdk/app/api/v1';

@Component({
    selector: 'custom-widget-editor',
    template: `
        <div class="widget-editor">
            <h3>Custom Widget Configuration</h3>
            <div class="form-group">
                <label>Title</label>
                <input type="text"
                       [(ngModel)]="properties.Title"
                       (change)="onPropertyChange()">
            </div>
            <div class="form-group">
                <label>Display Count</label>
                <input type="number"
                       [(ngModel)]="properties.DisplayCount"
                       min="1" max="50"
                       (change)="onPropertyChange()">
            </div>
        </div>
    `
})
export class CustomWidgetEditor extends WidgetEditorBase {
    onPropertyChange() {
        this.notifyPropertiesChanged(this.properties);
    }
}

// Register for specific widget type
{
    provide: WIDGET_EDITOR_TOKEN,
    useClass: CustomWidgetEditor,
    multi: true,
    widgetName: 'MyCustomWidget'
}
```

--------------------------------

### Register Custom Fields in Sitefinity Admin App

Source: https://context7.com/sitefinity/sitefinity-admin-app-extensions/llms.txt

Explains how to create and register custom field components for Sitefinity content editing forms. These custom fields can replace default input controls, offering specialized validation and user experiences. The example shows a custom color picker field extending `FieldBase` and registering using `FIELD_TOKEN`.

```typescript
import { Component, OnInit } from '@angular/core';
import { FieldBase } from '@progress/sitefinity-adminapp-sdk/app/v1';

@Component({
    selector: 'custom-color-picker',
    template: `
        <div class="color-picker-field">
            <label>{{label}}</label>
            <input type="color"
                   [(ngModel)]="value"
                   (change)="onValueChange($event)">
            <span class="color-value">{{value}}</span>
        </div>
    `
})
export class CustomColorPickerField extends FieldBase implements OnInit {
    ngOnInit() {
        this.value = this.value || '#000000';
    }

    onValueChange(event: any) {
        this.value = event.target.value;
        this.notifyValueChange();
    }
}

// Register in your module
{
    provide: FIELD_TOKEN,
    useClass: CustomColorPickerField,
    multi: true
}
```

--------------------------------

### Deploy Extension Bundles to Sitefinity CMS

Source: https://context7.com/sitefinity/sitefinity-admin-app-extensions/llms.txt

Instructions for deploying compiled extension bundles to a Sitefinity CMS instance. Multiple bundles can coexist, and they must follow a specific naming convention. The Sitefinity application needs to be restarted after deployment for the extensions to load.

```bash
# After building, copy bundle to Sitefinity
# Source: dist/sample.extensions.bundle.js
# Destination: [Sitefinity-Web-Root]/adminapp/

# Multiple bundles can be deployed (follow naming convention):
# adminapp/
#   ├── sample.extensions.bundle.js
#   ├── my-custom-code.extensions.bundle.js
#   └── editor-power-tools.extensions.bundle.js

# Bundle naming pattern (REQUIRED):
# {{ bundle-name }}.extensions.bundle.js

# Restart Sitefinity application after deployment
# Extensions will load automatically on next Admin App access
```

--------------------------------

### Sitefinity CMS Configuration for Local Development

Source: https://context7.com/sitefinity/sitefinity-admin-app-extensions/llms.txt

Configure Sitefinity CMS settings to enable local extension development by setting up CORS for the development server and configuring OAuth authentication for seamless sign-in.

```bash
# 1. Configure CORS for OData services
# Navigate to: Administration -> Settings -> Advanced -> WebServices
#   -> Routes -> Sitefinity -> services -> system
#   -> Access Control Allow Origin (CORS)
# Set value: http://localhost:3000

# 2. Configure OAuth Client
# Navigate to: Administration -> Settings -> Advanced
#   -> Authentication -> OAuthServer -> AuthorizedClients
# Click "Create new"
# ClientId: sitefinity
# Secret: (leave blank)
# RedirectUrls: http://localhost:3000/auth/oauth/sign-in

# 3. Configure Security CORS

```

--------------------------------

### Build Sitefinity Extensions Bundle

Source: https://github.com/sitefinity/sitefinity-admin-app-extensions/blob/master/README.md

Generates the production-ready JavaScript bundle file (e.g., sample.extensions.bundle.js) for your Sitefinity Admin App extensions. This file is typically placed in the 'dist' folder and then deployed to your Sitefinity project.

```shell
npm run build
```

--------------------------------

### Build Minified Sitefinity Extensions Bundle

Source: https://github.com/sitefinity/sitefinity-admin-app-extensions/blob/master/README.md

Command to build a minified version of the Sitefinity extensions bundle for production deployment. This command is supported in Sitefinity versions 11.1 and later.

```bash
npm run build:prod
```

--------------------------------

### Update Sitefinity Samples Submodule

Source: https://github.com/sitefinity/sitefinity-admin-app-extensions/blob/master/README.md

Updates and initializes the samples submodule folder for the Sitefinity Admin App Extensions. This is necessary after cloning or checking out a specific version to ensure you have the latest sample code.

```shell
git submodule update --init --recursive
```

--------------------------------

### Checkout Specific Sitefinity Version

Source: https://github.com/sitefinity/sitefinity-admin-app-extensions/blob/master/README.md

This command checks out a specific Git tag that corresponds to your Sitefinity CMS version. This ensures compatibility between the extensions and your Sitefinity instance. Replace '{Sitefinity version}' with your actual version number.

```shell
git checkout {Sitefinity version}
```

--------------------------------

### Implement Custom Commands in Sitefinity Admin App

Source: https://context7.com/sitefinity/sitefinity-admin-app-extensions/llms.txt

Demonstrates how to implement custom commands that can be added to the Sitefinity Admin App's interface menus, such as the Actions menu, grid context menu, or bulk operations menu. The `execute` method handles the command's logic, which can include custom actions or navigation.

```typescript
import { Injectable } from '@angular/core';
import { COMMAND_NAME_TOKEN } from '@progress/sitefinity-adminapp-sdk/app/v1';

@Injectable()
export class PrintPreviewCommand {
    constructor() {}

    execute(commandEvent: any) {
        const selectedItem = commandEvent.item;

        // Navigate to custom print preview route
        window.location.href = `/adminapp/print-preview/${selectedItem.Id}`;
    }
}

// In your module providers:
{
    provide: COMMAND_NAME_TOKEN,
    useClass: PrintPreviewCommand,
    multi: true
}
```

--------------------------------

### Registering Extension Modules in Sitefinity Admin App (TypeScript)

Source: https://github.com/sitefinity/sitefinity-admin-app-extensions/blob/master/README.md

This code snippet demonstrates how to use the __extensions_index.ts file as an entry point to extend the Sitefinity Admin App. It shows how to import and add custom NgModules to the sitefinityExtensionsStore, allowing for custom UI and functionality.

```typescript
import { GridExtenderModule } from "./grid-extender";
import { SitefinityExtensionStore } from "@progress/sitefinity-adminapp-sdk/app/api/v1";

declare var sitefinityExtensionsStore: SitefinityExtensionStore;

sitefinityExtensionsStore.addExtensionModule(GridExtenderModule);
```

--------------------------------

### Custom Notifications with Sitefinity Admin App SDK

Source: https://context7.com/sitefinity/sitefinity-admin-app-extensions/llms.txt

Implement custom notifications (success, error, warning, info) to provide user feedback within the Sitefinity Admin App. This utilizes the NotificationService from the SDK, allowing configuration of message, type, duration, placement, and closability.

```typescript
import { Injectable } from '@angular/core';
import { NotificationService, NotificationInfo } from '@progress/sitefinity-adminapp-sdk/app/api/v1';

@Injectable()
export class CustomNotificationCommand {
    constructor(private notificationService: NotificationService) {}

    execute() {
        const notification: NotificationInfo = {
            message: 'Operation completed successfully!',
            type: 'success',
            duration: 5000,
            placement: 'top-right',
            closable: true
        };

        this.notificationService.publishBasicNotification(notification);
    }

    showErrorNotification(error: any) {
        const errorNotification: NotificationInfo = {
            message: `Error: ${error.message}`,
            type: 'error',
            duration: 10000,
            placement: 'top-center',
            closable: true
        };

        this.notificationService.publishBasicNotification(errorNotification);
    }
}
```

--------------------------------

### Register Extension Modules in Sitefinity Admin App

Source: https://context7.com/sitefinity/sitefinity-admin-app-extensions/llms.txt

Registers custom extension modules with the Sitefinity Admin App using Angular's NgModule architecture. These modules are added to a global store to integrate custom functionality into the Sitefinity backend. It requires importing necessary modules and using the `sitefinityExtensionsStore.addExtensionModule` method.

```typescript
import { GridExtenderModule } from "./grid-extender";
import { CustomFieldsModule } from "./custom-fields";
import { CommandsExtenderModule } from "./commands-extender";
import { SitefinityExtensionStore } from "@progress/sitefinity-adminapp-sdk/app/v1";

declare var sitefinityExtensionsStore: SitefinityExtensionStore;

// Register multiple extension modules
sitefinityExtensionsStore.addExtensionModule(GridExtenderModule);
sitefinityExtensionsStore.addExtensionModule(CustomFieldsModule);
sitefinityExtensionsStore.addExtensionModule(CommandsExtenderModule);
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.