Microsoft 365 Community SharePoint, 16 Feb 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Creating an Internal CV (Curriculum Vitae) with List Formatting

Description

In this 15-minute developer-focused demo, Federico Sapia shows using Microsoft Lists to track info about people and their work history. Change your thinking from a standard card to a single large CV card footprint using JSON view formatting. Microsoft Lists card elements: In place field editing, expandable editing boxes, custom hovercards and clickable attachments (automation using Power Automate). Field editing box embedded in a card thanks to inlineEditField JSON property. The template is available to you now.

This PnP Community demo is taken from the Microsoft 365 & Power Platform Development Community call recorded on February 16, 2023.

Demo Presenter
• Federico Sapia (ANPAL Servizi) | @X365Fede

Community Call Conversation
• https://aka.ms/Feb16-Demo2

Supporting materials
• Sample - Internal CV | https://github.com/pnp/List-Formatting/tree/master/view-samples/internal-cv
• chrome web store - SP Formatter | https://chrome.google.com/webstore/detail/sp-formatter/fmeihfaddhdkoogipahfcjlicglflkhg?hl=en
• Visual Studio Marketplace – SP Formatter | https://marketplace.visualstudio.com/items?itemName=s-kainet.sp-formatter#:~:text=SP%20Formatter%20VSCode%20extension%20creates,to%20browser%20with%20live%20preview.

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

A

B

My name is Federico Sapia and I work as a digital workplace specialist in a public Center company. Let's build an internal CV with the Microsoft list. Today, I would like to talk about a new solution, I created using the new Microsoft List application.

B

This solution will allow us to uncover the most advanced features of Microsoft listed to track and organize information about people in an organization through an internal CV template first I want to say: I want to say that, even though you can take it as an example and customize it based on your needs, this is not necessarily a solution for a real world production, but a demo of some Advanced Microsoft list capabilities and how they can be put together to help users work better and less time and when it comes to users.

B

Microsoft list is not just about tracking stuff like products, activities and so on, but it could be also focused on people. Therefore, it is, a solution is meant to provide HR managers and Specialists with an example of how it's possible to gather information about the employees in their work, history or a career path, along with the other markers of the crucified Solutions.

B

These solutions could be obviously third-party apps or platform as well, but the internal CB template and going to share today took inspiration from Microsoft develop since it shares part of the information structure. In other words, we can let other people know more about us what we are good at and what we are working on right now and similarly to delved.

B

We are able to add projects, skills and education history to our profile, to help others find us when they they are looking for people with a certain expertise for the more additionally info are available since Microsoft Microsoft list sample provides a point of access to both the standard, Microsoft tc5 organizational card and a link to our Yammer profile, where knowledge is shared with followers and within communities, but the proximity's result. We need a proper user interface, and here comes the logic used to build this micro list template.

B

We can display different types of information on a card, but what, if we use the discard, if, if it was a mix between a digital paper and a structure profile well, the result that we can see in this preview is a large custom card of a gallery view which allows users to fill out a form composed of multiple sections, as well as further customization option will allow to add a background image in the header too.

B

So the main question are the following: how far can we take a Microsoft list card? What are the features capabilities? We could Implement to make a large car the work as an internal curriculum beta. What are the advantages for user as well as HR in people management processes? Well, here is the good news, because everything we can see here and in a real-time demo soon is fully supported by Microsoft list Json, in other words, no workarounds, no glitches or tricks to get things done, but some Advanced and fully documented features.

B

We can find this set here.

B

So, as mentioned before, the result is an example of how you can put many Advanced features together in a tool to deal with one of the great challenges in our organization that is getting people out of a lot more about themselves than Azure active directory knows, and one of these uh Advanced features I would like to highlight today is the usage of the line edit field Json property according to Microsoft official docs, thanks to the inline editing, we can load field editors to edit field data or an item in a standard list view layout.

B

However, in this example, the Eli editing feature is widely used in a gallery view layout to allow users to edit an internal CB without the need for opening the standard writing and thus making the feeling process quicker and easier, except for the custom images and the attachments, all the editing boxes are visually embedded and are ready for use in a card and among the features I've mentioned, I would like to share a deeper look at the automation of an internal CV attachments.

B

This is an implementation that tries to get the most out of the least attachments to display them as a clickable ties, and this is possible thanks to a dedicated power automate flow in the new Json split operator, recently added my Microsoft for custom formatting in Microsoft list. In other words, each user can upload the attachments through the advanced, editing right pane, while the power automatic flow and the speed operator will execute all the required tasks to.

B

Let other people view these attachments by clicking on corresponding types displayed in the works portfolio section and now all the steps requires to create this automation Service, as well as the Json code, are Illustrated in a step-by-step tutorial available in the sample solution gallery of Microsoft adoption portal, and in addition to this, you can learn more about Json formatting thanks to Microsoft learner official Docs.

B

So this is the end of my presentation, but I would like to share um real time demo through my screen, so to play the role of an end user and here's what we get everything is uh empty now, but if we we get create a new item, just save it here is what we can see. We have an empty CV card. We can afford the customize by ending, for example, cover image. We click on edit, all, let's add a new image here.

B

Let's choose, for example this one here: okay, we cannot also add a background image and choose another one. For example, this one here- okay- and here we go- you can save this card in the everything now is updated with these custom images, but, as I said, we can use the line editing in place on this card. So we can start writing more about us. I have a text standard text, Lauren mipson. So if I put this text here, it is that this CV card will expand.

B

So the more we write, the more it will expand and we can also add more information, for example, about projects through a drop down menu.

B

We can populate here we can write any text that we want, or we can add, more entries and so on, and also this section we drop down will expand up to a certain limit of a pixel. If this limit is exceeded, um a pop-up, a custom overcard that will show us a complete overview of all the information we uh we added here.

B

The same thing is uh for the other section that reproduce the structure of Microsoft application as I say that we have a worse portfolio and the people picker to show the people we are collaborating with. For example, a current project and with the record this work, Works portfolio, section and I, would like to show you what's the magic, because there is a power, automate flow, Behind, These and ready to be trigger. So if we put the attachment, for example, I can add some attachment here from my desktop.

B

I can add that this one this one this one and this one yeah, okay, everything is saved and a power automate flow within. Some second uh uh basically will will write some information um in a specific field and the Json split operator. We do the Magic by showing all the the attachment formation through clickable tiles. I will try to doing a refresh. So, let's see- and here we go- we have our attachments as clickable ties. In fact, if I click on here, we have our portfolio completely available to other users.

B

So, as we can see in this is a basic example in the digital code is uh available in the adoption portal.

B

We have also with a specific command, for example, share button so that other people can share our professional profile, and we have also um button that points to our Yammer or Viva engage profile to get more information about house and our expertise. So basically, this is uh everything we have here and that's all for today, and thanks for watching.

C

Sorry, sorry to jump in here, um but I'm kind of curious, because I know that you you write code as well right, so you write SP effects and you're familiar with the development techniques. You state that you would not actually use this in production.

C

um Can you can it kind of evaluate a bit on what would you use and why this is magical and they're pushing the limits, but it it's? Is it low code, not really it's Json. It's complex.

B

Well, it's! uh These are uh how many uh one thousand three well.

A

B

Up a big complex, uh but um you know I think that, even though it's very long as a quarter, but it's pretty redundant because all the sections do basically the same things, so you can think about this solution as a several sections um repeated many times. So uh if you want to reproduce this template, you can add even more section. I took a inspiration from Microsoft Dell about project skill and the expertise, but obviously you can change every Everything of this code. For example, it's possible also to change these titles here.

B

There's a specific way, fully documented to change the column names and have an app an update here. So.

C

The next question is so this is list formatting, and this is Jason. Would you recommend in production I'm not sure how much experience you have on this use, this or SharePoint framework or power apps, or what would be kind of your experience on on these kind of things? Is this something what you would do for your customer using list formatting.

B

Well, I would suggest that normally well when it comes to Microsoft police, that I would suggest to start a path of digital transformation, maybe trying this option, because this Microsoft list is included in Microsoft 365 subscription. So this could be a solution that could help you uh understand what your needs are and therefore you can keep using this Microsoft Lister solution, or maybe you can know better what you need, what you, what you need more and therefore you can also choose the other third part party, apps application or paid application.

B

Obviously, but this is a a way to avoid, for example, storing a lot of PDFs or docs document in our organization and providing you with a sort of digital paper that can help you store information through fully documented features and with a free application, and it's on so it's just an option uh it could. It could be obviously used also in production or environment.

B

A bit of further setup is needed, obviously, but uh I think that it's an option to help you choose better with the more awareness of what you need, what you don't need, just that yeah.

A

Excellent I think the exciting part of this is there's a wide spectrum right. It's like! Yes, you could implement this in powerapps. You could implement this in spfx or you could implement it in this formatting or you could start a list formatting and then uh perhaps mature to more complex things that grow outside of this formatting. So great great example thank.

C

You beautiful beautiful, really great job.

A

I mean it's: it's like holy cow right. We need the sound effects for that awesome. uh Yeah, very good and and I mean, while we're looking at that to vesa's point in in uh Federico. It got to over a thousand lines of Json. That is also broken out, I'm sure, um but don't feel like that's unwieldy, I'd, put links in the chat around tools from Sergey that you could use SP formatter in vs code in a web extension for your browser.

A

So there's a lot of things that can assist you uh with being able to control all of the maybe what might feel like unwieldiness of uh Json within list formatting, so don't feel like it's. uh It's got to be that complex. It is absolutely low code uh opportunities there and to start learning with so take advantage of those and reach out. If you have any questions, uh we have an entire uh repo, dedicated list. Formatting samples and everybody likes to assist with those and there's some amazing things there.

A

So definitely don't hesitate to reach out and ask questions. Thank you.