Microsoft 365 Community Community Demos, 1 Sep 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Microsoft PowerPoint API update: Shape object

Description

In this 8-minute Developer-focused demo, Onur Onder steps delivers an overview and live demo of the new Shape APIs – insertion APIs (Geometric Shapes, Lines, Text Boxes) along with ability to manipulate properties of these objects. Some of these API’s are available now on PowerPoint Online. The APIs are to be released in Windows Desktop and MAC builds in September - October. User customized shapes may be saved and applied to master slide view. This PnP Community demo is taken from the Office Add-ins community call – August 2021, recorded on August 11, 2021.

Demo Presenter: Onur Onder, Senior Software Engineer (Microsoft)

Supporting documents:
• Sample - Adds a simple shape with some properties | https://gist.github.com/ononder/3f8986126d07a3f81d7fc36af80dbe72

Stay connected:
• Twitter https://twitter.com/microsoft365dev
• YouTube https://aka.ms/M365DevYouTube
• Blog https://aka.ms/m365pnp/community/blog

A

Good morning, everyone I'm honor from powerpoint uh team, I'm working as a software uh engineer on powerpoint api updates. Today, I'm I would like to show you some of the upcoming shape apis, that we are planning to release the dc app apis. We can start by mentioning some of the insertion apis like you, can insert geometric shapes lines and text boxes, and on top of that, you can manipulate some of the basic properties of these objects like position, size and name and afterwards, a bit of the advanced uh parameters.

A

You can continue to change the line and feel properties of these objects like color transparency, style and weight. Then I would like to mention more on the text frame and range properties like retreating, the text setting the substrings, changing font, name and size, manipulating alignment, color and style. At this point, I would like to do a live. Demo.

A

You'll see my screen. I have prepared a sample add-in here to showcase these, these apis and I'll start by maybe inserting a rounded rectangle into this slide.

A

These are the properties that will be available for for this shape that can be queried by the add-in.

A

I will go to each one of them one by one, but before that, let me also show you another case where we can insert these uh shapes and objects by using um more coordinates like uh not into the default position, and whenever I I want to add a line. It's added to discord the this like 100 by 100 position, or, I can add, a text box with a specified text as before, as in visual basic apis.

A

This is kind of the interface where I choose which shape I want to interact with, and I would like to go back to this um a middle shape here that I insert, and I want to maybe retrieve the positions and the size of that shape, maybe change that to some other location and maybe change the width and height of this shape, so that I can demonstrate more of this stuff.

A

Here is the name of the shape, let's change it to like my shape, and it should update into the selection pane as well.

A

I will try to clear the color of the shape set it to like a solid color change, the four color of this- and this accepts all the uh javascript standard, colors and html colors as well- and I will probably maybe set the transparency on this. uh Let's if we move to the line properties, for example. Currently it has a line weight of one, let's change it to 22, let's change the color to red and maybe change the dash style to dash dot dot. We can also change this line style to like something like this.

A

Maybe I also add some transparency.

A

On top of that, if you move to the text frame properties, I want to show you some text, but let's add maybe some text here, it's there, but it's in white color. So let's change the color of the text to black, maybe and it's a bit small.

A

So let's see it's, it has a like font size of 18, maybe if we set it to 46 or that should that, should that looks good enough and if you go back to text frame properties, I can set like some left margin like this, and I can see that it has been wrapping, maybe and disable word wrapping or re-enable it back.

A

If I get this back to 5 and maybe add some additional top margin there, we can manipulate those margins and let me continue by changing the vertical alignment to maybe bottom or middle or any of these combinations like centered versions.

A

We can also manipulate some of the uh sub ranges of this text as well. So if I start from character two and take three characters- and if I look at the text it's ell, I can change that part to be bold, italic.

A

Maybe change the color to something else: um the font name, there is calibri, so let's change it to comic sans ms and maybe change the font size on that also, maybe add some underline into that. With some properties, we can also change the the pair of properties like left, right and justification on this.

A

We can also add the at the bullet point to be visible or not. At this point. Another point that I want to show you here is this also expands to the shapes in the masters and layouts as well. So, for example, I have prepared a button here to create some slides for me, which has some some.

A

Some of these fancy shapes with different background colors and, for example, I want to use the main master to insert a- maybe, let's say a star into the main master in that location again, which means that all of my slides will have that shape, and I can easily ex access into that similar to what I did before. So, for example, if I change the layout of these last three slides to something else- and maybe um I I know the layouts by indexes here so I I change.

A

uh I know that layout is the first layout in the in the second line. Let me say in the list. So if I add another object there, maybe like a hexagon just underneath that star, not underneath but right of that star. I can see only those three slides have that thing and I should be able to see those same changes in my masters view, including the layout and the main master changes.

A

On top of this, let me see if I can get that object. It's a hexagon, and maybe some add some text into that, so that I can show you that we can change the text uh from the main master as well.

A

Here it is- and uh this was all that I I wanted to show you for today- for the shape apis upcoming shape apis. uh We are hoping that this will be uh in desktop windows. Desktop and mac builds for insiders around september time frame and it could be in production for in in everybody, in everybody's builds around october time frame and powerpoint online will get an update sometime in august, and that was all from my hand. So, thanks owner, that's really awesome yeah, I think yeah. Thank you very much for for listening.

A

uh If you have any questions, feel free to reach us through email or through office voice or some other channels.