ON Board Documentation

What is ON Board?

ON Board is the internal user provisioning platform for Harris Computer. It covers the full lifecycle of onboarding a new employee — from submitting a request to a fully provisioned Microsoft 365 account — with AI-assisted scoring, automatic user creation, Teams Phone integration, and mailbox management.

Everything runs in your browser. There is no backend server — ON Board authenticates via Microsoft (MSAL) and makes direct Microsoft Graph API calls to create users and manage SharePoint data.

Who uses it?

Signing In

When you first open ON Board, you will see a Sign In Required screen with a single button.

The Dashboard — Your Starting Point

After signing in, you land on the main dashboard. This is where all active work happens.

The main dashboard: KPI bar (top), Active Requests queue (centre), Recent Activity & Live Feed (bottom)

The License Tiles

Three compact tiles sit across the top of the main area. They show live M365 license consumption pulled directly from your tenant via Microsoft Graph, displayed as used / total.

The Active Requests Queue

Each request appears as a card in the queue. Cards show:

• Left column: Status badge (READY / NEEDS REVIEW / LOW CONFIDENCE), display name, company, and target email (UPN)
• Middle column: AI Confidence Score bar (0–100), job title and department badges
• Right column: Action buttons (Delete / Edit / Approve) and per-request options (Phone Lic checkbox)

The queue is fully scrollable — all requests are visible by scrolling down within the section. There is no pagination. Clicking anywhere on the card body (not the buttons) opens the full Request Details preview.

The Toolbar Buttons

The toolbar above the request cards

Recent Activity & Live System Feed

Recent Activity (bottom-left) shows the 15 most recently updated entries from SharePoint — useful to track what has been created or changed across all sessions.

Each row is clickable. Clicking a row opens an Activity Detail modal. If the entry is linked to an OnboardingRequest, an "Edit Request" button appears in the modal footer — clicking it opens the full Edit Request form for that record.

Live System Feed (bottom-right) is a real-time terminal that logs every action ON Board takes during your current session — auto-scoring, user creation, warnings, and errors. Each line shows a timestamp, a colour-coded tag (INFO / OK / WARN / ERR), and a description.

How to: Submit a New User Request

This is the most common task. Use it every time a new employee needs to be onboarded.

1

Open the form

Click the blue New Request button in the toolbar.

The New Request button in the toolbar

2

The New User Request form opens

A modal overlay with four sections appears.

The New User Request form

3

Organisation — select the Company

Click the Company dropdown and select the company this person belongs to. The company determines the email domain (e.g. selecting Harris Computer Germany → firstname.lastname@harriscomputer.eu).

If the company isn't listed yet, click the + button to the right of the dropdown. See Add a New Company.

4

Identity — name, title, department, license

Field	Required	Notes
First Name	✅	Only the first word is used for the email (e.g. "Jan Friedrich" → jan)
Last Name	✅	Used in full for the email address
Job Title	✅	Their role, e.g. Software Engineer
Department		Optional — omitting it reduces the AI score
Start Date		Optional — recorded on the request for reference
License Type		E3, E5, F3, or None / Assign Later

5

Access & Contact — Manager UPN

Manager UPN (required): Start typing the manager's name or email. Wait half a second — a dropdown of matching Azure AD users appears. Click the correct person — this fills in their full UPN automatically. Do not type the full UPN by hand unless the person is not found.

6

Distribution Lists (optional)

Type part of a list name (e.g. "HR", "Sales-Team") in the Distribution Lists search field, select from the dropdown. Each selection appears as a chip. Click × to remove a chip.

7

Submit

Click the blue Submit Request button. The request is saved to SharePoint. The AI engine runs immediately — if the score is ≥ 80, the user account is created in Azure AD automatically. If below 80, the card appears in the queue under Needs Review for manual action.

How to: Add a New Company

If the company doesn't appear in the Company dropdown when creating a request, add it first.

1

Open the Add New Company modal

While the New User Request form is open, click the + button to the right of the Company dropdown.

The Add New Company modal

2

Fill in the company details

Field	Required	Example
Company Name	✅	Harris Computer Germany
Email Domain	✅	harriscomputer.eu (no @ prefix, no https://)
Country Code		DE (defaults to DE)
Street Address		Musterstraße 1
Postal Code		60311
City		Frankfurt
Country		Germany

⚠️ The Email Domain field is critical. Every user created for this company will get an email address of the form firstname.lastname@[Email Domain]. Make sure it matches the actual domain in Azure AD exactly.

3

Click Create Company

The modal closes and the new company is immediately available in the Company dropdown of the parent form.

How to: Review a Request (Preview)

Before approving, you can inspect all details of a request.

How to: Edit a Request

Use this to correct or update any field before approving.

How to: Approve a Request (Create the User)

Approving a request triggers the full provisioning sequence in Azure AD.

How to: Delete a Request

Click the red Delete button on a request card.

The request is permanently removed from SharePoint and disappears from the queue.

How to: Auto-Process All High-Confidence Requests

Use this to clear the entire queue of high-scoring requests in a single click — no need to approve each one individually.

How to: Search and Filter the Queue

1

Click the Search box in the toolbar

Labelled "Search requests…"

2

Type any search term

Cards are filtered instantly as you type. The search matches against: name, company, UPN, job title, and department.

The queue filtered by search term

3

Clear the search

Delete the text in the search box to show all requests again.

How to: Set Up a Teams Phone Number

Use this to assign a Teams Direct Routing phone number to a user who already has an account in Azure AD.

1

Click Phone Setup in the toolbar

The Phone Setup modal

2

Enter the user's UPN

Type the full work email address of the user who needs a phone number (e.g. john.doe@harriscomputer.eu).

3

Click Run Phone Setup

A terminal panel expands below, showing each step as it executes:

> Initiating Microsoft Graph connection...
> Validating UPN: john.doe@harriscomputer.eu
> Checking existing SKU bounds...
> Assigning Teams Phone Standard license...
> Waiting for AAD sync...          ← this takes up to 2 minutes
> Querying available DIDs...
> Done — assigning phone number...

The runbook (Invoke-TeamsPhoneAssignment.ps1) runs in Azure Automation in the background. The wait time is configurable in Settings.

4

Wait for completion

The process takes 2–5 minutes. The terminal will show a green "Done" line when finished. If anything fails, an error line appears with details.

How to: Manage Distribution List Memberships

Use this to add an existing Azure AD user to one or more Distribution Lists — for example when someone changes team, or a DL was missed during onboarding.

1

Click Group Access in the toolbar

The Group & Mailbox Access modal opens on the Distribution Lists tab.

Group & Mailbox Access — Distribution Lists tab

2

Search for the user

Click into Search User and type the person's name or UPN. Select them from the results. Their Current DL Memberships appear automatically below.

3

Select the DLs to add them to

Click into the Add to Distribution List search box, type a list name, and select from the dropdown. Each selection appears as a chip.

4

Click Add to Selected DLs

The user is added to all selected DLs via Microsoft Graph. A success notification confirms.

How to: Grant or Revoke Shared Mailbox Access

Use this to give a user access to a shared mailbox — or remove access they no longer need.

1

Open Group Access → Shared Mailbox Access tab

Click Group Access in the toolbar, then click the Shared Mailbox Access tab.

Group & Mailbox Access — Shared Mailbox Access tab

2

Fill in the four fields

Field	What to enter
Shared Mailbox	Type to search for the mailbox (e.g. info@, support@) and select it
Delegate User	Type to search for the person who should receive/lose access
Permission	Choose one (see table below)
Action	Add Permission to grant access, Remove Permission to revoke it

Permission types

Permission	What the user can do
Full Access (read + send)	Read all mail in the mailbox and send from it — appears in Outlook as a secondary mailbox
Send As	Send email that appears to come from the mailbox address
Send on Behalf	Send email showing "User Name on behalf of Mailbox Name" in the From field

3

Click Execute via Runbook

The action runs via the Invoke-MailboxPermission.ps1 runbook in Azure Automation. A live terminal panel appears below, streaming the output (polled from SharePoint AuditLog every 2 seconds).

How to: View Provisioning Reports

1

Click Reports in the left sidebar

The Provisioning Reports modal opens.

The Provisioning Reports modal

2

Review the KPI cards and tables

Three KPI cards: Users Created (30 days) · Pending Requests · Success Rate

Two tables:

• Users Created Last 30 Days — User · Created Date · Approved By · Company · Department
• Users by Approver (Last 30 days) — Approver · Users Created · User List

3

Export data (optional)

Both tables have an Export CSV button. Click it to download the table data as a .csv file you can open in Excel.

4

Refresh the data

Click the Refresh button in the modal footer to reload the latest data from SharePoint.

Reference: Request Status Meanings

Reference: How UPNs Are Generated

ON Board automatically builds the User Principal Name (the user's work email / login) from the request data.

Formula: [firstname].[lastname]@[company-email-domain]

Rules applied to the name

• Only the first word of the first name is used (e.g. "Jan Friedrich" → jan)
• German umlauts are expanded to standard ASCII: ü→ue, ö→oe, ä→ae, ß→ss
• Other accented characters are decomposed to their base letter (e.g. é→e)
• Everything is lowercased

Examples

Collision handling

If the generated UPN already exists in Azure AD, the system tries john.doe1@…, then john.doe2@…, up to john.doe9@…. The resulting UPN is shown as a read-only preview in the Edit Request modal.

Reference: The AI Confidence Score

Every request is scored 0–100 before any action is taken. The score reflects how complete and valid the request data is.

Common reasons for score deductions

• Private email not provided
• Manager UPN could not be found in Azure AD
• Department field is empty
• Company not found in the CompanyDomains list
• Start date is in the past

Frequently Asked Questions

Admin: Setup & Prerequisites

Prerequisites

• Azure AD tenant with admin access
• Azure AD App Registration with delegated permissions (see below)
• SharePoint Online site at /sites/ONBoard with two lists
• User Administrator role for the admin using the app

1. Azure AD App Registration

Required API Permissions (Delegated)

Redirect URIs (Authentication → Web)

• https://zealous-island-0a17abf03.4.azurestaticapps.net (production)
• http://localhost:4280 (local development with SWA CLI)

2. SharePoint Setup

Site URL: https://harriscomputereu.sharepoint.com/sites/ONBoard

List: OnboardingRequests

List ID: 65c922cf-3da8-4621-b53c-8c531992b3c0

List: CompanyDomains

List ID: 29aab1ae-2bd1-4ae9-843d-a352e0c67f57

3. License SKU Configuration

License SKU IDs are tenant-specific GUIDs. Find yours with PowerShell:

Connect-MgGraph -Scopes "Organization.Read.All"
Get-MgSubscribedSku | Select-Object SkuPartNumber, SkuId | Format-Table

Then update either config.js → ONBOARD_CONFIG.licenses (hardcoded, requires redeploy) or the Settings modal → License Configuration section (stored in localStorage, per-browser).

4. Power Automate Flow URLs

5. Local Development

# Serve locally with SWA CLI
npx @azure/static-web-apps-cli start .

# Or use any static server
npx serve .
python3 -m http.server 8080

For development without Azure credentials, open the browser console and run:

enterMockMode()

This loads fake data and bypasses authentication.

6. Deployment

swa deploy . --app-name ONBoard --resource-group autoOnboarding

Admin: Architecture

System Overview

ON Board is a client-side SPA — there is no backend server. The admin's browser authenticates via MSAL, then makes direct Microsoft Graph API calls to create users and manage SharePoint data.

┌──────────────────────────────────────────────────────────┐
│  Browser (index.html)                                    │
│                                                          │
│  ┌─────────┐  ┌─────────┐  ┌───────────┐  ┌──────────┐ │
│  │ auth.js │  │ app.js  │  │provision.js│  │ phone.js │ │
│  └────┬────┘  └────┬────┘  └─────┬─────┘  └────┬─────┘ │
│       └────────────┴──────┬──────┴──────────────┘        │
│                      ┌────┴────┐                         │
│                      │graph.js │                         │
│                      └────┬────┘                         │
└───────────────────────────┼──────────────────────────────┘
                            │ HTTPS (Bearer Token)
               ┌────────────┼────────────┐
               │            │            │
        ┌──────┴──────┐ ┌──┴───┐ ┌──────┴──────┐
        │  SharePoint │ │Entra │ │Power Automate│
        │  Lists      │ │ID    │ │  Flows       │
        └─────────────┘ └──────┘ └──────────────┘

Request Lifecycle

Asana Task (L1 submits)
    │
    ▼ Power Automate flow
SharePoint "OnboardingRequests" list [Status: Pending]
    │
    ▼ Dashboard loads via Graph API
ON Board Dashboard (admin sees request card)
    │
    ├─ Edit → PATCH SharePoint item
    ├─ Reject → Status: Rejected
    │
    └─ Approve →
        Status: Creating
        │
        ▼ POST /v1.0/users
        Create Entra ID user
        │
        ▼ PUT /users/{id}/manager/$ref
        Assign manager
        │
        ▼ POST /users/{id}/assignLicense
        Assign M365 license
        │
        ▼ (optional) Assign phone license + number
        │
        ▼ (optional) POST to Power Automate → send credentials email
        │
        Status: Created ✅  (or Failed ❌)

Authentication Flow

1. Page loads → initAuth() creates MSAL instance
2. handleRedirectPromise() checks for returning auth redirect
3. If no session → show sign-in gate
4. User clicks "Sign In" → loginRedirect() (full-page redirect to Microsoft)
5. After auth → redirect back → token stored in localStorage
6. acquireTokenSilent() for API calls → falls back to redirect if expired

Script Load Order

1. msal-browser.min.js  (CDN - Microsoft)
2. config.js            (ONBOARD_CONFIG object)
3. notifications.js     (notify global)
4. loading.js           (loading global)
5. auth.js              (initAuth, getAccessToken)
6. graph.js             (Graph API)
7. provision.js         (provisioning)
8. reports.js           (reporting)
9. phone.js             (phone setup)
10. settings.js         (settings)
11. app.js              (main — depends on everything above)

Key Design Decisions

No backend server

All operations run client-side via delegated Graph API permissions. The signed-in admin's token determines what they can do.

SharePoint as database

Avoids spinning up a separate database. SharePoint lists store all request data with native versioning and permissions.

Field mapping layer

SharePoint auto-generates internal names (field_2, field_6) that differ from display names. graph.js maintains a mapping constant to translate between app-friendly names and SharePoint internals.

Mock mode

enterMockMode() bypasses auth and loads fake data, allowing UI development and testing without Azure credentials.

Password stored in InternalNotes

Generated in-memory by provision.js, passed to the Graph API, and persisted in the SharePoint InternalNotes column for admin reference. Optionally emailed via Power Automate flow.