Microsoft 365 Community SharePoint, 22 Sep 2023

Previous Meeting

Next Meeting

⏯

youtube image

►

From YouTube: Building Invoice Generator solution using SPFx with automatic file creation

Description

📺 In this 13 minute developer focused demo, Rishabh shows us his Invoice Generator Web Part he built using PnP JS. It uses Fluent UI and consumes data from a SharePoint list and allows users to create invoices for different clients, manages the calculation, generates PDF versions from the invoices and is fuilly customizable. Rishabh provides a comprehensive code walkthrough and demos the rich features of this SharePoint Web Part.

This demo is taken from the Viva Connections and SharePoint Framework community call 10th of August 2023. Join the next call! Download recurrent invite from https://aka.ms/community/calls

✨ Presenter
Rishabh Shukla (Marsh McLennan)

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

Sharing is caring! You are awesome! 🧡

A

A

Based in Canada working as a M365, developer and consultant, you can reach me at my LinkedIn uh handle um it's I'm sharing right now,.

A

So uh why I developed this application? So uh obviously I wanted to be part of this awesome community. So I wanted to put my sample in there and notice that it's a huge list. So obviously you have to come up with something which is not there and kind of still kind of you know using the same um uh Technologies and options available to develop spfx web part, so this invoice generator is, um is gonna help user to create invoices.

A

This is still a very basic invoice generator part, but it gives the option to select different clients and customer. It gives the option to add the items within the app. So it's uh it's it's something which dynamically you can just add, keep adding the items uh and and then based on the tags which you have you can set from the web part property.

A

um It will add that percentage and eventually we I I, try to include the pdf version as well, because people prefer to send the PDF uh version um uh through emails and also uh the reason why I kind of also felt this could be a option which we should have is I I noticed still, people use, Excel or or kind of Outlook within Outlook table format to generate the invoice.

A

So, like I said it allows user to create different voices. um It gives the option to um add the items using add button, calculate sub total tags and total amount. uh It gives the option to generate PDF uh and I'm I'm using react, PDF uh package to generate that and- and it gives the option to add the customer or client through a SharePoint list.

A

um Also I wanted to really use pnpgs because it's just there are different ways to connect, but uh as a developer, I go on to these samples and sometimes look for things like how to create a pdf version of something and and or how to connect a SharePoint list or Library. So it's just um it's not like. Maybe you might not use invoice generator as an app, but it could be like we can use for different options.

A

That's how I go to different sample and look for sample code which which I use for for different applications, so I'm gonna jump been to the application demo as well and eventually into the viewers code as well. So here this is how the application looks. You can see on the top there's a drop down so right now, I'm um I have a couple of uh customers already added in SharePoint list and using the drop down is just adding those uh customer name at build to uh location again.

A

This is all I came up with all the requirements. uh The requirements could be different and based on that, you can always update this application uh and- and your company name is something which, like you are from you work for that company. So you can update that through webpart properties, because uh your company will not change uh usually, so you can just update once and it will always pop up there, but with the drop down you can keep changing your customer name. uh Invoice number is something which is incremental uh amount.

A

uh Will be will be updated based on the item you keep adding to to the invoice, and then tax is something which also I placed in web properties, because it's once it's set, it's not gonna change, but if you're working for different com um companies in different uh um geolocation for different countries, then you can always go and change in the web part properties for the taxes and at the bottom we have a download invoice uh button, which is uh which is something.

A

This is how it looks once we download the pdf version and- and uh it's nothing- just uh kind of I have created a component uh specifically for this um and um using using react. Pdf uh package, which kind of helped me to get this version. Pdf version.

A

So if I go to the demo, this is something I have already um configured, but I'll also cover quickly how we can configure the application.

A

So right now, I have two companies here and these these two companies are coming from this list, so I have Microsoft and the location and- and let's switch a point and the location here and that's how we can see that there are two um somebody showing up in this drop down um if I go to uh web part properties, like I, said: there's invoice list, I have the option to pick the logo, so ended up picking up a stock image here and then, if you don't have a list uh already configured um that gives you the option to create a new list.

A

What it does it just create these um columns for you, it will be empty. Obviously, so we have to go and fill up these uh items and then this is where we, whatever we type. So if I just say um my company, obviously things will change. So this is where you can put your company and your address I'm in Toronto, so there's 13, so we can make changes to 15 and things will get updated.

A

um So, like I said, we can update the items here. Oh I'm, just coming up with some random tasks. So if I it took me like 20 hours, for example, and I'm charging 150 bucks per hour, that's gonna be added in in the item and and then I'll add another item.

A

And- and you can see that things will get updated like I said, uh based on what percentage you select and when I generate the PDF, it generates this and downloads a file, and this is how it looks. uh Things can get better, because this was Sample. So still they are uh yeah. You know we can. We can make this more better in terms of look and feel um now, if I jump into uh to the code, um so first I'll start with uh the web part PS file.

A

So this is where I have the controls um and uh I'm I'm using uh property control. So we we have this speaker where we can select the logo. So if I jump back to to this application again, this is where this logo part comes in, so I can just select any any lower any image, and this will change right. So this is this.

A

Is that uh that control is doing and and then we have uh toggle- and this is where I'm kind of capturing the creation of a list which I'm gonna show just after this, um and this is where I'm getting all the list from that particular site where you are in so um obviously we we are targeting to invoice list and uh that's that's it um quickly.

A

I'll go to invoice service, so this is where I'm kind of this is for specifically for the drop down so I'm getting get invoice, there's a method which kind of getting that uh drop down working. Then we have this create list uh uh method which is nothing but uh generating that uh list for you. If you don't have that list and and this get list is actually uh to check, if that list is there or not um again, at least if it's?

A

If the list is existing, it won't create the same list again with the same name. So this is pretty basic service here, um um I'll switch back to um to the to the start of the application. So once you add, it will give you this placeholder, where you kind of configure the web part, um because this this particular site HR live, doesn't have any invoice list. So I'll just create one list here and I'll call it invoices and once the experience we can make it better.

A

Obviously, right now, um I haven't worked on that part, but here you can see, the list is created with those columns and I can just add a.

A

The company name and the address and.

A

Save this record and when I add this list here uh it starts popping up and obviously we have. We have the option to add the at the logo. So I'll just quickly add that and, um as you type your company name, um it will start placing as well. If you need that.

A

um And then this is where you kind of set the percentage, um also it's kind of getting the theme of what the current web uh theme of your current site collection, so or which you're using in that particular site collection, so now, which this is something I already covered, but just to show again and uh it will generate the uh the PDF for you.

A

uh So I have uh categorized into uh four components um first uh after the web part where we kind of create this invoice generator. So this is where um uh I'm I'm talking to the service, um getting the get invoice uh uh method uh to to get the invoices.

A

um Also, these are the these are the methods which I have used to calculate the tax um or or deleting the item all that which, which you you can see here. So we can delete the item as well, and uh this is the PDF generation uh method, where I'm using this PDF uh generator component, which is nothing but I'm using like I, said I'm using uh react, PDF package and there is a there's- a CSS file means. Obviously we have to design how it should look.

A

We create a document component and then kind of pretty much design our invoices. um Also, if I go further down, you can see. This is the placeholder where I I started out the application then checking. If there are items and then the the app loads up, we start with a drop down. It is this invoice header. So this is. This part, is part of invoice. Header. Add item is another uh component which I have uh separated out.

A

Then we have the lower part where I'm kind of calculating all the of the stacks and subtotal in total, and then the fourth component is for specifically for download invoice PDF. Oh, so that's how I have categorized it. um It's pretty basic in terms of what I'm doing here um and then I have added some basic validation. If you don't have any item, it doesn't let you uh generate the the PDF, so it kind of says Please. Add the item to your Universe before generating a PDF, so I think that's it.

A

uh These are pretty straightforward components um to to understand. So, if you have any question, please reach out to me or.

A

Thank you. Thank you, foreign.