Collaborate on Custom Invoice Generator for Supervision with Ease Using airSlate SignNow

Custom invoice generator for Supervision

foreign 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 the company name and the address and 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 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 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 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 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 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 uh these are pretty straightforward components um to to understand so if you have any question please reach out to me or thank you thank you foreign