The below is HTML and Javascript, but I am having trouble to prompt the user to specify before sending the email and pop out the Email Specification to specify, please assist,
<!DOCTYPE html>
<html>
<head>
<title>Email Classification Prompt</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
/* Container styles */
.container {
width: 80%; /* Relative width */
max-width: 400px;
margin: 50px auto;
padding: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
text-align: center;
}
/* Heading styles */
h2 {
font-size: 2rem; /* Relative font size */
margin-bottom: 20px;
}
/* Input group styles */
.input-group {
margin-bottom: 20px;
}
/* Label styles */
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
/* Select dropdown styles */
select {
width: 100%;
padding: 0.5rem; /* Relative padding */
border: 1px solid #ccc;
border-radius: 5px;
font-size: 14px;
}
/* Button styles */
button {
display: block;
width: 100%;
padding: 1rem; /* Relative padding */
background-color: #0078d4;
color: white;
border: none;
border-radius: 5px;
font-size: 1rem; /* Relative font size */
cursor: pointer;
}
/* New styles for improved UI */
.error-message {
color: #ff0000;
margin-top: 5px;
}
</style>
<script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
</head>
<body>
<form>
<div class="container">
<h2>NMI Email Classification</h2>
<div class="input-group">
<label for="classification">Select Classification:</label>
<select id="classification" name="classification">
<option value="">Select...</option>
<option value="Classification: Confidential">Confidential</option>
<option value="Classification: Internal">Internal</option>
<option value="Classification: Public">Public</option>
</select>
</div>
<button id="ClassifyButton" type="button">Classify Email</button>
<div class="error-message" id="errorMessage"></div>
</div>
</form>
<script>
Office.onReady((info) => {
if (info.host === Office.HostType.Outlook) {
document.getElementById("ClassifyButton").onclick = ClassifyEmail;
}
});
function ClassifyEmail() {
var classification = document.getElementById("classification").value;
if (!classification) {
alert("Please select a classification before sending.");
} else {
Office.context.mailbox.item.subject.setAsync(
"[" + classification + "]",
function (asyncResult) {
if (asyncResult.status == Office.AsyncResultStatus.Failed) {
console.error(asyncResult.error.message);
}
}
);
}
}
</script>
</body>
</html>
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(128, 8%, 22%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EA%3C/text%3E%3C/svg%3E)
