Microsoft 365 Community Community Demos, 29 Apr 2019

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Community demo - Print list items using templates with SharePoint Framework list view command set

Description

This community call demo is taken from the SharePoint Framework community call recording on 25th of April 2019. In this video, Ramin demonstrates a custom SharePoint Framework list view command set, which can be used to build print templates for printing list information in more impactful ways.

Presenter - Ramin Ahmadi (Content and Code) - @raminahmadi1986

The code sample is available from https://github.com/SharePoint/sp-dev-fx-extensions/tree/master/samples/react-command-print

Full details on the community call from https://developer.microsoft.com/en-us/sharepoint/blogs/sharepoint-framework-community-call-recording-25th-of-april-2019/

More details on the SharePoint dev community calls from http://aka.ms/sppnp.

A

Hello, my name is Raman and I'm, a senior developer at continent code and today, I'm going to show you how you can print release items in SharePoint with a custom list view command set.

A

So if you install this extension in your channel and you add it as an app in a site collection, you can go to any custom list and if you select an item, you can see this button here print and before I choose an existing template here. I want to show you how you can manage your or create your own template. If you click on these settings are going to display this panel, so you can see all the templates here and you can edit them or remove them or you can create your own template.

A

First, we need to give you the codec, with the name so I'm going to call it PMP coming into demo, and then you can just drag-and-drop your columns from the left side to the right side. If you want to categorize them, you can add sections like, for example,.

A

In one section you can change the back background, color and also the font color, and you can add this section to their leaves and then you can move them whenever you want.

A

You, you can add more section.

A

A

A

Sorry, I don't have more Syria I need to use my keypad on a laptop, and it's not working really well, okay, after that we have header and footer. For this you can use the simple mode here, so you have a basic editor here. You can use for adding your header and footer.

A

Or you can switch to advanced mode and add your custom elements. Custom HTML elements like whatever you want.

A

A

And then we have a feature here. So if you turn this on I'm going to escape all the field, all the fields that have no value so I just escaped them from the printing.

A

And after that, as you can see, all the temples are here and after Kaluza, you can select the templates here and you can get this nice UI and if you click on the print button.

A

You can see a bed around the content, we can't print it.

A

You can also edit the template, or you can remove them from here.

A

As you can see, I use the advance. What you add this image to that header, so you can basically have any HTML element on your footer or header, and this is the demo for how you can use this extension and in terms of the code. Basically, this is the extension, and this is its using react. I have different components here.

A

Basically this is the Settings panel that you can see all the templates here. You can modify it or remove or add templates from this component. This is the component for adding a new, adding or taking the templates. So if you are interested in this drag and drop release, you can just open this file and we can see all the data little is here, so it has destroyed Aragon drop features here.

A

And also this is a this is a component for is like a basic editor for a header and footer that are used for this project. So, if you add it, you can just have a pretty basic text editor and also we have a service class here for basically manage templates, adding templates, getting templates or all the stuff. We need to do with the templates and also getting their fields for each list, because you know when you want, you add where you want to drag and drop your fields.

A

You need to get a field first, so we need to ignore some of the default fields like could content type attachments these? This is a that I've done for this. We basically just ignore them when we want to display all the fields for the users, so they can further again tear up the fields, sound I, think that's it. If you have any questions.

B

That's really cool. Thank you really impressive work there, especially on the UI design, that's very slick and very polished, so great great work there great demo great to see so. Thank you very much. Thank.

A