Office-js-docs-pr: Namespaces Changed?

[LevDev1]

I have been going through this tutorial but was hitting errors. When compared to the sample code generated by Visual Studio for a PowerPoint add-in I noticed that the namespace for some of the markup elements seems to have changed since the release of the article - removing the "Ms-" prefix seems to fix the problem and make the code work as intended.

---

Document Details

⚠ Do not edit this section. It is required for docs.microsoft.com ➟ GitHub issue linking.

• ID: 18abb533-5be7-d533-8106-c52d458ddc1d
• Version Independent ID: 6af81176-d832-d3d5-5060-5218b2ba75ac
• Content: PowerPoint add-in tutorial - Office Add-ins
• Content Source: docs/tutorials/powerpoint-tutorial.md
• Product: powerpoint
• Technology: add-ins
• GitHub Login: @o365devx
• Microsoft Alias: o365devx

[kbrandl]

@LevDev1 thanks for reporting this issue. Can you please tell me what version of Visual Studio you used to create your add-in? Also, can you please give me an example of a line of code where you removed the ms- prefix? Thanks!

(Tracked internally with 3736141)

[LevDev1]

Yes, of course – I should have included that in the original submission… I am using VS 2019 Community Edition (16.3.5) The version for the Office Dev Tools in there is 16.0.29217.00

The change in question was on the Button object in the Home.html file.

The sample has:

<button class="ms-Button ms-Button--primary" id="insert-image">
    <span class="ms-Button-icon"><i class="ms-Icon ms-Icon--plus"></i></span>
    <span class="ms-Button-label">Insert Image</span>
    <span class="ms-Button-description">Gets the photo of the day that shows on the Bing home page and adds it to the slide.</span>
</button>

but this does not render as expected and also doesn't run the code. When I change to

<button class="Button ms-Button--primary" id="insert-image">
    <span class="Button-icon"><i class="ms-Icon ms-Icon--plus"></i></span>
    <span class="Button-label">Insert Image</span>
    <span class="Button-description">Gets the photo of the day that shows on the Bing home page and adds it to the slide.</span>
</button>

it starts behaving like described in the tutorial. It also does not seem to be fully consistent as with the 2nd part of the tutorial I'm still struggling to find out which prefixes I need to remove to make it work.

Let me know if you need more detail. Thanks!

[kbrandl]

@LevDev1 thanks for the additional information; I'll look into this today. In the meantime, someone else has submitted a pull request that updates the tutorial to fix these issues: https://github.com/OfficeDev/office-js-docs-pr/pull/1391. I haven't had a chance to verify those updates yet, but if you're entirely blocked right now, it might be worth having a look at the changes that PR is recommending, and see if that gets you up and running.

[kbrandl]

@LevDev1 thanks for your patience as I've investigated this problem. Turns out that the old instructions (valid for Visual Studio 2017) did not work properly in projects created with Visual Studio 2019 -- because Office Add-ins projects created with Visual Studio 2019 no longer use Fabric _components_.

I've just submitted PR #1397 to update the PowerPoint tutorial such that the instructions work when you create the Office Add-in project using Visual Studio 2019. The live docs will be updated soon (hopefully later today), but in the meantime, you can see the updated article here via the PR itself: https://github.com/OfficeDev/office-js-docs-pr/blob/ece568eb23fc5f05c151ac56edd6bca86d0bed62/docs/tutorials/powerpoint-tutorial.md.

I'll add another comment here (and close this issue) when the live docs are updated.

[kbrandl]

Closing this issue now, as the live docs have been updated such that the instructions work with Visual Studio 2019. Please feel free to comment again here if you need further assistance with this. Thanks!

https://docs.microsoft.com/en-us/office/dev/add-ins/tutorials/powerpoint-tutorial