Microsoft 365 Community SharePoint, 22 Feb 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: SP Formatter - Enhanced SharePoint List Column formatting

Description

In this 11-minute Developer-focused demo, Sergei Sergeev shows latest functionality for customizing your SharePoint Column or View Formatting JSON using full-featured editor instead of out-of-box (OOB). Recently released OOB formatting looks very similar to SP Formatter, but wait, there are differences. What’s new? Live preview, IntelliSense and tool tips for styles and icons, replaceable tokens, context aware suggestions, resizable code workspace, and VS Code Integration Mode with the SP Formatter VSCode extension. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on February 4, 2021.

Demo Presenter: Sergei Sergeev (Mastaq) |@sergeev_srg

Supporting materials:
• Extension – SP Formatter | https://chrome.google.com/webstore/detail/sp-formatter/fmeihfaddhdkoogipahfcjlicglflkhg?hl=en
• Extension - SP Formatter VSCode extension | https://marketplace.visualstudio.com/items?itemName=s-kainet.sp-formatter

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

A

Hello, everyone and uh my name is ugh I'm from belarus: minsk, I'm sharepoint and microsoft, 365, developer and consultant love development, github and all this stuff. You name it, and this demo is about sp formatter. If you don't know what is sp formatter, then at the very beginning I will show and explain what it is and how it works.

A

And then I will demonstrate some new features and improvements which were added at the end of 2020 and also you will see the difference between out of the box formatting experience, because out of the box, experience was also updated recently. So let's get started.

A

First of all, what is hpe formatter sp formatter is a google chrome and microsoft edge, chromium edge extension, so you can search and grab it from corresponding store.

A

Then you have it available on your browser and then you should click on this small icon, and if you want to use it, you should enable this extension for this particular tab. So currently, this extension is performatory enabled for this tab. Only now you should go to your column, then select format, this column, and you you see this uh little toggle here. So by clicking you can enable an enhanced version of your column formatting and what is the difference?

A

First of all, for example, you can change something here and you see that you see a live preview of what you type. It is reflected immediately in your list view, so this is sp formatter and probably you have noticed that out of the box experience here and this performatory experience, they look very similar and that's right because out of the box was updated just a few weeks ago, and currently it uses exactly the same user interface element called monaca editor, that's the same element used by visual studio code internally and it supports these highlights.

A

It supports schema, intelligence and suggestions, you can fold unfold, etc. So all this cool stuff now is out of the box, and the question is what is the difference between sp formatter, what sp formatter provides which additional functionality etc? So, let's see something I've already shown. So it's a live preview feature. So, as you type, it changes the um the presentation here then additionally, in speed, formatter mode, uh for example, if we are under the styles tag, then we have intellisense 4 styles as well, so you can type different style properties and you have suggestions.

A

You have some helper tooltips available as well. Then, if you go, if you go to icon name and then change or if you want to use another item, then again we have intellisense for icons, so we can easily switch icon and then, if we go here on the text, content for example and change it to be an expression like this, then if you type at symbol, then we have also additional intelligence or suggestions for something called replaceable.

A

For example, here I can use my login name or I can use row index so it changes dynamically and then, additionally, probably you know that you can also use field values inside your column formatting. So if you type a dollar sign, then it suggests you the list of fields available for currently selected list. So it's context aware, for example, I can type ml. Then it shows me the value for amount field. If I type let's say drinks, then it shows me the value of drinks, column.

A

Okay, then also this area, you see this area is quite small. That is why I'm in enhanced mode, you have this small icon, which uses all available space, and you still have an option to to change the width as you wish, and you have a full screen which is convenient. If you have a lot of lines in your json formatting.

A

Yeah, so that's the main differences uh between uh out of the box formatting. So here, for example, if you try to to see the suggestions for styles, you don't have anything except this content-based suggestions which is not right.

A

You don't have icon name, you don't have uh these add suggestions as well, then the last and probably the most exciting feature that was added recently is vs code integration mode and it will be useful mostly for developers or for people who have their own, who have their json formatting files under source control system, for example, git repository, because normally, if you want to change your json, then you open your json file here. Then you copy press paste here then you change something and then paste back to use your code, which is not very convenient.

A

Now you can use the escort integration model so how it works. First of all for escort you should install the esp formatter extension. So it's they have has exactly the same name. Sp formatter I have it installed.

A

Now simply open your okay. Let me actually move it like this and then this guy yeah like this, then simply open your json formatting file, right click and select start a new session sp format. Sir start a new session. Now we have in the status bar in the bottom. You see this. The mode is listening now, if you go here to our browser, so currently I am changing the flow column. Formatting. Let me move it like this.

A

If I now, if I enable enhanced formatting, then you see that it says that the s code is connected and we have this file name listed here and now you can guess what will happen next then, when I change anything in the escort, then- and all these changes are reflected immediately again in my browser.

A

Moreover, in this code, the full intellisense exactly the same level of intellisense as available here. It is also available in vs code, so I can type type add symbol and then, let's say a current web, so it displays the url I can type type um raw index etc. So we see it works and again, if I type dollar, then it inserts the placeholder for field volume.

A

Also, these things they are context aware. So if I go to another list for example, then of course the list of fields here in this suggestion will be completely different. Now, if you want to modify another column, then simply, let's say drinks, so simply open drinks, json right click, then select start a new session.

A

The previous session will be closed. Automatically, then select the right column here drinks then disable and enable it again so that it's reinitialized and now we are ready to modify our drinks json like this.

A

In order this rich intelligence to work in visual studio code, you should follow two simple rules. Now. The first rule is that your json formatting, you should delete schema property from your json formatting, because otherwise the 2d code will try to suggest you different values based on the schema property. So if you remove them, the schema will come from extension from this performative extension, and the second rule is that your file should follow some naming conventions. For example.

A

Here I have all my files using column dash format engine. Basically, you can use any of these patterns, column, dash or dot. Then formatter or just format so follow these rules.

A

Then you have full intelligence in uh vs code as well, and just a few words on how it works under the hoods under the hood visual studio code extension starts a new web server when you click start a new session which supports web sockets using circuit.io and then web web extension here tries to connect to open web server, and if it is successful, then the connect, the connection is established and then visual studio code simply transfers json to the browser.

A

So basically this is it from my site. Thank you very much.

B

This is just a super, impressive, sergey. It's it's mind-blowing what you did really really really cool stuff. uh There's! Actually microsoft should have done it. Maybe, but you kind of just brought it to a new level. So really great, awesome, stuff.