Asset Handover form

How to Create an Asset Interaction Form with PDF Generation and Excel Integration Using Power Automate and jsPDF

1. Introduction

Explain the problem: Businesses need a way to capture asset handover details digitally.
State the goal: Build an HTML form that:
- Captures asset details.
- Sends data to Excel via Power Automate.
- Generates a PDF handover form locally in the browser.

2. Prerequisites

Microsoft 365 account with Power Automate and Excel Online.
Any web hosting for HTML.
Basic knowledge of HTML and JavaScript.
Libraries: jsPDF and jsPDF-AutoTable.

Step 1: Prepare Excel Table

Create an Excel file in OneDrive/SharePoint, add a table named AssetInteractions with these columns (adjust names if you want, but keep them consistent):
- Timestamp
- InteractionType
- AssetFor
- Date
- EngineerName
- TicketID
- EmployeeName
- EmployeeEmail
- EmpID
- JobTitle
- EmpManager
- DeviceSpecs
- AssetType
- New_Make
- New_Model
- New_AssetTag
- New_Serial
- Old_Make
- Old_Model
- Old_AssetTag
- Old_Serial

Step 2: Create Power Automate Flow

Trigger

When an HTTP request is received (Premium)
Click Use sample payload to generate schema, and paste this sample (matching the payload we’ll send):
{
“secret”: “tabish-shared-key-123”,
“interactionType”: “Allocated”,
“engineerName”: “John Engineer”,
“ticketid”: “INC123456”,
“assetFor”: “WFH”,
“date”: “2025-12-16”,
“employee”: {
“name”: “Jane Employee”,
“email”: “[email protected]”,
“empId”: “EMP001”,
“jobTitle”: “Technical Operations”,
“manager”: “Manager Name”
},
“deviceSpecs”: “USB-C cable, HDMI”,
“assets”: [
{
“type”: “Laptop”,
“specify”: “”,
“new”: { “make”:”Lenovo”, “model”:”T14″, “assettag”:”TAG123″, “serial”:”S123″ },
“old”: { “make”:””, “model”:””, “assettag”:””, “serial”:”” }
},
{
“type”: “Others”,
“specify”: “USB-C cable”,
“new”: { “make”:”Belkin”, “model”:”BK-USB-C”, “assettag”:””, “serial”:”N/A” },
“old”: { “make”:””, “model”:””, “assettag”:””, “serial”:”” }
}
]
}

Actions

(Optional) Condition to validate secret
- Expression:
  equals(triggerBody()?['secret'], 'tabish-shared-key-123')
- If false → Response: Status 403, Body {"error":"invalid secret"}
Initialize variable nowIst (String) with:
convertTimeZone(utcNow(),'UTC','India Standard Time')
Apply to each → triggerBody()?['assets']
- Inside loop: Add a row into a table (Excel Online (Business))
  - Map columns with these expressions (see section 4 below).
Excel “Add a row” – field mapping (inside “Apply to each assets”

Use these dynamic content / expressions to map each item plus the common fields. In the Apply to each, the current item is the asset object.

Timestamp → variables('nowIst')
InteractionType → triggerBody()?['interactionType']
AssetFor → coalesce(triggerBody()?['assetFor'],'')
Date → coalesce(triggerBody()?['date'],'')
EngineerName → triggerBody()?['engineerName']
TicketID → coalesce(triggerBody()?['ticketid'],'')
EmployeeName → coalesce(triggerBody()?['employee']?['name'],'')
EmployeeEmail → coalesce(triggerBody()?['employee']?['email'],'')
JobTitle → coalesce(triggerBody()?['employee']?['jobTitle'],'')
EmpManager → coalesce(triggerBody()?['employee']?['manager'],'')
DeviceSpecs → coalesce(triggerBody()?['deviceSpecs'],'')
AssetType → items('Apply_to_each')?['type']
New_Make → coalesce(items('Apply_to_each')?['new']?['make'],'')
New_Model → coalesce(items('Apply_to_each')?['new']?['model'],'')
New_AssetTag → coalesce(items('Apply_to_each')?['new']?['assettag'],'')
New_Serial → coalesce(items('Apply_to_each')?['new']?['serial'],'')
Old_Make → coalesce(items('Apply_to_each')?['old']?['make'],'')
Old_Model → coalesce(items('Apply_to_each')?['old']?['model'],'')
Old_AssetTag → coalesce(items('Apply_to_each')?['old']?['assettag'],'')
Old_Serial → coalesce(items('Apply_to_each')?['old']?['serial'],'')

Response (HTTP action)
- Status: 200
- Body: {"status":"ok"}
- Headers (to avoid any CORS issues from browsers):
  - Access-Control-Allow-Origin: *
  - Access-Control-Allow-Headers: *

Main HTML

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1″ />
<title>Asset Interaction Form</title>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.8.3/jspdf.plugin.autotable.min.js”></script>

<style>
:root {
–bg: #f7f9fc;
–card: #ffffff;
–text: #1f2937;
–muted: #6b7280;
–primary: #2563eb;
–border: #e5e7eb;
–warn: #b91c1c;
}
body {
margin: 0; background: var(–bg); color: var(–text);
font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, “Noto Sans”, “Apple Color Emoji”, “Segoe UI Emoji”;
}
.container {
max-width: 980px; margin: 32px auto; padding: 0 16px;
}
.card {
background: var(–card); border: 1px solid var(–border);
border-radius: 12px; box-shadow: 0 10px 20px rgba(0,0,0,0.04);
padding: 24px;
}
h1, h2 { margin: 0 0 16px; }
.subtitle { color: var(–muted); margin-bottom: 24px; }
.grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 768px) {
.grid.two { grid-template-columns: 1fr 1fr; }
.grid.three { grid-template-columns: repeat(3, 1fr); }
}
label { font-weight: 600; display: inline-block; margin-bottom: 6px; }
.field { display: flex; flex-direction: column; }
input[type=”text”], input[type=”email”], input[type=”date”], select, textarea {
padding: 10px 12px; border: 1px solid var(–border); border-radius: 8px;
font-size: 14px; outline: none; background: #fff; color: var(–text);
}
textarea { min-height: 90px; resize: vertical; }
.help { font-size: 12px; color: var(–muted); margin-top: 6px; }
.group-title { font-weight: 700; margin-top: 16px; margin-bottom: 8px; }
.radio-row, .checkbox-row { display: flex; gap: 16px; flex-wrap: wrap; }
.radio-pill, .checkbox-pill {
display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px;
border: 1px solid var(–border); border-radius: 999px; cursor: pointer;
background: #fff;
}
.asset-list {
display: grid; grid-template-columns: 1fr; gap: 12px;
}
@media (min-width: 768px) {
.asset-list { grid-template-columns: 1fr 1fr; }
}
.asset-item {
border: 1px solid var(–border); border-radius: 10px; padding: 12px;
display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
background: #fff;
}
.asset-item input[type=”checkbox”] { margin-top: 4px; }
.asset-name { font-weight: 600; }
.asset-details {
grid-column: 1 / -1; display: none; margin-top: 8px;
border-top: 1px dashed var(–border); padding-top: 10px;
}
.fieldset-title { font-weight: 700; color: var(–muted); margin-bottom: 6px; }
.details-grid { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.error { color: var(–warn); font-size: 12px; margin-top: 6px; display: none; }
.actions { display: flex; gap: 12px; margin-top: 24px; }
button {
padding: 10px 16px; border-radius: 10px; border: none; cursor: pointer;
font-weight: 600; font-size: 14px;
}
.btn-primary { background: var(–primary); color: #fff; }
.btn-secondary { background: #eef2ff; color: #1e40af; }
.output {
margin-top: 20px; background: #0b1221; color: #e5e7eb;
border-radius: 8px; padding: 16px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, “Liberation Mono”, “Courier New”, monospace;
overflow: auto; max-height: 320px; display:none;
}
.required::after { content: ” *”; color: var(–warn); }
</style>
</head>
<body>
<div class=”container”>
<div class=”card”>
<h1>Asset Interaction Form</h1>
<p class=”subtitle”>Capture details for <strong>Received</strong>, <strong>Allocated</strong>, or <strong>Replacement</strong> scenarios.</p>
<form id=”assetForm” novalidate>
<!– Interaction Type –>
<div class=”field”>
<span class=”group-title required”>Interaction Type</span>
<div class=”radio-row” role=”radiogroup” aria-label=”Interaction Type”>
<label class=”radio-pill”><input type=”radio” name=”interactionType” value=”Received” required /> Received</label>
<label class=”radio-pill”><input type=”radio” name=”interactionType” value=”Allocated” /> Allocated</label>
<label class=”radio-pill”><input type=”radio” name=”interactionType” value=”Replacement” /> Replacement</label>
</div>
<div class=”help”>Controls Asset For options and Old/New asset fields in Replacement.</div>
</div>
<!– Engineer Name –>
<div class=”grid two”>
<div class=”field”>
<label for=”engineerName” class=”required”>Engineer Name</label>
<input type=”text” id=”engineerName” name=”engineerName” placeholder=”Engineer full name” required />
</div>
<div class=”field”>
<label for=”ticketid” class=”required”>Ticket ID</label>
<input type=”text” id=”ticketid” name=”ticketid” placeholder=”Ticket ID” required />
</div>
</div>
<!– Asset For + Date –>
<div class=”grid two”>
<div class=”field”>
<label for=”assetFor” class=”required”>Asset for</label>
<select id=”assetFor” name=”assetFor” required>
<option value=”” disabled selected>Select…</option>
<!– Options injected dynamically based on interaction type –>
</select>
<!–<div class=”help”>Options depend on Interaction Type.</div>–>
</div>
<div class=”field”>
<label for=”date” class=”required”>Allocation / Received Date</label>
<input type=”date” id=”date” name=”date” required />
</div>
</div>
<!– Employee Details –>
<div class=”grid two”>
<div class=”field”>
<label for=”empName” class=”required”>Employee Name</label>
<input type=”text” id=”empName” name=”empName” placeholder=”Employee full name” required />
</div>
<div class=”field”>
<label for=”empEmail” class=”required”>Employee Email ID</label>
<input type=”email” id=”empEmail” name=”empEmail” placeholder=”[email protected]” required />
<!– <div class=”help”>Valid corporate email required.</div>–>
</div>
</div>
<!– Job Title (text box as requested) –>
<div class=”grid two”>
<div class=”field”>
<label for=”empid” class=”required”>Emp ID</label>
<input type=”text” id=”empid” name=”empid” placeholder=”e.g., EMP ID” required />
</div>
<div class=”field”>
<label for=”empmanager” class=”required”>Employee Manager</label>
<input type=”text” id=”empmanager” name=”empmanager” placeholder=”e.g., Engineer, Manager” required />
</div>
</div>
<!– Job Title (text box as requested) –>
<div class=”grid two”>
<div class=”field”>
<label for=”jobTitle” class=”required”>Job Title</label>
<input type=”text” id=”jobTitle” name=”jobTitle” placeholder=”e.g., Engineer, Manager” required />
</div>
</div>
<!– Asset Type Checklist –>
<div class=”field”>
<span class=”group-title required”>Asset Type (Checklist)</span>
<div class=”asset-list” id=”assetList”>
<!– Desktop –>
<div class=”asset-item”>
<input type=”checkbox” id=”asset-desktop” name=”assets” value=”Desktop” data-key=”desktop” />
<label for=”asset-desktop” class=”asset-name”>Desktop</label>
<div class=”asset-details” id=”details-desktop”>
<div class=”fieldset-title”>New Asset Details</div>
<div class=”details-grid”>
<div class=”field”>
<label for=”make-desktop-new”>Make</label>
<input type=”text” id=”make-desktop-new” name=”make_desktop_new” placeholder=”e.g., Dell, HP” />
</div>
<div class=”field”>
<label for=”model-desktop-new”>Model</label>
<input type=”text” id=”model-desktop-new” name=”model_desktop_new” placeholder=”e.g., PG0312VB” />
</div>
<div class=”field”>
<label for=”Assettag-desktop-new”>Asset Tag</label>
<input type=”text” id=”Assettag-desktop-new” name=”Assettag_desktop_new” placeholder=”e.g., Tag 12345″ />
</div>
<div class=”field”>
<label for=”serial-desktop-new”>Serial Number</label>
<input type=”text” id=”serial-desktop-new” name=”serial_desktop_new” placeholder=”e.g., S/N 12345″ />
</div>
</div>
<div class=”fieldset-title old-title” style=”display:none;”>Old Asset Details</div>
<div class=”details-grid old-grid” style=”display:none;”>
<div class=”field”>
<label for=”make-desktop-old”>Make(OLD)</label>
<input type=”text” id=”make-desktop-old” name=”make_desktop_old” placeholder=”e.g., Dell, HP” />
</div>
<div class=”field”>
<label for=”model-desktop-old”>Model(OLD)</label>
<input type=”text” id=”model-desktop-old” name=”model_desktop_old” placeholder=”e.g., PG0312VB” />
</div>
<div class=”field”>
<label for=”Assettag-desktop-old”>Asset Tag (OLD)</label>
<input type=”text” id=”Assettag-desktop-old” name=”Assettag_desktop_old” placeholder=”e.g., Tag 12345″ />
</div>
<div class=”field”>
<label for=”serial-desktop-old”>Serial Number(OLD)</label>
<input type=”text” id=”serial-desktop-old” name=”serial_desktop_old” placeholder=”e.g., S/N 12345″ />
</div>
</div>
</div>
</div>
<!– cpuadaptor –>
<div class=”asset-item”>
<input type=”checkbox” id=”asset-cpuadaptor” name=”assets” value=”cpuadaptor” data-key=”cpuadaptor” />
<label for=”asset-cpuadaptor” class=”asset-name”>CPU Adaptor</label>
<div class=”asset-details” id=”details-cpuadaptor”>
<div class=”fieldset-title”>New Asset Details</div>
<div class=”details-grid”>
<div class=”field”>
<label for=”make-cpuadaptor-new”>Make</label>
<input type=”text” id=”make-cpuadaptor-new” name=”make_cpuadaptor_new” placeholder=”e.g., Dell, HP” />
</div>
<div class=”field”>
<label for=”model-cpuadaptor-new”>Model</label>
<input type=”text” id=”model-cpuadaptor-new” name=”model_cpuadaptor_new” placeholder=”e.g., PG0312VB” />
</div>
<div class=”field”>
<label for=”Assettag-cpuadaptor-new”>Asset Tag</label>
<input type=”text” id=”Assettag-cpuadaptor-new” name=”Assettag_cpuadaptor_new” placeholder=”e.g., Tag 12345″ />
</div>
<div class=”field”>
<label for=”serial-cpuadaptor-new”>Serial Number</label>
<input type=”text” id=”serial-cpuadaptor-new” name=”serial_cpuadaptor_new” placeholder=”e.g., S/N 12345″ />
</div>
</div>
<div class=”fieldset-title old-title” style=”display:none;”>Old Asset Details</div>
<div class=”details-grid old-grid” style=”display:none;”>
<div class=”field”>
<label for=”make-cpuadaptor-old”>Make(OLD)</label>
<input type=”text” id=”make-cpuadaptor-old” name=”make_cpuadaptor_old” placeholder=”e.g., Dell, HP” />
</div>
<div class=”field”>
<label for=”model-cpuadaptor-old”>Model(OLD)</label>
<input type=”text” id=”model-cpuadaptor-old” name=”model_cpuadaptor_old” placeholder=”e.g., PG0312VB” />
</div>
<div class=”field”>
<label for=”Assettag-cpuadaptor-old”>Asset Tag (OLD)</label>
<input type=”text” id=”Assettag-cpuadaptor-old” name=”Assettag_cpuadaptor_old” placeholder=”e.g., Tag 12345″ />
</div>
<div class=”field”>
<label for=”serial-cpuadaptor-old”>Serial Number(OLD)</label>
<input type=”text” id=”serial-cpuadaptor-old” name=”serial_cpuadaptor_old” placeholder=”e.g., S/N 12345″ />
</div>
</div>
</div>
</div>
<!– Laptop –>
<div class=”asset-item”>
<input type=”checkbox” id=”asset-laptop” name=”assets” value=”Laptop” data-key=”laptop” />
<label for=”asset-laptop” class=”asset-name”>Laptop</label>
<div class=”asset-details” id=”details-laptop”>
<div class=”fieldset-title”>New Asset Details</div>
<div class=”details-grid”>
<div class=”field”>
<label for=”make-laptop-new”>Make</label>
<input type=”text” id=”make-laptop-new” name=”make_laptop_new” placeholder=”e.g., Lenovo, Microsoft” />
</div>
<div class=”field”>
<label for=”model-laptop-new”>Model</label>
<input type=”text” id=”model-laptop-new” name=”model_laptop_new” placeholder=”e.g., PG0312VB” />
</div>
<div class=”field”>
<label for=”Assettag-laptop-new”>Asset Tag</label>
<input type=”text” id=”Assettag-laptop-new” name=”Assettag_laptop_new” placeholder=”e.g., Tag 12345″ />
</div>
<div class=”field”>
<label for=”serial-laptop-new”>Serial Number</label>
<input type=”text” id=”serial-laptop-new” name=”serial_laptop_new” placeholder=”e.g., S/N 12345″ />
</div>
</div>
<div class=”fieldset-title old-title” style=”display:none;”>Old Asset Details</div>
<div class=”details-grid old-grid” style=”display:none;”>
<div class=”field”>
<label for=”make-laptop-old”>Make(OLD)</label>
<input type=”text” id=”make-laptop-old” name=”make_laptop_old” placeholder=”e.g., Lenovo,Microsoft” />
</div>
<div class=”field”>
<label for=”model-laptop-old”>Model(OLD)</label>
<input type=”text” id=”model-laptop-old” name=”model_laptop_old” placeholder=”e.g., PG0312VB” />
</div>
<div class=”field”>
<label for=”Assettag-laptop-old”>Asset Tag (OLD)</label>
<input type=”text” id=”Assettag-laptop-old” name=”Assettag_laptop_old” placeholder=”e.g., Tag 12345″ />
</div>
<div class=”field”>
<label for=”serial-laptop-old”>Serial Number(OLD)</label>
<input type=”text” id=”serial-laptop-old” name=”serial_laptop_old” placeholder=”e.g., S/N 12345″ />
</div>
</div>
</div>
</div>
<!– Laptop Charger –>
<div class=”asset-item”>
<input type=”checkbox” id=”asset-laptopcharger” name=”assets” value=”Laptop Charger” data-key=”laptopcharger” />
<label for=”asset-laptopcharger” class=”asset-name”>Laptop Charger</label>
<div class=”asset-details” id=”details-laptopcharger”>
<div class=”fieldset-title”>New Asset Details</div>
<div class=”details-grid”>
<div class=”field”>
<label for=”make-laptopcharger-new”>Make</label>
<input type=”text” id=”make-laptopcharger-new” name=”make_laptopcharger_new” placeholder=”e.g., Dell, HP” />
</div>
<div class=”field”>
<label for=”model-laptopcharger-new”>Model</label>
<input type=”text” id=”model-laptopcharger-new” name=”model_laptopcharger_new” placeholder=”e.g., PG0312VB” />
</div>
<div class=”field”>
<label for=”Assettag-laptopcharger-new”>Asset Tag</label>
<input type=”text” id=”Assettag-laptopcharger-new” name=”Assettag_laptopcharger_new” placeholder=”e.g., Tag 12345″ />
</div>
<div class=”field”>
<label for=”serial-laptopcharger-new”>Serial Number</label>
<input type=”text” id=”serial-laptopcharger-new” name=”serial_laptopcharger_new” placeholder=”e.g., S/N 12345″ />
</div>
</div>
<div class=”fieldset-title old-title” style=”display:none;”>Old Asset Details</div>
<div class=”details-grid old-grid” style=”display:none;”>
<div class=”field”>
<label for=”make-laptopcharger-old”>Make(OLD)</label>
<input type=”text” id=”make-laptopcharger-old” name=”make_laptopcharger_old” placeholder=”e.g., Dell, HP” />
</div>
<div class=”field”>
<label for=”model-laptopcharger-old”>Model(OLD)</label>
<input type=”text” id=”model-laptopcharger-old” name=”model_laptopcharger_old” placeholder=”e.g., PG0312VB” />
</div>
<div class=”field”>
<label for=”Assettag-laptopcharger-old”>Asset Tag (OLD)</label>
<input type=”text” id=”Assettag-laptopcharger-old” name=”Assettag_laptopcharger_old” placeholder=”e.g., Tag 12345″ />
</div>
<div class=”field”>
<label for=”serial-laptopcharger-old”>Serial Number(OLD)</label>
<input type=”text” id=”serial-laptopcharger-old” name=”serial_laptopcharger_old” placeholder=”e.g., S/N 12345″ />
</div>
</div>
</div>
</div>
<!– Monitor –>
<div class=”asset-item”>
<input type=”checkbox” id=”asset-monitor” name=”assets” value=”Monitor” data-key=”monitor” />
<label for=”asset-monitor” class=”asset-name”>Monitor</label>
<div class=”asset-details” id=”details-monitor”>
<div class=”fieldset-title”>New Asset Details</div>
<div class=”details-grid”>
<div class=”field”>
<label for=”make-monitor-new”>Make</label>
<input type=”text” id=”make-monitor-new” name=”make_monitor_new” placeholder=”e.g., Dell, HP” />
</div>
<div class=”field”>
<label for=”model-monitor-new”>Model</label>
<input type=”text” id=”model-monitor-new” name=”model_monitor_new” placeholder=”e.g., PG0312VB” />
</div>
<div class=”field”>
<label for=”Assettag-monitor-new”>Asset Tag</label>
<input type=”text” id=”Assettag-monitor-new” name=”Assettag_monitor_new” placeholder=”e.g., Tag 12345″ />
</div>
<div class=”field”>
<label for=”serial-monitor-new”>Serial Number</label>
<input type=”text” id=”serial-monitor-new” name=”serial_monitor_new” placeholder=”e.g., S/N 12345″ />
</div>
</div>
<div class=”fieldset-title old-title” style=”display:none;”>Old Asset Details</div>
<div class=”details-grid old-grid” style=”display:none;”>
<div class=”field”>
<label for=”make-monitor-old”>Make(OLD)</label>
<input type=”text” id=”make-monitor-old” name=”make_monitor_old” placeholder=”e.g., Dell, HP” />
</div>
<div class=”field”>
<label for=”model-monitor-old”>Model(OLD)</label>
<input type=”text” id=”model-monitor-old” name=”model_monitor_old” placeholder=”e.g., PG0312VB” />
</div>
<div class=”field”>
<label for=”Assettag-monitor-old”>Asset Tag (OLD)</label>
<input type=”text” id=”Assettag-monitor-old” name=”Assettag_monitor_old” placeholder=”e.g., Tag 12345″ />
</div>
<div class=”field”>
<label for=”serial-monitor-old”>Serial Number(OLD)</label>
<input type=”text” id=”serial-monitor-old” name=”serial_monitor_old” placeholder=”e.g., S/N 12345″ />
</div>
</div>
</div>
</div>
<!– Monitor2 –>
<div class=”asset-item”>
<input type=”checkbox” id=”asset-monitor2″ name=”assets” value=”Monitor2″ data-key=”monitor2″ />
<label for=”asset-monitor2″ class=”asset-name”>Monitor2</label>
<div class=”asset-details” id=”details-monitor2″>
<div class=”fieldset-title”>New Asset Details</div>
<div class=”details-grid”>
<div class=”field”>
<label for=”make-monitor2-new”>Make</label>
<input type=”text” id=”make-monitor2-new” name=”make_monitor2_new” placeholder=”e.g., Dell, HP” />
</div>
<div class=”field”>
<label for=”model-monitor2-new”>Model</label>
<input type=”text” id=”model-monitor2-new” name=”model_monitor2_new” placeholder=”e.g., PG0312VB” />
</div>
<div class=”field”>
<label for=”Assettag-monitor2-new”>Asset Tag</label>
<input type=”text” id=”Assettag-monitor2-new” name=”Assettag_monitor2_new” placeholder=”e.g., Tag 12345″ />
</div>
<div class=”field”>
<label for=”serial-monitor2-new”>Serial Number</label>
<input type=”text” id=”serial-monitor2-new” name=”serial_monitor2_new” placeholder=”e.g., S/N 12345″ />
</div>
</div>
<div class=”fieldset-title old-title” style=”display:none;”>Old Asset Details</div>
<div class=”details-grid old-grid” style=”display:none;”>
<div class=”field”>
<label for=”make-monitor2-old”>Make(OLD)</label>
<input type=”text” id=”make-monitor2-old” name=”make_monitor2_old” placeholder=”e.g., Dell, HP” />
</div>
<div class=”field”>
<label for=”model-monitor2-old”>Model(OLD)</label>
<input type=”text” id=”model-monitor2-old” name=”model_monitor2_old” placeholder=”e.g., PG0312VB” />
</div>
<div class=”field”>
<label for=”Assettag-monitor2-old”>Asset Tag (OLD)</label>
<input type=”text” id=”Assettag-monitor2-old” name=”Assettag_monitor2_old” placeholder=”e.g., Tag 12345″ />
</div>
<div class=”field”>
<label for=”serial-monitor2-old”>Serial Number(OLD)</label>
<input type=”text” id=”serial-monitor2-old” name=”serial_monitor2_old” placeholder=”e.g., S/N 12345″ />
</div>
</div>
</div>
</div>
<!– Docking Station –>
<div class=”asset-item”>
<input type=”checkbox” id=”asset-docking” name=”assets” value=”Docking Station” data-key=”docking” />
<label for=”asset-docking” class=”asset-name”>Docking Station</label>
<div class=”asset-details” id=”details-docking”>
<div class=”fieldset-title”>New Asset Details</div>
<div class=”details-grid”>
<div class=”field”>
<label for=”make-docking-new”>Make</label>
<input type=”text” id=”make-docking-new” name=”make_docking_new” placeholder=”e.g., Dell, HP” />
</div>
<div class=”field”>
<label for=”model-docking-new”>Model</label>
<input type=”text” id=”model-docking-new” name=”model_docking_new” placeholder=”e.g., PG0312VB” />
</div>
<div class=”field”>
<label for=”Assettag-docking-new”>Asset Tag</label>
<input type=”text” id=”Assettag-docking-new” name=”Assettag_docking_new” placeholder=”e.g., Tag 12345″ />
</div>
<div class=”field”>
<label for=”serial-docking-new”>Serial Number</label>
<input type=”text” id=”serial-docking-new” name=”serial_docking_new” placeholder=”e.g., S/N 12345″ />
</div>
</div>
<div class=”fieldset-title old-title” style=”display:none;”>Old Asset Details</div>
<div class=”details-grid old-grid” style=”display:none;”>
<div class=”field”>
<label for=”make-docking-old”>Make(OLD)</label>
<input type=”text” id=”make-docking-old” name=”make_docking_old” placeholder=”e.g., Dell, HP” />
</div>
<div class=”field”>
<label for=”model-docking-old”>Model(OLD)</label>
<input type=”text” id=”model-docking-old” name=”model_docking_old” placeholder=”e.g., PG0312VB” />
</div>
<div class=”field”>
<label for=”Assettag-docking-old”>Asset Tag (OLD)</label>
<input type=”text” id=”Assettag-docking-old” name=”Assettag_docking_old” placeholder=”e.g., Tag 12345″ />
</div>
<div class=”field”>
<label for=”serial-docking-old”>Serial Number(OLD)</label>
<input type=”text” id=”serial-docking-old” name=”serial_docking_old” placeholder=”e.g., S/N 12345″ />
</div>
</div>
</div>
</div>
<!– Dock Charger –>
<div class=”asset-item”>
<input type=”checkbox” id=”asset-dockcharger” name=”assets” value=”Dock Charger” data-key=”dockcharger” />
<label for=”asset-dockcharger” class=”asset-name”>Dock Charger</label>
<div class=”asset-details” id=”details-dockcharger”>
<div class=”fieldset-title”>New Asset Details</div>
<div class=”details-grid”>
<div class=”field”>
<label for=”make-dockcharger-new”>Make</label>
<input type=”text” id=”make-dockcharger-new” name=”make_dockcharger_new” placeholder=”e.g., Dell, HP” />
</div>
<div class=”field”>
<label for=”model-dockcharger-new”>Model</label>
<input type=”text” id=”model-dockcharger-new” name=”model_dockcharger_new” placeholder=”e.g., PG0312VB” />
</div>
<div class=”field”>
<label for=”Assettag-dockcharger-new”>Asset Tag</label>
<input type=”text” id=”Assettag-dockcharger-new” name=”Assettag_dockcharger_new” placeholder=”e.g., Tag 12345″ />
</div>
<div class=”field”>
<label for=”serial-dockcharger-new”>Serial Number</label>
<input type=”text” id=”serial-dockcharger-new” name=”serial_dockcharger_new” placeholder=”e.g., S/N 12345″ />
</div>
</div>
<div class=”fieldset-title old-title” style=”display:none;”>Old Asset Details</div>
<div class=”details-grid old-grid” style=”display:none;”>
<div class=”field”>
<label for=”make-dockcharger-old”>Make(OLD)</label>
<input type=”text” id=”make-dockcharger-old” name=”make_dockcharger_old” placeholder=”e.g., Dell, HP” />
</div>
<div class=”field”>
<label for=”model-dockcharger-old”>Model(OLD)</label>
<input type=”text” id=”model-dockcharger-old” name=”model_dockcharger_old” placeholder=”e.g., PG0312VB” />
</div>
<div class=”field”>
<label for=”Assettag-dockcharger-old”>Asset Tag (OLD)</label>
<input type=”text” id=”Assettag-dockcharger-old” name=”Assettag_dockcharger_old” placeholder=”e.g., Tag 12345″ />
</div>
<div class=”field”>
<label for=”serial-dockcharger-old”>Serial Number(OLD)</label>
<input type=”text” id=”serial-dockcharger-old” name=”serial_dockcharger_old” placeholder=”e.g., S/N 12345″ />
</div>
</div>
</div>
</div>
<!– Headphone –>
<div class=”asset-item”>
<input type=”checkbox” id=”asset-headphone” name=”assets” value=”Headphone” data-key=”headphone” />
<label for=”asset-headphone” class=”asset-name”>Headphone</label>
<div class=”asset-details” id=”details-headphone”>
<div class=”fieldset-title”>New Asset Details</div>
<div class=”details-grid”>
<div class=”field”>
<label for=”make-headphone-new”>Make</label>
<input type=”text” id=”make-headphone-new” name=”make_headphone_new” placeholder=”e.g., Dell, HP” />
</div>
<div class=”field”>
<label for=”model-headphone-new”>Model</label>
<input type=”text” id=”model-headphone-new” name=”model_headphone_new” placeholder=”e.g., PG0312VB” />
</div>
<div class=”field”>
<label for=”Assettag-headphone-new”>Asset Tag</label>
<input type=”text” id=”Assettag-headphone-new” name=”Assettag_headphone_new” placeholder=”e.g., Tag 12345″ />
</div>
<div class=”field”>
<label for=”serial-headphone-new”>Serial Number</label>
<input type=”text” id=”serial-headphone-new” name=”serial_headphone_new” placeholder=”e.g., S/N 12345″ />
</div>
</div>
<div class=”fieldset-title old-title” style=”display:none;”>Old Asset Details</div>
<div class=”details-grid old-grid” style=”display:none;”>
<div class=”field”>
<label for=”make-headphone-old”>Make(OLD)</label>
<input type=”text” id=”make-headphone-old” name=”make_headphone_old” placeholder=”e.g., Dell, HP” />
</div>
<div class=”field”>
<label for=”model-headphone-old”>Model(OLD)</label>
<input type=”text” id=”model-headphone-old” name=”model_headphone_old” placeholder=”e.g., PG0312VB” />
</div>
<div class=”field”>
<label for=”Assettag-headphone-old”>Asset Tag (OLD)</label>
<input type=”text” id=”Assettag-headphone-old” name=”Assettag_headphone_old” placeholder=”e.g., Tag 12345″ />
</div>
<div class=”field”>
<label for=”serial-headphone-old”>Serial Number(OLD)</label>
<input type=”text” id=”serial-headphone-old” name=”serial_headphone_old” placeholder=”e.g., S/N 12345″ />
</div>
</div>
</div>
</div>

<!– Keyboard –>
<div class=”asset-item”>
<input type=”checkbox” id=”asset-keyboard” name=”assets” value=”Keyboard” data-key=”keyboard” />
<label for=”asset-keyboard” class=”asset-name”>Keyboard</label>
<div class=”asset-details” id=”details-keyboard”>
<div class=”fieldset-title”>New Asset Details</div>
<div class=”details-grid”>
<div class=”field”>
<label for=”make-keyboard-new”>Make</label>
<input type=”text” id=”make-keyboard-new” name=”make_keyboard_new” placeholder=”e.g., Dell, HP” />
</div>
<div class=”field”>
<label for=”model-keyboard-new”>Model</label>
<input type=”text” id=”model-keyboard-new” name=”model_keyboard_new” placeholder=”e.g., PG0312VB” />
</div>
<div class=”field”>
<label for=”Assettag-keyboard-new”>Asset Tag</label>
<input type=”text” id=”Assettag-keyboard-new” name=”Assettag_keyboard_new” placeholder=”e.g., Tag 12345″ />
</div>
<div class=”field”>
<label for=”serial-keyboard-new”>Serial Number</label>
<input type=”text” id=”serial-keyboard-new” name=”serial_keyboard_new” placeholder=”e.g., S/N 12345″ />
</div>
</div>
<div class=”fieldset-title old-title” style=”display:none;”>Old Asset Details</div>
<div class=”details-grid old-grid” style=”display:none;”>
<div class=”field”>
<label for=”make-keyboard-old”>Make(OLD)</label>
<input type=”text” id=”make-keyboard-old” name=”make_keyboard_old” placeholder=”e.g., Dell, HP” />
</div>
<div class=”field”>
<label for=”model-keyboard-old”>Model(OLD)</label>
<input type=”text” id=”model-keyboard-old” name=”model_keyboard_old” placeholder=”e.g., PG0312VB” />
</div>
<div class=”field”>
<label for=”Assettag-keyboard-old”>Asset Tag (OLD)</label>
<input type=”text” id=”Assettag-keyboard-old” name=”Assettag_keyboard_old” placeholder=”e.g., Tag 12345″ />
</div>
<div class=”field”>
<label for=”serial-keyboard-old”>Serial Number(OLD)</label>
<input type=”text” id=”serial-keyboard-old” name=”serial_keyboard_old” placeholder=”e.g., S/N 12345″ />
</div>
</div>
</div>
</div>
<!– Mouse –>
<div class=”asset-item”>
<input type=”checkbox” id=”asset-mouse” name=”assets” value=”Mouse” data-key=”mouse” />
<label for=”asset-mouse” class=”asset-name”>Mouse</label>
<div class=”asset-details” id=”details-mouse”>
<div class=”fieldset-title”>New Asset Details</div>
<div class=”details-grid”>
<div class=”field”>
<label for=”make-mouse-new”>Make</label>
<input type=”text” id=”make-mouse-new” name=”make_mouse_new” placeholder=”e.g., Dell, HP” />
</div>
<div class=”field”>
<label for=”model-mouse-new”>Model</label>
<input type=”text” id=”model-mouse-new” name=”model_mouse_new” placeholder=”e.g., PG0312VB” />
</div>
<div class=”field”>
<label for=”Assettag-mouse-new”>Asset Tag</label>
<input type=”text” id=”Assettag-mouse-new” name=”Assettag_mouse_new” placeholder=”e.g., Tag 12345″ />
</div>
<div class=”field”>
<label for=”serial-mouse-new”>Serial Number</label>
<input type=”text” id=”serial-mouse-new” name=”serial_mouse_new” placeholder=”e.g., S/N 12345″ />
</div>
</div>
<div class=”fieldset-title old-title” style=”display:none;”>Old Asset Details</div>
<div class=”details-grid old-grid” style=”display:none;”>
<div class=”field”>
<label for=”make-mouse-old”>Make(OLD)</label>
<input type=”text” id=”make-mouse-old” name=”make_mouse_old” placeholder=”e.g., Dell, HP” />
</div>
<div class=”field”>
<label for=”model-mouse-old”>Model(OLD)</label>
<input type=”text” id=”model-mouse-old” name=”model_mouse_old” placeholder=”e.g., PG0312VB” />
</div>
<div class=”field”>
<label for=”Assettag-mouse-old”>Asset Tag (OLD)</label>
<input type=”text” id=”Assettag-mouse-old” name=”Assettag_mouse_old” placeholder=”e.g., Tag 12345″ />
</div>
<div class=”field”>
<label for=”serial-mouse-old”>Serial Number(OLD)</label>
<input type=”text” id=”serial-mouse-old” name=”serial_mouse_old” placeholder=”e.g., S/N 12345″ />
</div>
</div>
</div>
</div>

<!– Others –>
<div class=”asset-item”>
<input type=”checkbox” id=”asset-others” name=”assets” value=”Others” data-key=”others” />
<label for=”asset-others” class=”asset-name”>Others (please specify)</label>
<div class=”asset-details” id=”details-others”>
<div class=”details-grid”>
<div class=”field”>
<label for=”others-specify” class=”required”>Specify Item</label>
<input type=”text” id=”others-specify” name=”others_specify” placeholder=”e.g., USB-C cable, HDMI cable” />
</div>
</div>
<div class=”fieldset-title”>New Asset Details</div>
<div class=”details-grid”>
<div class=”field”>
<label for=”make-others-new”>Make</label>
<input type=”text” id=”make-others-new” name=”make_others_new” placeholder=”e.g., Dell, HP” />
</div>
<div class=”field”>
<label for=”model-others-new”>Model</label>
<input type=”text” id=”model-others-new” name=”model_others_new” placeholder=”e.g., PG0312VB” />
</div>
<div class=”field”>
<label for=”Assettag-others-new”>Asset Tag</label>
<input type=”text” id=”Assettag-others-new” name=”Assettag_others_new” placeholder=”e.g., Tag 12345″ />
</div>
<div class=”field”>
<label for=”serial-others-new”>Serial Number</label>
<input type=”text” id=”serial-others-new” name=”serial_others_new” placeholder=”e.g., S/N 12345″ />
</div>
</div>
<div class=”fieldset-title old-title” style=”display:none;”>Old Asset Details</div>
<div class=”details-grid old-grid” style=”display:none;”>
<div class=”field”>
<label for=”make-others-old”>Make(OLD)</label>
<input type=”text” id=”make-others-old” name=”make_others_old” placeholder=”e.g., Dell, HP” />
</div>
<div class=”field”>
<label for=”model-others-old”>Model(OLD)</label>
<input type=”text” id=”model-others-old” name=”model_others_old” placeholder=”e.g., PG0312VB” />
</div>
<div class=”field”>
<label for=”Assettag-others-old”>Asset Tag (OLD)</label>
<input type=”text” id=”Assettag-others-old” name=”Assettag_others_old” placeholder=”e.g., Tag 12345″ />
</div>
<div class=”field”>
<label for=”serial-others-old”>Serial Number(OLD)</label>
<input type=”text” id=”serial-others-old” name=”serial_others_old” placeholder=”e.g., S/N 12345″ />
</div>
</div>
</div>
</div>
</div>
<div id=”assetError” class=”error”>Please select at least one asset type.</div>
</div>
<!– Specification of devices –>
<div class=”field”>
<label for=”deviceSpecs”>Specification of devices (e.g., USB cable, wires, etc.)</label>
<textarea id=”deviceSpecs” name=”deviceSpecs” placeholder=”List any accessories or specifications here…”></textarea>
</div>
<!– Actions –>
<div class=”actions”>
<button type=”submit” class=”btn-primary”>Submit</button>
<button type=”reset” class=”btn-secondary”>Reset</button>
</div>
<!– Output preview –>
<pre id=”output” class=”output” aria-live=”polite”></pre>
</form>
</div>
</div>
<script>
// “Asset for” options based on Interaction Type
const assetForOptions = {
“Received”: [“FNF”, “WFH”, “Temp Asset”],
“Allocated”: [“New Joiner”, “WFH”, “Temp Allocation”],
“Replacement”: [“Faulty”, “Upgradation”]
};
function updateAssetForOptions(selectedType) {
const assetForSelect = document.getElementById(“assetFor”);
assetForSelect.innerHTML = ‘<option value=”” disabled selected>Select…</option>’;
(assetForOptions[selectedType] || []).forEach(opt => {
const o = document.createElement(“option”);
o.value = opt;
o.textContent = opt;
assetForSelect.appendChild(o);
});
}
// Show/hide Old details depending on Interaction Type
function toggleOldNewSections(interactionType, container) {
const showOld = interactionType === ‘Replacement’;
const oldTitle = container.querySelector(‘.old-title’);
const oldGrid = container.querySelector(‘.old-grid’);
if (oldTitle && oldGrid) {
oldTitle.style.display = showOld ? ‘block’ : ‘none’;
oldGrid.style.display = showOld ? ‘grid’ : ‘none’;
// In Replacement, old inputs required
const oldInputs = oldGrid.querySelectorAll(“input[type=’text’]”);
oldInputs.forEach(inp => inp.required = showOld);
}
// New inputs required whenever the asset is checked
const newInputs = container.querySelectorAll(“.details-grid:not(.old-grid) input[type=’text’]”);
newInputs.forEach(inp => inp.required = true);
// ‘Others’ specify required when asset checked
const specify = container.querySelector(‘#others-specify’);
if (specify) specify.required = true;
}
// Toggle per-asset details when checkbox changes
function toggleAssetDetails(checkbox, show) {
const key = checkbox.dataset.key;
const details = document.getElementById(`details-${key}`);
if (!details) return;
details.style.display = show ? “block” : “none”;
if (show) {
const interactionType = document.querySelector(‘input[name=”interactionType”]:checked’)?.value;
toggleOldNewSections(interactionType, details);
} else {
// Remove requireds when hidden
const inputs = details.querySelectorAll(“input[type=’text’]”);
inputs.forEach(inp => inp.required = false);
const specify = details.querySelector(‘#others-specify’);
if (specify) specify.required = false;
}
}
// ——– Integration settings ——–
const FLOW_URL = “Paste your Flow URL Here”; // TODO: paste your Flow HTTP POST URL
const SHARED_SECRET = “tabish-shared-key-123”; // Flow validation; remove if not used
// Build payload (corrected to match input names)
function buildPayload(form) {
const selectedAssets = Array.from(
document.querySelectorAll(‘#assetList input[type=”checkbox”][name=”assets”]:checked’)
);
const data = {
// include only if validate in Flow
secret: SHARED_SECRET,
interactionType: form.interactionType.value,
engineerName: form.engineerName.value.trim(),
ticketid: form.ticketid.value.trim(),
assetFor: form.assetFor.value || null,
date: form.date.value || null,
employee: {
name: form.empName.value.trim(),
email: form.empEmail.value.trim(),
empId: form.empid.value.trim(),
jobTitle: form.jobTitle.value.trim(),
manager: form.empmanager.value.trim()
},
assets: [],
deviceSpecs: form.deviceSpecs.value.trim()
};
selectedAssets.forEach(cb => {
const key = cb.dataset.key; // e.g., ‘laptop’, ‘monitor’, ‘cpuadaptor’
const details = document.getElementById(`details-${key}`);
// “Others” specify (only present for the Others asset type)
const specifyEl = details.querySelector(‘[name=”others_specify”]’);
const specify = specifyEl ? (specifyEl.value.trim() || “”) : “”;
// New fields (match HTML names)
const newMake = details.querySelector(`[name=”make_${key}_new”]`)?.value?.trim() || “”;
const newModel = details.querySelector(`[name=”model_${key}_new”]`)?.value?.trim() || “”;
const newAssetTag = details.querySelector(`[name=”Assettag_${key}_new”]`)?.value?.trim() || “”;
const newSerial = details.querySelector(`[name=”serial_${key}_new”]`)?.value?.trim() || “”;
// Old fields (only required for Replacement)
const oldMake = details.querySelector(`[name=”make_${key}_old”]`)?.value?.trim() || “”;
const oldModel = details.querySelector(`[name=”model_${key}_old”]`)?.value?.trim() || “”;
const oldAssetTag = details.querySelector(`[name=”Assettag_${key}_old”]`)?.value?.trim() || “”;
const oldSerial = details.querySelector(`[name=”serial_${key}_old”]`)?.value?.trim() || “”;
const assetItem = {
type: cb.value, // e.g., “Laptop”, “Monitor2”, “Docking Station”
specify, // for “Others”; empty string for other types
new: {
make: newMake,
model: newModel,
assettag: newAssetTag,
serial: newSerial
},
old: {
make: oldMake,
model: oldModel,
assettag: oldAssetTag,
serial: oldSerial
}
};
data.assets.push(assetItem);
});
return data;
}
// Init
(function init() {
// Interaction type radios
const interactionRadios = document.querySelectorAll(‘input[name=”interactionType”]’);
interactionRadios.forEach(r => {
r.addEventListener(“change”, (e) => {
updateAssetForOptions(e.target.value);
// Re-evaluate old/new sections for shown details
document.querySelectorAll(‘.asset-details’).forEach(container => {
const checkbox = container.parentElement.querySelector(‘input[type=”checkbox”]’);
if (checkbox?.checked) toggleOldNewSections(e.target.value, container);
});
});
});
// Asset checkboxes
const assetCheckboxes = document.querySelectorAll(‘#assetList input[type=”checkbox”][name=”assets”]’);
assetCheckboxes.forEach(cb => {
cb.addEventListener(“change”, () => toggleAssetDetails(cb, cb.checked));
});
// Form submission
const form = document.getElementById(“assetForm”);
const output = document.getElementById(“output”);
const assetError = document.getElementById(“assetError”);
form.addEventListener(“submit”, async (e) => {
e.preventDefault();
// At least one asset
const selectedAssets = Array.from(
document.querySelectorAll(‘#assetList input[type=”checkbox”][name=”assets”]:checked’)
);
if (selectedAssets.length === 0) {
assetError.style.display = “block”;
assetError.textContent = “Please select at least one asset type.”;
return;
} else {
assetError.style.display = “none”;
}
// Built-in validation
if (!form.checkValidity()) {
form.reportValidity();
return;
}
// Replacement: require Old & New details
const interactionType = form.interactionType.value;
if (interactionType === ‘Replacement’) {
for (const cb of selectedAssets) {
const key = cb.dataset.key;
const details = document.getElementById(`details-${key}`);
const requiredSelectors = [
`[name=”make_${key}_new”]`, `[name=”model_${key}_new”]`,
`[name=”Assettag_${key}_new”]`, `[name=”serial_${key}_new”]`,
`[name=”make_${key}_old”]`, `[name=”model_${key}_old”]`,
`[name=”Assettag_${key}_old”]`, `[name=”serial_${key}_old”]`,
];
for (const sel of requiredSelectors) {
const el = details.querySelector(sel);
if (!el?.value?.trim()) {
assetError.style.display = “block”;
assetError.textContent = `Please fill Old & New details for ${cb.value}.`;
return;
}
}
}
}
// Build payload
const data = buildPayload(form);

// POST to Flow
try {
const res = await fetch(FLOW_URL, {
method: ‘POST’,
headers: {
‘Content-Type’: ‘application/json’
},
body: JSON.stringify(data)
});
// Optional: handle JSON response
let responseBody = {};
try { responseBody = await res.json(); } catch {}
if (!res.ok) {
console.error(‘Flow error:’, res.status, responseBody);
alert(‘❌ Submission failed. Please try again or contact support.’);
return;
}
alert(‘✅ Submitted successfully.’);
form.reset();
output.style.display = “none”;
output.textContent = “”;
document.getElementById(“assetFor”).innerHTML = ‘<option value=”” disabled selected>Select…</option>’;
document.querySelectorAll(‘.asset-details’).forEach(d => d.style.display = “none”);
} catch (err) {
console.error(err);
alert(‘❌ Network error. Please check your connection or contact support.’);
}
});

// Reset
form.addEventListener(“reset”, () => {
output.style.display = “none”;
output.textContent = “”;
document.getElementById(“assetFor”).innerHTML = ‘<option value=”” disabled selected>Select…</option>’;
document.querySelectorAll(‘.asset-details’).forEach(d => d.style.display = “none”);
});
})();
</script>

</body>
</html>

Quick test checklist

Open the Excel file only in the browser (desktop Excel can lock it).
Copy the Flow URL fresh after saving the Flow.
Use your browser console or Postman to send the sample JSON—confirm you get {"status":"ok"}.
Submit from your form; verify Excel gets one row per asset.

Asset Handover form

How to Create an Asset Interaction Form with PDF Generation and Excel Integration Using Power Automate and jsPDF

1. Introduction

2. Prerequisites

Step 1: Prepare Excel Table

Step 2: Create Power Automate Flow

Trigger

Actions

Quick test checklist