Shapes , Text boxes in header and footer

Question

Shapes , Text boxes in header and footer

Abbas, Yazan [cronos] 0

Hi there,

I've developed an office add-in to get word docs out of my backend app as base64 and on my frontend app i insert this either into newly created document or the context document.

Now i'm facing a problem of getting my elements the right styles like font size and position.

For some reason doing the following first code snippet is not enough.

some text boxes in header and footer are not applying for origin styles setting.

So i tried parsing my doc using office api elements like content control etc and i got some of the elements but still some text boxes appear only as shapes in the parsed document.

Notice i also unlocked editing flag of content control elements using (cannotedit) property, but still no help in finding these boxes.

Now i figured out a solution using shapes, where i get header and footer sections and then manually also unlock editing them, then get shapes of those and of each get body and there set the font properties, as you can see in the second code snippet.

But unfortunately the shapes class API is still in preview version and also the solution only works if I access the content control elements in header and footer then shapes (which I can explain).

I will be extremely grateful for any help on this issue.ill extremely appreciate all the help of that issue

      newDocument.insertFileFromBase64(
            base64FileData,
            Word.InsertLocation.replace,
            {
              importTheme: true,
              importStyles: true,
              importParagraphSpacing: true,
              importPageColor: true,
              importChangeTrackingMode: true,
              importCommentsMode: true,
              importAutoHyphenation: true,
              importAutoSpaceLikeWord: true,
              importCustomProperties: true,
              importDifferentOddEvenPages: true,
              importCustomXmlParts: true,
            }
          );

  const contentControls = newDocument.getContentControls({
            types: [
              Word.ContentControlType.plainText,
              Word.ContentControlType.richText,
              Word.ContentControlType.checkBox,
              Word.ContentControlType.comboBox,
            ],
          });
          contentControls.load("items");
          await context.sync();

          contentControls.items.forEach((control) => {
            control.cannotDelete = false;
            control.cannotEdit = false;
          });
          await context.sync();

          console.log("Content Controls", contentControls.toJSON());

          const section1 = newDocument.sections.getFirst();
          await context.sync();
          const header = section1.getHeader(Word.HeaderFooterType.firstPage);

          const footer = section1.getFooter(Word.HeaderFooterType.firstPage);
          await context.sync();

          header.load({
            select: "shapes, text, contentControls, inlinePictures, font,",
            expand: "contentControls/items,",
          });
          await context.sync();
          footer.load({
            select: "shapes, text, contentControls, inlinePictures, font,",
            expand: "contentControls/items,",
          });
          await context.sync();
          //-------------------FShapes-----------------------
          footer.contentControls.items.forEach((control) => {
            control.cannotDelete = false;
            control.cannotEdit = false;
            control.font.size = 6;
          });

          const footerShapes = footer.shapes;
          footerShapes.load("items");
          await context.sync();
          console.log("Header Shapes", footerShapes.toJSON());
          footerShapes.items.forEach((shape, idx) => {
            if (shape.name.includes("Textfeld")) {
              shape.load("body");
              context.sync();
              shape.body.font.size = 6;
              shape.lockAspectRatio = false;
            }
          });

1 answer

Your answer

Answer 1

Issue Summary

You're inserting Word docs (as base64) into a Word context (new or existing).

Styles like font size and positioning are not correctly applied, especially in headers and footers.

Text boxes in headers/footers appear as shapes, not as content controls.

Using contentControls and cannotEdit didn’t help because text boxes inside headers/footers are being returned as shapes (not content controls).

You managed to adjust font styles by accessing Shapes in headers/footers and editing their TextFrame or body, but this relies on a preview API, which is not stable for production.

Suggested Direction

Use context.document.sections.getHeader("Primary") with shapes

Since you're already doing this, you’re on the right path. You may want to fully rely on shapes within headers/footers and not expect them to be wrapped as contentControls.

await Word.run(async (context) => {
  const sections = context.document.sections;
  context.load(sections, "items");

  await context.sync();

  const header = sections.items[0].getHeader("Primary");
  const shapes = header.shapes;
  shapes.load("items");
  await context.sync();

  shapes.items.forEach((shape) => {
    const textBody = shape.textFrame.textRange;
    textBody.font.size = 12;
    textBody.font.name = "Calibri";
    textBody.font.color = "black";
  });

  await context.sync();
});

Alternative Option: Use Open XML on Backend

If you have full control over the backend (since you're generating the base64), you could manipulate the .docx before sending it — using Open XML SDK to set exact fonts/styles, including for text boxes in headers/footers.

This way, you don’t rely on the client-side Office.js API to fix styles later.

Use Office Scripts (if Excel, Word for Web)

If your frontend supports Office Scripts (Word for Web), they provide similar access to headers/footers/shapes — and may behave more predictably than preview APIs.

Final Thoughts

Text boxes in headers/footers are shapes — not content controls — so treating them as such is correct.

Styling shapes via Office.js preview is fragile, but your current workaround is smart.

Consider handling formatting at the backend (Open XML) if API stability is crucial.

Let me know if you want help with an Open XML snippet to pre-format the file, or if you want to structure your current logic better for shape traversal. Happy to help!Hi there! Thanks for the detailed explanation — it sounds like you’ve already done a lot of great work. Based on what you shared, here’s a summary and some suggestions to move forward:

Issue Summary

You're inserting Word docs (as base64) into a Word context (new or existing).

Styles like font size and positioning are not correctly applied, especially in headers and footers.

Text boxes in headers/footers appear as shapes, not as content controls.

Using contentControls and cannotEdit didn’t help because text boxes inside headers/footers are being returned as shapes (not content controls).

You managed to adjust font styles by accessing Shapes in headers/footers and editing their TextFrame or body, but this relies on a preview API, which is not stable for production.

Suggested Direction

Use context.document.sections.getHeader("Primary") with shapes

Since you're already doing this, you’re on the right path. You may want to fully rely on shapes within headers/footers and not expect them to be wrapped as contentControls.

await Word.run(async (context) => {
  const sections = context.document.sections;
  context.load(sections, "items");

  await context.sync();

  const header = sections.items[0].getHeader("Primary");
  const shapes = header.shapes;
  shapes.load("items");
  await context.sync();

  shapes.items.forEach((shape) => {
    const textBody = shape.textFrame.textRange;
    textBody.font.size = 12;
    textBody.font.name = "Calibri";
    textBody.font.color = "black";
  });

  await context.sync();
});

Alternative Option: Use Open XML on Backend

If you have full control over the backend (since you're generating the base64), you could manipulate the .docx before sending it — using Open XML SDK to set exact fonts/styles, including for text boxes in headers/footers.

This way, you don’t rely on the client-side Office.js API to fix styles later.

Use Office Scripts (if Excel, Word for Web)

If your frontend supports Office Scripts (Word for Web), they provide similar access to headers/footers/shapes — and may behave more predictably than preview APIs.

Final Thoughts

Text boxes in headers/footers are shapes — not content controls — so treating them as such is correct.

Styling shapes via Office.js preview is fragile, but your current workaround is smart.

Consider handling formatting at the backend (Open XML) if API stability is crucial.

Let me know if you want help with an Open XML snippet to pre-format the file, or if you want to structure your current logic better for shape traversal. Happy to help!

Share via

Shapes , Text boxes in header and footer

1 answer

Your answer