Powerpoint ScriptLab Insert shape, line and text box sample does not work on web; works fine on desktop

[lynneosmith]

Using ScriptLab sample to insert shape, line and text box. If I do this on the desktop powerpoint version, it works correctly. If I do this on powerpoint on the web, the shape, line or textbox is not displayed in the slide. They are displayed in the slide thumbnails on the left. I am attaching a screenshot. Subsequently, if you try to remove the using your sample, that also won't work. When I tried to use the new (1.4) api for shapes.addTextBox in our product, I see the same behavior on the web. The textbox is visible in the preview thumbnail on the left, but does not actually show up on the slide. It works fine on desktop.

Your Environment

• Platform [PC desktop, Mac, iOS, Office on the web]: Office on the web
• Office version number: __
• Operating System: Windows
• Browser (if using Office on the web): Chrome

Expected behavior

I expect if I run the ScriptLab sample that uses addTextBox or if I use it in our product that the textbox would show in the slide, not just in the thumbnail on the left. It does not appear to really be "added" to the slide, because even the ScriptLab RemoveAll function in the same sample can't find it to remove it.

Current behavior

The text, line and shape show only in the thumbnail on the left and do not show in the slide.

Steps to reproduce

1. In Chrome, use Powerpoint on the web and use ScriptLab
2. Go to the sample, "Insert shape, line and text box"
3. Run the sample
4. Insert a textbox (you will see that it is in the thumbnail and not in the slide)
5. Click Remove All button in the sample. It will not remove the text from the thumbnail.

Link to live example(s)

1. Your ScriptLab is the live example.

Provide additional details

Context

I am trying to use the new addTextBox api that was just released with 1.4 to add a textbox to a slide. I need to be able to find it, update it and remove it. I can't do that if addTextBox is not inserting it and only putting it on the thumbnail. This functionality is imperative for our product.

Useful logs

Thank you for taking the time to report an issue. Our triage team will respond to you in less than 72 hours. Normally, response time is <10 hours Monday through Friday. We do not triage on weekends.

[lynneosmith]

Is there an update on when this will be resolved? Thank you!

[Wenjun-Gong]

Add @ononder to take a look.

[lynneosmith]

Just checking in again to see if there has been an update on this and/or if a work item has been created? AddTextBox working on web is critical for our product release. Thank you.

[ononder]

Thanks @lynneosmith, we confirmed that the issue happens in PowerPoint Online. We currently don't have a workaround to unblock you but we are working on a fix. We are sorry about the inconvenience that this is causing.

[ononder]

I would like to update with a workaround in the meantime, if we add another shape using setSelectedDataAsync and delete it, that causes an update on the slide and the missing shapes come back.

Also, another thing to note is, if the user changes the slide zoom level or resizes browser window (if slide is set for zoom to fit), the shapes also appear for other zoom levels.

Here is the code from the scriptlab example with some workaround code:

async function createHexagon() {
  // This function gets the collection of shapes on the first slide,
  // and adds a hexagon shape to the collection, while specifying its
  // location and size. Then it names the shape.
  await PowerPoint.run(async (context) => {
    const shapes = context.presentation.slides.getItemAt(0).shapes;
    const hexagon = shapes.addGeometricShape(PowerPoint.GeometricShapeType.hexagon, {
      left: 100,
      top: 100,
      height: 150,
      width: 150
    });
    hexagon.name = "Hexagon";
    Office.context.document.setSelectedDataAsync(" ");
    var shapeCount = shapes.getCount();
    await context.sync();
    shapes.getItemAt(shapeCount.value-1).delete();
    await context.sync();
  });
}

[lynneosmith]

Thank you for the work around. I tried the workaround in ScriptLab and can see the shape in the actual slide. I was able to get this to work in our product as well, but I had to add a lot of additional await context.sync() calls that are not necessary in the desktop Powerpoint client in order for it to work properly. We would still prefer the actual fix as soon as it is available since it is not ideal to have to have the additional await context.sync calls and also it is not ideal for the customers to see a blank text shape get added to the slide every time they insert text. In the meantime, we will proceed with testing with the workaround. We are still waiting on another powerpoint web fix for an issue reported in github as well.

[lynneosmith]

In further testing, I found another issue in ScriptLab even using your workaround code. We have had problems in Web powerpoint when trying to insert a shape into the slide when a shape in the slide is active. I found this issue with your work-around. Would you consider this a separate issue that I need to enter a different bug for or part of this problem?

In Powerpoint web on the first slide, the title slide, Insert a stock image... have the stock image shape active. Then run ScriptLab and run the Add text box code work around you gave me. When you press the button to add the shape that runs the workaround code, the text is inserted, but the image you had active is deleted.

[ononder]

I think setSelectedDataAsync is doing the right thing because it is actually changing the selected shape, so in that sense the workaround is not actually fully complete, but the behavior might be ok as described.

We are working on an actual fix on this, I will try to keep this thread updated as we go.

[lynneosmith]

Since your workaround is causing the problem I entered in https://github.com/OfficeDev/office-js/issues/2775, is there any estimate on when a real fix for this original issue will be ready? It's been a month since you updated it. The real fix would be such that addTextBox will add a new text shape to the slide correctly on web as it does on desktop, not to the thumbnail.

[sashakar]

@ononder Hi Onur, I am hoping to get an estimate on the fix for this issue - there has been no update from you in over two months. Unfortunately the workaround you provided did not work for us (see above comment) so we are really relying on this functionality being fixed to move forward with our development. Thank you

[lynneosmith]

I verified this is still a problem and still reproduces with Scriptlab, even with the most recent 1.5 release. There has been no developer comment in four months. Any idea when you will have a fix for this? Your Scriptlab samples on Web for insert textbox, shape etc are still not working correctly with this problem and the workaround causes other issues.

[bommas12]

We have a use case to swap images/shapes their positions and sizes too. I tried changing properties top and left, In desktop this works perfectly fine without any issue but, in ppt web the preview thumbnail is updated but the slide is not. As mentioned in above comments it is updating when change the zoom level of browser to anything other than on which it was updated. I tried the workaround mentioned in above comment to create a shape hoping it would somehow cause the slide update. But is not in our case.

    itemA.top = itemAtop;
    itemA.left = itemAleft;

    itemB.top = itemBtop;
    itemB.left = itemBleft;

    await context.sync();

How ever It works when it is done in two step process. But is causing a visible delay affecting user experience.

    itemA.top = itemAtop;
    itemA.left = itemAleft;
    await context.sync();

    itemB.top = itemBtop;
    itemB.left = itemBleft;
    await context.sync();

[lynneosmith]

@ononder The original problem that I reported with your ScriptLab sample appears to be fixed. Can you confirm? Thanks.

Here is the original problem reported: In Chrome, use Powerpoint on the web and use ScriptLab Go to the sample, "Insert shape, line and text box" Run the sample Insert a textbox (you will see that it is in the thumbnail and not in the slide) Click Remove All button in the sample. It will not remove the text from the thumbnail.