Inserting watermark in Word - ms-word

Question

I would like to insert a watermark into a Word document using Office.js. I am able to insert the watermark DRAFT using the sample code from: https://github.com/OfficeDev/Word-Add-in-JS-Watermark/blob/master/WatermarksManagerWeb/Home.js. The sample code places the watermark all on pages.
I am interested in a simpler solution than the one below that places the watermark only on the first page. Thank you.
(function () {
"use strict";
var messageBanner;
// The initialize function must be run each time a new page is loaded.
Office.initialize = function (reason) {
$(document).ready(function () {
$('#createWM').click(insertWaterMark);
$('#deleteWM').click(removeWM);
$('#txtWM').val("DRAFT");
});
};
function insertWaterMark() {
Word.run(function (ctx) {
var mySections = ctx.document.sections;
ctx.load(mySections);
// ctx.document.body.insertOoxml(mywatermark, "end");
return ctx.sync().then(function () {
var myWatermark = getWM($('#txtWM').val());
var myHeader = mySections.items[0].getHeader("primary");
var myRange = myHeader.insertOoxml(myWatermark, "replace");
var myCC = myRange.insertContentControl();
myCC.title = "myTempCC";
myCC.appearance = "hidden";
return ctx.sync();
});
}).catch(function (e) {
app.showNotification(e.message, e.description);
});
}
function getWM(text) {
var mywatermark = "<?xml version=\"1.0\" standalone=\"yes\"?>\r\n<?mso-application progid=\"Word.Document\"?>\r\n<pkg:package xmlns:pkg=\"http://schemas.microsoft.com/office/2006/xmlPackage\"> ... THE REST OF THE OPENXML content for watermark ...</pkg:package>\r\n";
return (mywatermark.replace("CONFIDENTIAL", text));
}
Update: I think I have an idea how to get the watermark on the first page. I implemented the solution, but it doesn't show the watermark. Please look at my code and let me know if you see anything wrong with it.
var mySections = ctx.document.sections;
ctx.load(mySections);
return ctx.sync().then(function () {
var myWatermark = getWM("DRAFT");
var myHeader = mySections.items[0].getHeader(Word.HeaderFooterType.firstPage);
mySections.items[0].headerFooterFirstPageDifferent = true;
var myRange = myHeader.insertOoxml(myWatermark, "replace");
var myCC = myRange.insertContentControl();
myCC.title = "myTempCC";
myCC.appearance = "hidden";
return ctx.sync();

Answer 1

I looked in the documentation, here on stackoverflow, on github and in several places but I couldn't find any solution that would help me to insert a watermark in the page header.
But after a few days of difficulty, I was testing all possible methods and combinations of use until I managed to understand how to insert the watermark. And it's simpler than I thought. Too bad this isn't in Microsoft Docs.
return Word.run( (context) => {
context.document.sections.getFirst().getHeader().insertParagraph('WaterMark', Word.InsertLocation.start);
context.sync();
});

Answer 2

I figured out how to insert a real watermark into the body of a document.
private async insertWatermark(): void {
await Word.run(async (context) => {
const paragraphs = context.document.sections.getFirst().getHeader(Word.HeaderFooterType.primary).paragraphs;
paragraphs.load("$none");
await context.sync();
const newParagraph = paragraphs.getLastOrNullObject();
let contentControl = newParagraph.insertContentControl();
contentControl.insertOoxml(this.addWatermarkText("My Watermark Text"), Word.InsertLocation.end);
await context.sync();
}
private addWatermarkText(text: string = "My Watermark"): string {
const watermark: string = 'Watermark Content HERE';
return watermark.replace("WATERMARK", text);
}
Get Watermark content in this link for replace this code snippet 'Watermark Content HERE'