Azure - how to delete table design from word document page using javascript ? Word js Add-in

MJunaid
September 28, 2023
205 views
0 votes
2 Answers

I am inserting a table design in word document last page from table html. how can I delete it
this is my code

  async function NewMap() {
      try {
          await Word.run(async (context) => {  /*--html to word- https://stackoverflow.com/q/66576869  //-- word to html--- https://wordtohtml.net/   */
              var body = context.document.body;
              var paragraphs = body.paragraphs;
              context.load(paragraphs, 'length, last');
              await context.sync();

              const lastparagrsph = paragraphs.items[paragraphs.items.length - 1]
              // var selection = context.document.getSelection();
              var htmlContent = `<h4 style='margin-top:0in;margin-right:0in;margin-bottom:12.0pt;margin-left:0in;font-size:21px;font-family:"Calibri",sans-serif;color:black;'>Map Title</h4>
       <div style = 'margin:0in;font-size:16px;font-family:"Calibri",sans-serif;color:black;border:none;border-top:solid black 1.0pt;padding:0in 0in 0in 0in;margin-left:86.0pt;margin-right:0in;' >
       <p style='margin-top:12.0pt;margin-right:0in;margin-bottom:0in;margin-left:0in;text-align:right;text-indent:0in;border:none;padding:0in;font-size:16px;font-family:"Calibri",sans-serif;color:black;font-style:italic;'>&nbsp;</p>
        </div >
      <table style="width: 100%;border: none;border-collapse:collapse;">
      <tbody>
      <tr>
      <td style="width: 0.68%;padding: 0in 5.4pt;vertical-align: top;">
          <h5 style='margin:0in;font-size:15px;font-family:"Calibri",sans-serif;color:black;'>&nbsp;</h5>
      </td>
      <td style="width: 3.04%;padding: 0in 5.4pt;vertical-align: top;">
          <p style='margin:0in;font-size:16px;font-family:"Calibri",sans-serif;color:black;'>&nbsp;</p>
      </td>
      </tr>
     </tbody>
     </table>
     <p></p>
     <div style='margin:0in;font-size:16px;font-family:"Calibri",sans-serif;color:black;border:none;border-top:solid black 1.0pt;padding:0in 0in 0in 0in;margin-left:86.0pt;margin-right:0in;'>
     <p style='margin-top:12.0pt;margin-right:0in;margin-bottom:0in;margin-left:0in;text-align:right;text-indent:0in;border:none;padding:0in;font-size:16px;font-family:"Calibri",sans-serif;color:black;font-style:italic;'>&nbsp;</p>
     </div>
     <p><br></p>`;

              // selection.insertHtml(htmlContent, 'End');
              lastparagrsph.insertHtml(htmlContent, 'End');

              await context.sync();
          });

      } catch (error) {
          console.log(error);
      }


  };

this method I am using for deleting

 async function DeleteMap() {
     try {
         await Word.run(async (context) => {
             var body = context.document.body;
             var paragraphs = body.paragraphs;
             context.load(paragraphs, 'length, last');
             await context.sync();

             const lastParagraph = paragraphs.items[paragraphs.items.length - 1];
             const range = lastParagraph.getRange();

             // Delete the range to remove the inserted HTML content
             range.delete();

             await context.sync();
         });
     } catch (error) {
         console.log(error);
     }
 }

this is deleting if any text is on then end but not deleting my inserted html I want to delete my inserted htmlContent.

Answers

Chosen as BEST ANSWER

using this my issue is solved

async function NewMap() {
    try {
        await Word.run(async (context) => {
            const body = context.document.body;

            // Insert the custom structure within a content control with a specific tag
            const contentControl = body.insertContentControl();
            contentControl.tag = "customTableControl";
            contentControl.insertHtml(
                `
                <h4 style='margin-top:0in;margin-right:0in;margin-bottom:12.0pt;margin-left:0in;font-size:21px;font-family:"Calibri",sans-serif;color:black;'>Map Title</h4>
                <div style='margin:0in;font-size:16px;font-family:"Calibri",sans-serif;color:black;border:none;border-top:solid black 1.0pt;padding:0in 0in 0in 0in;margin-left:86.0pt;margin-right:0in;'>
                    <p style='margin-top:12.0pt;margin-right:0in;margin-bottom:0in;margin-left:0in;text-align:right;text-indent:0in;border:none;padding:0in;font-size:16px;font-family:"Calibri",sans-serif;color:black;font-style:italic;'>&nbsp;</p>
                </div>
                <table style="width: 100%;border: none;border-collapse:collapse;">
                    <tbody>
                        <tr>
                            <td style="width: 0.68%;padding: 0in 5.4pt;vertical-align: top;">
                                <h5 style='margin:0in;font-size:15px;font-family:"Calibri",sans-serif;color:black;'>&nbsp;</h5>
                            </td>
                            <td style="width: 3.04%;padding: 0in 5.4pt;vertical-align: top;">
                                <p style='margin:0in;font-size:16px;font-family:"Calibri",sans-serif;color:black;'>&nbsp;</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div style='margin:0in;font-size:16px;font-family:"Calibri",sans-serif;color:black;border:none;border-top:solid black 1.0pt;padding:0in 0in 0in 0in;margin-left:86.0pt;margin-right:0in;'>
                    <p style='margin-top:12.0pt;margin-right:0in;margin-bottom:0in;margin-left:0in;text-align:right;text-indent:0in;border:none;padding:0in;font-size:16px;font-family:"Calibri",sans-serif;color:black;font-style:italic;'>&nbsp;</p>
                </div>
               <p style='margin:0in;font-size:16px;font-family:"Calibri",sans-serif;color:black;'>&nbsp;</p> `,
                Word.InsertLocation.replace
            );

            await context.sync();
        });


}catch (error) {
    console.log(error);
}

};

This is Delete Method

async function DeleteMap() {
    try {
        await Word.run(async (context) => {
            const contentControlsWithTag = context.document.contentControls.getByTag('customTableControl');

            // Queue a command to load the content controls with the specified tag
            contentControlsWithTag.load('tag');

            // Synchronize the document state by executing the queued commands
            await context.sync();

            if (contentControlsWithTag.items.length === 0) {
                  console.log('No content control found.');
            } else {
                // Delete the content control
                contentControlsWithTag.items[0].delete();

                // Synchronize the document state by executing the queued command
                await context.sync();
                  console.log('Content control deleted.');
            }
        });
    } catch (error) {
        console.log(error);
    }
}

I am adding content Control on inserting html then deleting it.

(Edit)

In your code, you have inserted multiple paragraphs with HTML content, including a table and other elements. To delete them, you should identify and delete each of these paragraphs.

Use the delete method of the Range object to remove the inserted HTML content. Check this link.

Add a unique identifier (e.g., a specific HTML comment or a placeholder) around the HTML content you want to delete. Then, you can search for that identifier within the last paragraph and remove the content accordingly.

var htmlContent = `<h4 style='margin-top:0in;margin-right:0in;margin-bottom:12.0pt;margin-left:0in;font-size:21px;font-family:"Calibri",sans-serif;color:black;'>Map Title</h4>
<!-- StartMyCustomContent -->
<div style='margin:0in;font-size:16px;font-family:"Calibri",sans-serif;color:black;border:none;border-top:solid black 1.0pt;padding:0in 0in 0in 0in;margin-left:86.0pt;margin-right:0in;'>
   <p style='margin-top:12.0pt;margin-right:0in;margin-bottom:0in;margin-left:0in;text-align:right;text-indent:0in;border:none;padding:0in;font-size:16px;font-family:"Calibri",sans-serif;color:black;font-style:italic;'>&nbsp;</p>
</div>
<table style="width: 100%;border: none;border-collapse:collapse;">
   <!-- Some table content here -->
</table>
<p></p>
<div style='margin:0in;font-size:16px;font-family:"Calibri",sans-serif;color:black;border:none;border-top:solid black 1.0pt;padding:0in 0in 0in 0in;margin-left:86.0pt;margin-right:0in;'>
   <p style='margin-top:12.0pt;margin-right:0in;margin-bottom:0in;margin-left:0in;text-align:right;text-indent:0in;border:none;padding:0in;font-size:16px;font-family:"Calibri",sans-serif;color:black;font-style:italic;'>&nbsp;</p>
</div>
<p><br></p>
<!-- EndMyCustomContent -->`;

Modify your DeleteMap function to search for and delete the content between the custom comment tags.

async function DeleteMap() {
    try {
        await Word.run(async (context) => {
            var body = context.document.body;
            var paragraphs = body.paragraphs;
            context.load(paragraphs, 'length, last');
            await context.sync();

            const lastParagraph = paragraphs.items[paragraphs.items.length - 1];

            // Retrieve the HTML content as a string
            const paragraphHtml = lastParagraph.getHtml();

            // Find the custom comment tags
            const startTag = '<!-- StartMyCustomContent -->';
            const endTag = '<!-- EndMyCustomContent -->';

            // Check if the custom tags are present
            if (paragraphHtml.indexOf(startTag) !== -1 && paragraphHtml.indexOf(endTag) !== -1) {
                // Remove the content between the custom tags
                const startIndex = paragraphHtml.indexOf(startTag);
                const endIndex = paragraphHtml.indexOf(endTag) + endTag.length;
                const newHtmlContent = paragraphHtml.substring(0, startIndex) + paragraphHtml.substring(endIndex);
                lastParagraph.insertHtml(newHtmlContent, Word.InsertLocation.replace);
            }

            await context.sync();
        });
    } catch (error) {
        console.log(error);
    }
}

Please signup or login to give your own answer.

Click here to cancel reply.

Azure – how to delete table design from word document page using javascript ? Word js Add-in

Answers