I am brand new to coding and cannot figure out why this is not working. In brief, I want to make a Word add-in where I can click a button and it will insert a sentence into the Word document at the currently selected location. I had it working but broke it when I followed a tutorial on adding a dropdown box to change what buttons were shown to click. I was generally following Microsofts tutorial HERE and THIS youtube video on the dropdown box.
I am sure this is a really novice question but any help is appreciated. Thank you!
'use strict';
(function () {
Office.onReady(function () {
// Office is ready.
$(document).ready(function () {
// The document is ready.
// Use this to check whether the API is supported in the Word client.
if (Office.context.requirements.isSetSupported('WordApi', '1.1')) {
// Do something that is only available via the new APIs.
$('#rogincorporate').click(insertRogIncorporate);
$('#supportedVersion').html('This code is using Word 2016 or later.');
}
else {
// Just letting you know that this code will not work with your version of Word.
$('#supportedVersion').html('This code requires Word 2016 or later.');
}
});
});
async function insertRogIncorporate() {
await Word.run(async (context) => {
// Create a proxy object for the document.
const thisDocument = context.document;
// Queue a command to get the current selection.
// Create a proxy range object for the selection.
const range = thisDocument.getSelection();
// Queue a command to replace the selected text.
range.insertText('"Responding Party adopts and incorporates the General Response and Objections above in response to this interrogatory as though separately set forth herein. "\n', Word.InsertLocation.replace);
// Synchronize the document state by executing the queued commands,
// and return a promise to indicate task completion.
await context.sync();
console.log('Added a incorporate text.');
})
.catch(function (error) {
console.log('Error: ' + JSON.stringify(error));
if (error instanceof OfficeExtension.Error) {
console.log('Debug info: ' + JSON.stringify(error.debugInfo));
}
});
}
})();
/* Page-specific styling */
#content-header {
background: #2a8dd4;
color: #fff;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 80px;
overflow: hidden;
}
#content-main {
background: #fff;
position: fixed;
top: 80px;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
}
.padding {
padding: 15px;
}
.hide {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>Word Add-In with Commands Sample</title>
<script src="Scripts/jquery-3.6.0.js" type="text/javascript"></script>
<script src="Scripts/MessageBanner.js" type="text/javascript"></script>
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
<!-- To enable offline debugging using a local reference to Office.js, use: -->
<!-- <script src="Scripts/Office/MicrosoftAjax.js" type="text/javascript"></script> -->
<!-- <script src="Scripts/Office/1/office.js" type="text/javascript"></script> -->
<script src="Home.js" type="text/javascript"></script>
<link href="Home.css" rel="stylesheet" type="text/css" />
<link href="../Content/Button.css" rel="stylesheet" type="text/css" />
<link href="../Content/MessageBanner.css" rel="stylesheet" type="text/css" />
<!-- For Office UI Fabric Core, go to https://aka.ms/office-ui-fabric to learn more. -->
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.0/css/fabric.min.css">
<!-- To enable the offline use of Office UI Fabric Core, use: -->
<!-- link rel="stylesheet" href="Content/fabric.min.css" -->
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
outline: none;
}
body {
font-family: 'Times New Roman', sans-serif;
}
.wrapper {
display: flex;
justify-content: center;
flex-wrap: wrap;
padding: 70px 0;
max-width: 400px;
margin: 0 auto;
}
.menu,
.content {
width: 100%;
}
select {
width: 100%;
padding: 15px;
font-size: 16px;
font-weight: 700;
font-family: 'Times New Roman', sans-serif;
border: none;
border-radius: 8px;
border: 2px solid #3f51b5;
box-shadow: 0 15px 15px #efefef;
background: #e8eaf6;
}
.padding {
justify-content: center;
}
.data {
display: none;
}
</style>
</head>
<body>
<div id="content-header">
<div class="padding">
<h1>Discovery Toolkit</h1>
</div>
</div>
<div class="wrapper">
<div class="menu">
<br />
<h2>Type of Discovery:</h2>
<br />
<select id="name">
<option value="rog">Interrogatories</option>
<option value="rfp">Requests for Production</option>
<option value="rfa">Requests for Admission</option>
</select>
<br />
<br />
</div>
<div class="content">
<div id="rog" class="data">
<h3>Interrogatory Objections</h3>
<p>Click the appropriate button to insert an objection.</p>
<br />
<button id="rogincorporate">Incorporate General Response and Objections</button>
<br /><br />
</div>
<div id="rfp" class="data">
</div>
<div id="rfa" class="data">
</div>
</div>
</div>
<div id="supportedVersion" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#name").on('change', function () {
$(".data").hide();
$("#" + $(this).val()).fadeIn(700);
}).change();
});
</script>
</body>
</html>