← All Hack Day tracks

A UI plugin is a page that Identity Security Cloud (ISC) loads inside the product. It uses the signed-in user's session, so every API call you make is already authenticated.

You will build a manager lookup: pick a manager from a searchable dropdown and get a table of everyone who reports to them. While you write the code, your tenant renders it live. You do not need to host anything.

The finished page will look similar to this:

The data to create the page comes from one API call. The page loads every identity once, and both the dropdown and the table are built from that data.

How to get started​

Work through the steps in order:

• Steps 1 to 4 get your local code rendering inside the tenant.
• Steps 5 to 7 build the page, one piece at a time. Each one ends with a Checkpoint so you can confirm it works before you move on.
• Step 8 deploys the page, and step 9 adds it to the ISC nav bar. Both are optional.

Each step has collapsed sections. Why it works explains the code, and The code so far shows the full files, so you can catch up in case you get stuck.

1. Install the prerequisites​

If you think you are already set up, run these first. If all four pass, skip to step 2.

Your terminal

node --version                      # 24+
sail --version                      # 2.7.0 or newer
sail env show                       # your tenant, active
sail ui-plugins list                # returns without an error

Node​

The starter template is an Angular application. Angular works best with 24 and above.

Your terminal

node --version

If your version is not in that set, install a current LTS release from nodejs.org. The Angular CLI does not start on an unsupported version.

SailPoint CLI​

brew tap sailpoint-oss/tap && brew install sailpoint-cli

sudo apt install ./sail_2.7.0_linux_amd64.deb

sudo yum localinstall ./sail_2.7.0_linux_amd64.rpm

Confirm that the version is 2.7.0 or newer:

Your terminal

sail --version

Personal access token​

The CLI needs credentials to call your tenant's APIs. A personal access token (PAT) is the simplest option.

1. In your tenant, open Preferences → Personal Access Tokens, or go to https://[tenant].identitynow.com/ui/d/user-preferences/personal-access-tokens.
2. Click New Token and enter a description, such as hack-day-cli.
3. For the vendor integration, choose Other / No associated vendor integration.
4. Leave the scopes list empty. The token then defaults to sp:scopes:all and has the same access as you, which is what the plugin commands need.
5. Click Create Token, then copy the Client ID and Client Secret. You cannot see the secret again.

More detail: personal access tokens.

Point the CLI at your tenant​

Run this command to connect to your tenant:

1. sail env create hackday creates an environment for your tenant. It asks for your tenant URL (https://[tenant].identitynow.com) and API URL (https://[tenant].api.identitynow.com).

Your terminal

sail env create hackday

More detail: CLI install and configuration.

Checking that UI Plugins are enabled​

This is the first command that reaches the backend, so it tests your credentials and the feature flag together:

Your terminal

sail ui-plugins list

2. Scaffold the plugin workspace​

Run these commands one at a time. Replace the [name] with your name to make sure the plugin instance is unique as someone else might be sharing the instance with you. sail ui-plugins init downloads the SailPoint starter template into a new folder, cd moves you into it, and npm install downloads its dependencies.

Your terminal

sail ui-plugins init manager-lookup-[name]
cd manager-lookup-[name]
npm install

You now have a normal Angular application with a few files that are specific to UI plugins. Below are some important files to take note of:

Add the stylesheet now. It covers the whole finished page, so you only need to modify it once. Replace the contents of src/app/app.scss with the code below.

:host {
  display: block;
  box-sizing: border-box;
  max-width: 64rem;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
  color: var(--spds-text-color);
}

/* One rhythm for every top-level block, so nothing needs its own margin. */
.page {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.page__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--spds-content-border-color);
}

.page__title {
  margin: 0;
}

.page__subtitle {
  margin: 0.35rem 0 0;
  color: var(--spds-text-muted-color);
}

/* Keeps the tenant tag and the user name together when the header wraps. */
.page__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

.page__user {
  color: var(--spds-text-muted-color);
}

/* Label, control, and hint stack, each on its own line. */
.picker {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.picker__label {
  display: block;
  font-weight: 600;
}

.picker__select {
  width: 24rem;
  max-width: 100%;
}

.picker__hint {
  display: block;
  color: var(--spds-text-muted-color);
}

/* Table bits */
.table-caption {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
}

.cell-person {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.cell-empty {
  padding: 1.5rem;
  text-align: center;
  color: var(--spds-text-muted-color);
}

{
    "version": 1,
    "manifest": {
        "alias": "manager-lookup-[name]",
        "name": { "en": "manager-lookup-[name]" },
        "description": { "en": "manager-lookup-[name]" },
        "apiScopes": ["sp:scopes:all"],
        "contentSecurityPolicies": {},
        "permissionPolicy": {},
        "iframeAllow": {},
        "state": "ENABLED",
        "slots": [{ "slotId": "full-page" }]
    },
    "build": {
        "outDir": "./dist/manager-lookup-[name]/browser",
        "port": 4200
    }
}

sail ui-plugins validate-manifest

3. Register the plugin instance​

create reads sp-ui-plugin.json, validates it, and sends the manifest section to your tenant to register a plugin instance. It does not deploy or upload any code.

Your terminal

sail ui-plugins create

Terminal output

Created plugin instance 033b32b5-280f-4d78-a856-05c2a34d15d1 (alias: manager-lookup-[name])

4. Load your local code in the tenant​

link tells your tenant to load the plugin from your dev server instead of from deployed files. This change applies only to you, so nobody else in the tenant is affected.

1. In a second terminal, start the dev server and leave it running:

   Your second terminal

   npm run start
   

2. Back in the first terminal, link it:

   Your first terminal

   sail ui-plugins link
   

   Terminal output

   Plugin manager-lookup-[name] linked to port 4200
   To load your local plugin in ISC navigate to:
   https://<tenant>/ui/plugin/033b32b5-280f-4d78-a856-05c2a34d15d1?spPluginDev=manager-lookup-[name]
   

3. Open the printed URL.

# Terminal 1
sail ui-plugins link          # or: sail ui-plugins link --port 4300

# Terminal 2
npm run start

sail ui-plugins unlink

5. List the identities​

Load every identity in the tenant, and show how many there are. The dropdown and the table in the next two steps both use this data.

1. Replace the entire contents of src/app/app.ts with this code:

import { Component, computed, effect, inject, signal } from '@angular/core';
import { SailpointPluginService } from '@core';
import { Paginator } from '@sailpoint/angular-sdk';
import { IdentitiesService, type Identity } from '@sailpoint/angular-sdk/identities';
import { MessageModule } from 'primeng/message';
import { TagModule } from 'primeng/tag';
import { firstValueFrom } from 'rxjs';
import { FormsModule } from '@angular/forms';
import { SelectModule } from 'primeng/select';
import { SkeletonModule } from 'primeng/skeleton';
import { AvatarModule } from 'primeng/avatar';
import { TableModule } from 'primeng/table';

/** One entry in the manager dropdown. */
interface ManagerOption {
  id: string;
  name: string;
}

@Component({
  selector: 'app-root',
  imports: [AvatarModule, FormsModule, MessageModule, SelectModule, SkeletonModule, TableModule, TagModule],
  providers: [IdentitiesService],
  templateUrl: './app.html',
  styleUrl: './app.scss',
})
export class App {
  protected readonly plugin = inject(SailpointPluginService);
  private readonly identitiesSvc = inject(IdentitiesService);

  /** Every identity the page has loaded. Everything else is derived from this. */
  protected readonly identities = signal<Identity[]>([]);
  protected readonly loading = signal(false);
  protected readonly error = signal('');

  private requested = false;

  constructor() {
    // Wait for the App Shell handshake, then load once.
    effect(() => {
      if (this.plugin.apiReady() && !this.requested) {
        this.requested = true;
        void this.loadIdentities();
      }
    });
  }

  protected async loadIdentities(): Promise<void> {
    this.loading.set(true);
    this.error.set('');

    try {
      // Paginator.paginate() walks the endpoint 250 records at a time and emits once
      // with every identity in the tenant. Uncomment it:
      // const identities = await firstValueFrom(
      //   Paginator.paginate(
      //     (params) => this.identitiesSvc.listIdentitiesV1(params),
      //     { sorters: 'name' },
      //   ),
      // );
      // this.identities.set(identities);
    } catch (err) {
      this.error.set(this.formatApiError(err));
    } finally {
      this.loading.set(false);
    }
  }

  private formatApiError(err: unknown): string {
    return err instanceof Error ? `${err.name}: ${err.message}` : String(err);
  }
}

2. In loadIdentities(), uncomment the six lines inside the try block. This is the one change you make yourself in this step. The code is commented out, not missing, so you can see exactly where the API call goes.

3. Replace the entire contents of src/app/app.html with this template. It has a header that shows the handshake worked, an error message for each failure, and the identity count:

<main class="page">
  <header class="page__header">
    <div>
      <h1 class="page__title">Manager Reports Search</h1>
      <p class="page__subtitle">Pick a manager to see their direct reports.</p>
    </div>
    @if (plugin.context(); as ctx) {
      <div class="page__meta">
        <p-tag severity="secondary" [value]="ctx.tenant.org" />
        <span class="page__user">{{ ctx.user.displayName }}</span>
      </div>
    }
  </header>

  @if (plugin.status() === 'failed') {
    <p-message severity="error">
      The App Shell handshake did not complete, so this plugin has no API token. Open the
      <code>?spPluginDev=</code> URL that <code>sail ui-plugins link</code> printed.
    </p-message>
  }
  @if (error()) {
    <p-message severity="error" [text]="error()" />
  }

  <section class="picker">
    <p>Loaded {{ identities().length }} identities.</p>
  </section>
</main>

4. Save both files and refresh the ?spPluginDev= tab. The dev server rebuilds automatically.

6. Build the manager dropdown​

Turn the identities you retrieved into a searchable list of managers by using a dropdown component.

1. Inside the class, next to the other signals, add a signal for the selected manager:

     /** The manager the user picked in the dropdown. */
     protected readonly selectedManagerId = signal('');
   

2. Above private requested = false, add the list of managers. Then uncomment the byId.set(...) line in the loop:

     /**
      * The dropdown options. Every identity carries a managerRef, so the set of
      * managers is the set of distinct managerRef values in the loaded list.
      */
     protected readonly managers = computed<ManagerOption[]>(() => {
       const byId = new Map<string, ManagerOption>();
   
       for (const identity of this.identities()) {
         const ref = identity.managerRef;
         if (ref?.id && ref.name) {
           // A Map keyed by the manager's id de-duplicates them, because the same
           // manager appears on every one of their reports. Uncomment it:
           // byId.set(ref.id, { id: ref.id, name: ref.name });
         }
       }
   
       return [...byId.values()].sort((a, b) => a.name.localeCompare(b.name));
     });
   

3. Below the loadIdentities() method, add the handler that runs when the user picks a manager:

     /** Runs when the user picks a manager. p-select hands us the option's value. */
     protected onManagerChange(managerId: string | null): void {
       this.selectedManagerId.set(managerId ?? '');
     }
   

4. In src/app/app.html, replace the picker section with the dropdown:

  <section class="picker">
    <label class="picker__label" for="manager">Manager</label>
    @if (loading()) {
      <p-skeleton height="2.6rem" width="22rem" />
    } @else {
      <p-select
        inputId="manager"
        [options]="managers()"
        optionLabel="name"
        optionValue="id"
        [ngModel]="selectedManagerId()"
        (onChange)="onManagerChange($event.value)"
        [filter]="true"
        filterBy="name"
        [showClear]="true"
        placeholder="Select a manager"
        emptyMessage="No identities in this tenant have a manager set"
        styleClass="picker__select"
      />
      <small class="picker__hint">{{ managers().length }} managers · {{ identities().length }} identities loaded</small>
    }
  </section>

5. Save and refresh.

import { Component, computed, effect, inject, signal } from '@angular/core';
import { SailpointPluginService } from '@core';
import { Paginator } from '@sailpoint/angular-sdk';
import { IdentitiesService, type Identity } from '@sailpoint/angular-sdk/identities';
import { MessageModule } from 'primeng/message';
import { TagModule } from 'primeng/tag';
import { firstValueFrom } from 'rxjs';
import { FormsModule } from '@angular/forms';
import { SelectModule } from 'primeng/select';
import { SkeletonModule } from 'primeng/skeleton';
import { AvatarModule } from 'primeng/avatar';
import { TableModule } from 'primeng/table';

/** One entry in the manager dropdown. */
interface ManagerOption {
  id: string;
  name: string;
}

@Component({
  selector: 'app-root',
  imports: [AvatarModule, FormsModule, MessageModule, SelectModule, SkeletonModule, TableModule, TagModule],
  providers: [IdentitiesService],
  templateUrl: './app.html',
  styleUrl: './app.scss',
})

export class App {
  protected readonly plugin = inject(SailpointPluginService);
  private readonly identitiesSvc = inject(IdentitiesService);

  /** Every identity the page has loaded. Everything else is derived from this. */
  protected readonly identities = signal<Identity[]>([]);
  protected readonly loading = signal(false);
  protected readonly error = signal('');

  /** The manager the user picked in the dropdown. */
  protected readonly selectedManagerId = signal('');

  /**
   * The dropdown options. Every identity carries a managerRef, so the set of
   * managers is the set of distinct managerRef values in the loaded list.
   */
  protected readonly managers = computed<ManagerOption[]>(() => {
    const byId = new Map<string, ManagerOption>();

    for (const identity of this.identities()) {
      const ref = identity.managerRef;
      if (ref?.id && ref.name) {
        byId.set(ref.id, { id: ref.id, name: ref.name });
      }
    }

    return [...byId.values()].sort((a, b) => a.name.localeCompare(b.name));
  });

  private requested = false;

  constructor() {
    // Wait for the App Shell handshake, then load once.
    effect(() => {
      if (this.plugin.apiReady() && !this.requested) {
        this.requested = true;
        void this.loadIdentities();
      }
    });
  }

  protected async loadIdentities(): Promise<void> {
    this.loading.set(true);
    this.error.set('');

    try {
      const identities = await firstValueFrom(
        Paginator.paginate(
          (params) => this.identitiesSvc.listIdentitiesV1(params),
          { sorters: 'name' },
        ),
      );
      this.identities.set(identities);
    } catch (err) {
      this.error.set(this.formatApiError(err));
    } finally {
      this.loading.set(false);
    }
  }

  /** Runs when the user picks a manager. p-select hands us the option's value. */
  protected onManagerChange(managerId: string | null): void {
    this.selectedManagerId.set(managerId ?? '');
  }

  private formatApiError(err: unknown): string {
    return err instanceof Error ? `${err.name}: ${err.message}` : String(err);
  }
}

<main class="page">
  <header class="page__header">
    <div>
      <h1 class="page__title">Manager Reports Search</h1>
      <p class="page__subtitle">Pick a manager to see their direct reports.</p>
    </div>
    @if (plugin.context(); as ctx) {
      <div class="page__meta">
        <p-tag severity="secondary" [value]="ctx.tenant.org" />
        <span class="page__user">{{ ctx.user.displayName }}</span>
      </div>
    }
  </header>

  @if (plugin.status() === 'failed') {
    <p-message severity="error">
      The App Shell handshake did not complete, so this plugin has no API token. Open the
      <code>?spPluginDev=</code> URL that <code>sail ui-plugins link</code> printed.
    </p-message>
  }
  @if (error()) {
    <p-message severity="error" [text]="error()" />
  }

  <section class="picker">
    <label class="picker__label" for="manager">Manager</label>
    @if (loading()) {
      <p-skeleton height="2.6rem" width="22rem" />
    } @else {
      <p-select
        inputId="manager"
        [options]="managers()"
        optionLabel="name"
        optionValue="id"
        [ngModel]="selectedManagerId()"
        (onChange)="onManagerChange($event.value)"
        [filter]="true"
        filterBy="name"
        [showClear]="true"
        placeholder="Select a manager"
        emptyMessage="No identities in this tenant have a manager set"
        styleClass="picker__select"
      />
      <small class="picker__hint">{{ managers().length }} managers · {{ identities().length }} identities loaded</small>
    }
  </section>

</main>

7. Show the direct reports​

When the user selects a manager, show a table of that manager's reports. You already have the data, so this step does not make an API call either.

1. Below the managers method, add the list of reports. Then uncomment the return line and delete the return []; under it. The empty array is there only so the file compiles while the real line is commented out.

     /** The direct reports of the selected manager. */
     protected readonly reports = computed<Identity[]>(() => {
       const managerId = this.selectedManagerId();
       if (!managerId) {
         return [];
       }
   
       // The reports are the identities whose managerRef points at this manager.
       // Uncomment this line and delete the empty array below it:
       // return this.identities().filter((identity) => identity.managerRef?.id === managerId);
       return [];
     });
   

2. Below the onManagerChange() method, add three helpers for the table. They read the department, make initials for the avatar, and choose a colour for the status tag:

  /** Reads one identity attribute out of the untyped attributes map. */
  protected attr(identity: Identity, key: string): string {
    const attributes = identity.attributes as Record<string, unknown> | undefined;
    const value = attributes?.[key];
    return typeof value === 'string' && value ? value : '-';
  }

  /** Initials for the avatar, so "Jean Bartik" becomes "JB". */
  protected initials(name: string): string {
    return name
      .split(' ')
      .filter(Boolean)
      .slice(0, 2)
      .map((part) => part[0].toUpperCase())
      .join('');
  }

  /** Maps an identity type onto a p-tag severity: employees are green, contractors are yellow. */
  protected typeSeverity(type: string): 'success' | 'warn' | 'secondary' {
    switch (type.toUpperCase()) {
      case 'EMPLOYEE':
        return 'success';
      case 'CONTRACTOR':
        return 'warn';
      default:
        return 'secondary';
    }
  }

3. In src/app/app.html, add the table after the picker section, inside <main>:

  @if (selectedManagerId()) {
    <p-table
      [value]="reports()"
      [paginator]="reports().length > 10"
      [rows]="10"
      sortField="name"
      [sortOrder]="1"
      styleClass="p-datatable-sm"
      [tableStyle]="{ 'min-width': '40rem' }"
    >
      <ng-template #caption>
        <div class="table-caption">
          <span class="spds-h5--semibold">Direct reports</span>
          <p-tag severity="contrast" [value]="reports().length + ''" />
        </div>
      </ng-template>

      <ng-template #header>
        <tr>
          <th pSortableColumn="name">Name <p-sortIcon field="name" /></th>
          <th>Email</th>
          <th>Department</th>
          <th>Type</th>
        </tr>
      </ng-template>

      <ng-template #body let-person>
        <tr>
          <td>
            <div class="cell-person">
              <p-avatar [label]="initials(person.name)" shape="circle" />
              <span>{{ person.name }}</span>
            </div>
          </td>
          <td>{{ person.emailAddress || '-' }}</td>
          <td>{{ attr(person, 'department') }}</td>
          <td>
            <p-tag
              [severity]="typeSeverity(attr(person, 'type'))"
              [value]="attr(person, 'type')"
            />
          </td>
        </tr>
      </ng-template>

      <ng-template #emptymessage>
        <tr>
          <td colspan="4" class="cell-empty">This manager has no direct reports in the loaded identities.</td>
        </tr>
      </ng-template>
    </p-table>
  }

4. Save, refresh, and pick a manager.

import { Component, computed, effect, inject, signal } from '@angular/core';
import { SailpointPluginService } from '@core';
import { Paginator } from '@sailpoint/angular-sdk';
import { IdentitiesService, type Identity } from '@sailpoint/angular-sdk/identities';
import { MessageModule } from 'primeng/message';
import { TagModule } from 'primeng/tag';
import { firstValueFrom } from 'rxjs';
import { FormsModule } from '@angular/forms';
import { SelectModule } from 'primeng/select';
import { SkeletonModule } from 'primeng/skeleton';
import { AvatarModule } from 'primeng/avatar';
import { TableModule } from 'primeng/table';

/** One entry in the manager dropdown. */
interface ManagerOption {
  id: string;
  name: string;
}

@Component({
  selector: 'app-root',
  imports: [AvatarModule, FormsModule, MessageModule, SelectModule, SkeletonModule, TableModule, TagModule],
  providers: [IdentitiesService],
  templateUrl: './app.html',
  styleUrl: './app.scss',
})

export class App {
  protected readonly plugin = inject(SailpointPluginService);
  private readonly identitiesSvc = inject(IdentitiesService);

  /** Every identity the page has loaded. Everything else is derived from this. */
  protected readonly identities = signal<Identity[]>([]);
  protected readonly loading = signal(false);
  protected readonly error = signal('');

  /** The manager the user picked in the dropdown. */
  protected readonly selectedManagerId = signal('');

  /**
   * The dropdown options. Every identity carries a managerRef, so the set of
   * managers is the set of distinct managerRef values in the loaded list.
   */
  protected readonly managers = computed<ManagerOption[]>(() => {
    const byId = new Map<string, ManagerOption>();

    for (const identity of this.identities()) {
      const ref = identity.managerRef;
      if (ref?.id && ref.name) {
        byId.set(ref.id, { id: ref.id, name: ref.name });
      }
    }

    return [...byId.values()].sort((a, b) => a.name.localeCompare(b.name));
  });

  /** The direct reports of the selected manager. */
  protected readonly reports = computed<Identity[]>(() => {
    const managerId = this.selectedManagerId();
    if (!managerId) {
      return [];
    }
    return this.identities().filter((identity) => identity.managerRef?.id === managerId);
  });

  private requested = false;

  constructor() {
    // Wait for the App Shell handshake, then load once.
    effect(() => {
      if (this.plugin.apiReady() && !this.requested) {
        this.requested = true;
        void this.loadIdentities();
      }
    });
  }

  protected async loadIdentities(): Promise<void> {
    this.loading.set(true);
    this.error.set('');

    try {
      const identities = await firstValueFrom(
        Paginator.paginate(
          (params) => this.identitiesSvc.listIdentitiesV1(params),
          { sorters: 'name' },
        ),
      );
      this.identities.set(identities);
    } catch (err) {
      this.error.set(this.formatApiError(err));
    } finally {
      this.loading.set(false);
    }
  }

  /** Runs when the user picks a manager. p-select hands us the option's value. */
  protected onManagerChange(managerId: string | null): void {
    this.selectedManagerId.set(managerId ?? '');
  }

  /** Reads one identity attribute out of the untyped attributes map. */
  protected attr(identity: Identity, key: string): string {
    const attributes = identity.attributes as Record<string, unknown> | undefined;
    const value = attributes?.[key];
    return typeof value === 'string' && value ? value : '-';
  }

  /** Initials for the avatar, so "Jean Bartik" becomes "JB". */
  protected initials(name: string): string {
    return name
      .split(' ')
      .filter(Boolean)
      .slice(0, 2)
      .map((part) => part[0].toUpperCase())
      .join('');
  }

  /** Maps an identity type onto a p-tag severity: employees are green, contractors are yellow. */
  protected typeSeverity(type: string): 'success' | 'warn' | 'secondary' {
    switch (type.toUpperCase()) {
      case 'EMPLOYEE':
        return 'success';
      case 'CONTRACTOR':
        return 'warn';
      default:
        return 'secondary';
    }
  }

  private formatApiError(err: unknown): string {
    return err instanceof Error ? `${err.name}: ${err.message}` : String(err);
  }
}

<main class="page">
  <header class="page__header">
    <div>
      <h1 class="page__title">Manager Reports Search</h1>
      <p class="page__subtitle">Pick a manager to see their direct reports.</p>
    </div>
    @if (plugin.context(); as ctx) {
      <div class="page__meta">
        <p-tag severity="secondary" [value]="ctx.tenant.org" />
        <span class="page__user">{{ ctx.user.displayName }}</span>
      </div>
    }
  </header>

  @if (plugin.status() === 'failed') {
    <p-message severity="error">
      The App Shell handshake did not complete, so this plugin has no API token. Open the
      <code>?spPluginDev=</code> URL that <code>sail ui-plugins link</code> printed.
    </p-message>
  }
  @if (error()) {
    <p-message severity="error" [text]="error()" />
  }

  <section class="picker">
    <label class="picker__label" for="manager">Manager</label>
    @if (loading()) {
      <p-skeleton height="2.6rem" width="22rem" />
    } @else {
      <p-select
        inputId="manager"
        [options]="managers()"
        optionLabel="name"
        optionValue="id"
        [ngModel]="selectedManagerId()"
        (onChange)="onManagerChange($event.value)"
        [filter]="true"
        filterBy="name"
        [showClear]="true"
        placeholder="Select a manager"
        emptyMessage="No identities in this tenant have a manager set"
        styleClass="picker__select"
      />
      <small class="picker__hint">{{ managers().length }} managers · {{ identities().length }} identities loaded</small>
    }
  </section>

  @if (selectedManagerId()) {
    <p-table
      [value]="reports()"
      [paginator]="reports().length > 10"
      [rows]="10"
      sortField="name"
      [sortOrder]="1"
      styleClass="p-datatable-sm"
      [tableStyle]="{ 'min-width': '40rem' }"
    >
      <ng-template #caption>
        <div class="table-caption">
          <span class="spds-h5--semibold">Direct reports</span>
          <p-tag severity="contrast" [value]="reports().length + ''" />
        </div>
      </ng-template>

      <ng-template #header>
        <tr>
          <th pSortableColumn="name">Name <p-sortIcon field="name" /></th>
          <th>Email</th>
          <th>Department</th>
          <th>Type</th>
        </tr>
      </ng-template>

      <ng-template #body let-person>
        <tr>
          <td>
            <div class="cell-person">
              <p-avatar [label]="initials(person.name)" shape="circle" />
              <span>{{ person.name }}</span>
            </div>
          </td>
          <td>{{ person.emailAddress || '-' }}</td>
          <td>{{ attr(person, 'department') }}</td>
          <td>
            <p-tag
              [severity]="typeSeverity(attr(person, 'type'))"
              [value]="attr(person, 'type')"
            />
          </td>
        </tr>
      </ng-template>

      <ng-template #emptymessage>
        <tr>
          <td colspan="4" class="cell-empty">This manager has no direct reports in the loaded identities.</td>
        </tr>
      </ng-template>
    </p-table>
  }
</main>

This concludes the development of the page. Step 8 deploys it to your tenant, step 9 adds it to the nav bar, and step 10 has ideas for going further.

8. Deploy to your tenant​

So far, your tenant has loaded the page from your laptop. These commands build the page and upload it to your tenant:

Your terminal

npm run build
sail ui-plugins upload

Terminal output

Uploaded 5 asset(s) to plugin "manager-lookup-[name]" (bundle 88610c07-b1fe-42d8-98c5-01703efd7cf7)
The plugin can be viewed at:
https://<tenant>/ui/plugin/033b32b5-280f-4d78-a856-05c2a34d15d1

upload does not build your code. It uploads whatever is already in build.outDir, so always run npm run build first.

Initial chunk files | Names | Raw size | Estimated transfer size
main-NGW7B3FQ.js    | main  |  1.08 MB |               209.13 kB

▲ [WARNING] bundle initial exceeded maximum budget. Budget 500.00 kB was not met by 584.57 kB

Open the printed URL. You see the same page without the Local Dev badge, because the tenant now serves the uploaded files.

The CLI finds the plugin by its alias in whichever tenant you are authenticated to. So the same upload command deploys to staging or production, depending only on sail env. You do not need to track a different plugin ID for each environment.

# What is registered in this tenant?
sail ui-plugins list

# Stop loading local code
sail ui-plugins unlink

# Remove the plugin instance entirely (prompts to confirm)
sail ui-plugins delete manager-lookup-[name]

9. Add to the nav bar​

A plugin URL works, but right now the only way to navigate to it is through the URL. A nav bar item gives your page a permanent home in ISC, next to the standard menus. This way it looks like it's really part of the product.

1. In your tenant, go to Admin → Global → System Settings → Customize Navbar.
2. Open Custom Item, and select the Enabled checkbox.
3. For Language, keep English. For Label, enter Manager Lookup. This is the name of the top menu.
4. Click Add sub menu item.

5. In the dialog, enter Manager Lookup Page as the Label. This is the name of the item inside the menu.
6. For Destination, select Plugin. Then select manager-lookup-[name] in the Plugin list.
7. Leave Required Capabilities empty, so every user sees the item. To limit the item to one audience, select a capability here.
8. Click Done.

9. Click Save.

10. Stretch goals​

Pick whichever looks most interesting. Each one is something real plugins need to do.

Quick​

• Add a name filter. Put a text input above the table and narrow the reports as the user types. Use a third computed() that reads a signal from the input.
• Find the tokens you are not using. Every design token in spds-prime-theme.ts is available in your CSS as --spds-<token-path>. Open your browser's dev tools, inspect any element the theme styled, and look at the variables it uses. This is faster than reading six thousand generated lines.

Medium​

• Show the manager, not just the reports. Your page only has the manager's managerRef, so it has no email, department, or title for them. Those are on the manager's own identity record, so you need a second call, such as getIdentityV1.
• Use more of PrimeNG. You have used six components so far. Add p-toast so a failed lookup shows a notification, replace the manager p-select with a p-autocomplete that searches the API as you type, or use p-tabs to add a second view. Every component has a live example at primeng.org, and every one is already themed.
• Stream the pages instead of collecting them. Paginator.paginate() keeps every record in memory and emits once at the end. That is fine for a few thousand identities, but wasteful for a hundred thousand. Use Paginator.paginatePages() instead, which emits each page as it arrives.

Ambitious​

• Show the whole chain. When the manager lookup works, notice that the manager has a managerRef too. Follow it upward with repeated getIdentityV1 calls, and show the reporting line from the selected person to the top of the organization. Stop when managerRef is null.
• Ask the server instead. Replace the client-side filter with a real query. The search API can filter by manager, which listIdentitiesV1 cannot.
• Count them instead of listing them. Use searchAggregateV1 to get the number of reports for every manager in the tenant in one call, and show it as a list. One request replaces what would otherwise take hundreds.

UI Plugins: an in-depth look​

You do not need this section to finish the track. It explains the scaffold files you did not write, which is why your code is so short and why the page looks like ISC without extra styling.

provideSailPoint(),
providePrimeNG({
  theme: {
    preset: spdsPrimePreset,
    options: { darkModeSelector: SPDS_DARK_MODE_SELECTOR, prefix: SPDS_THEME_PREFIX },
  },
}),
provideAppInitializer(async () => {
  await inject(SailpointPluginService).whenReady();
});

export const SPDS_DARK_MODE_SELECTOR = '.spds-dark';
export const SPDS_THEME_PREFIX = 'spds';

The starter's own src/app/app.ts and src/app/app.html were a demonstration of the same pattern you followed: PrimeNG components in the imports array, and a map from a state to a p-tag severity.

• PrimeNG components
• PrimeNG theming

Take it to the main hack​

You now know what a UI plugin does! It runs inside ISC, it uses the signed-in user's session, and it can call SailPoint APIs with no extra authentication. Now, what do you want to build?

You can submit a UI plugin as your main hack. The judges score it with the same judging criteria as the MCP Server hack, and it can win the same prizes.

Start with a real problem. Think of a task that takes too many clicks in ISC today, or a question that a manager, an auditor, or a help desk agent cannot answer easily. Then build the page that solves it.

Documentation​

The UI Plugins documentation is new. Until it ships to the docs site, read it on the preview build:

• UI Plugins overview
• Prerequisites
• Create a plugin instance
• CLI command reference

Still stuck?​

Grab a SailPoint employee in the room, or reach for the community and tooling.

• Developer Forum
• SDKs
• CLI
• Back to all tracks