Discover a Software Development Invoice Example for Customer Support

Software development invoice example for Customer Support

well hello and welcome to transform tuesday i'm dave mccormick vp of product management here at alpha software and i'm joined today by sarah mitchell head of our documentation department so today on transform tuesday i am going to take you on a little tour here of an invoicing example that we've been working on over the last couple of transform tuesdays and in the past we had been working on in a uh we just go ahead and skip down to that slide we've been working on something that looked kind of like yeah not that kind of like this the invoice generation form uh if you recall it was just a way for a person who's got transform installed on their phone to create invoices using it and the part that we had handled up until now had been just the um well two parts actually one was the building of the form and hooking up the tpl necessary to do the calculations things like that we'll go over that a little bit today but the second half of it is the ability to actually then take that information once it's been uh filled in and use it to generate a well fought film well formatted invoice like the one i see here if you take a look at the invoice that's up here on my screen see i actually had quite a lot of control when i was setting it up i got to decide who it was from what email it was coming from who it's going to then i used some templating and some html to sort of line it out like this and here is the whole thing oh it looks like i cut off the total in subtotal but don't worry i will show that to you in a moment as well so we're going to just um get started real quickly with a quick overview of what the form looks like but then we're going to really spend most of our time talking about how we generate reports like this and get them to send so let's go into let's start with the designer and we're gonna go into transform central and i'm going to go and open up my invoice generation form that we're working on here and i've been i've been through this one in in like i said in other sessions um so what we've done is it's basically it generates an invoice number for you automatically it does this uh this system that we used and there are other ways of doing it actually just uh uses this by converting the date timestamp i think to milliseconds or something like that so you'll really never have two that'll be the same but they won't be sequential either maybe what you're looking for may not be what you're looking for maybe in another session we'll talk about how you could do sequential invoice numbers if you prefer after that we go on to collecting the name address city state zip if you recall we showed how to break these up onto separate lines by doing a little bit of formatting layout formatting by putting them into a section and then setting each one of the fields to its appropriate size within that section we've covered that in another one a responsive layout session we collect the phone we collect email address and then we also of course collect the uh line items that are in the invoice and so we're we've created a fictional business called acme technologies or acme inc or something like that and what they theoretically do is uh it equipment and things like that are smart speakers and a home theater so if you take a look at the items that you can choose from in your list they're things like firewall configuration outdoor cable runs and so on so that's that's sort of the background behind this use case here so the idea is that someone uh either on site uses transform to fill in all this information in fact let me just pop over to my phone see if we can do this i'll give you an example so i'm gonna turn on screen sharing and let's see if that's gonna work or not it is gonna work terrific all right let's go to transform and here and transform and i'm going to add a blank form and i'm going to choose that invoice generation form okay so you'll see it's filled out a now a new unique number for me up here i'm going to go and enter this in as if i'm really doing an invoice let's say we're going to have it go to someone named frank jennings he is our customer and he lives at one two three main street very original and that will be let's put him in boston boston massachusetts oops i think i'd like to capitalize the a i'm being very picky here for sample date all right all right let me get um two one three four and we'll give him a phone number all right and oh we'll give him an email address too frank at example.com now that email address can be used later on by the system to automatically send a copy of the invoice to frank after this has been filled out i'm going to go ahead and now add some lines let's say uh we ran some cable inside so i'm going to say we ran i don't know 150 feet of cable and we charge a dollar a foot for running cable and there's no tax but then we decided we're going to put in a let's do a new wi-fi hotspot and just one of those and i'll make it like a mid-priced one make it 150 and is tax applicable i'm gonna say yes it is on this item and let's just add one more say we set up a smart tv for them one television and let's say the going price is fifty dollars now in other sessions i i showed how you could actually use a lookup from an onboard sql database so you might have an awful lot of products or services that you'd like to choose from and those could be stored right here on that device the other thing that you could do is um have it so that when i chose for example my smart tv setup it automatically could fill in what the price should be it might not know that the quantity that's up to me to fill that out and it could also know whether or not it was taxable or not in case i'm going to say it's not taxable so down here at the bottom we'll see that our subtotal is now 350 with 9.38 cents in taxes creating a grand total of 359.38 so what i'm going to do is i'm just going to head click save and send and i'll go ahead and do that so as this is uploading to the server great a report i'm going to go ahead and close down this screen sharing because we don't need this anymore screen mirroring and let me just pause my screen for a second while i open up my email okay close that email window and i will continue to share my screen so this is what we just created and this is what i just got in my mailbox uh 107 pm that's right now frank jennings 123 main street there's his indoor cable run hotspot smart setup quantity price extension total and all that and if we wanted to get really fancy we could have also created a hyperlink at the bottom that could have linked say to paypal or another payment type of service so that the customer or the client could just go ahead and click on it and and pay you all in one go so i think you can see that this could actually be pretty handy if you're doing invoices but you're probably wondering okay i know how to set up a transform form but how do i build that report in the background and we're going to show you that right now we're going to use alpha anywhere and most people in this call are familiar with alpha anywhere it's our low code development platform for building web and mobile applications um the alpha anywhere community edition is free of charge i know free is a great word and you can use that uh to build out your reports for transform so you don't actually have to buy alpha anywhere you can just download it onto your onto your pc so when it's downloaded and installed if you go into the tools menu and you go to transform utilities you'll see buried down here on this menu is a builder for trans form on submit events let's just open that right up okay and what we have is is this blank box what i want to do is i actually want to fetch the definitions from transform central well what does that mean let me show you i'm going to go to the home section here and you'll see here are my on submit events for my transform account and on submit event is something that fires so it could be sending a report it could be sending an email there there are a bunch of other options as well which we can go through in a second but uh in this case it's just a report this is just the list view this is the uh scary json view but basically this is actually what defines the whole report and let's transform know everything that they need to know uh to to do that so let me go back to list view everything it needs to know to send out that report okay so that's that's that so this is already here stored in my transform account so before i get started what i want to do is i want to grab that that chunk of json code and i want to bring it into alpha anywhere and i can do that simply by clicking the fetch definition from transform central where i get this dialog box prompting me for my api key as a reminder you can get your api keys right here back here on the home tab of alpha transform you can go to the get api developer key you can use one you use the one which has got the most limited scope that you need and i think in this case read data would be fine so i could click on that i could click get api key a box would open up and then i could grab that api key and use it but anyway so i did that before and i entered that in here and so i'm just going to say fetch definition and you'll see there's my report and now what i can do is i can go ahead and i can test the action let's do that and it's going to say what data in other words what form should i use i think i'd like to use one that i just filled out maybe this one here um the 12th at there we go and so we're going to click ok and i'm going to say test and now it shows me what the report should look like so how did i define that report well what i did was i clicked here add action and then i choose the report that i wanted right here or the action that i wanted right here here are the other actions i was talking about before you can send email you can call a web hook another api service for example you could send data directly into a sql database you could do sms messaging you could set values in the user fields those are top-level fields on the form and you could also dispatch and re-route the form so for example you could have it set up so that if a inspection is rejected then that form goes on to a supervisor or something like that but today we're working with reports i'm going to just click on report and i click ok i've already done that because i have one here so what i'm going to do is show you what the properties are there all right so we're going to go into edit action and the first thing we're going to use uh is we're going to grab the sample data so here's this the sample data that it's been grabbed and again i'm going to just grab a more current version of it so i'm going to say select and i'm going to grab this one okay and you're going to need some sample data in there in order to be able to create your report otherwise alpha isn't going to know what fields are available to you to put into your template okay so here's conditions if you decided that you didn't always want just to send this report there might be a condition under which you don't send the report maybe um you know if you save it but something is is wrong with the report or one of the fields is that a spec or something like that you can actually set up a javascript expression that says only send it under these under these circumstances now you don't have to fill this one out because if you don't it'll just it'll always do it that's kind of what the behavior we want this time all right so then the next thing we do is we have a whole bunch of things to fill out here and this is a little time consuming i have a feeling we're going to make this process a little easier it's not rocket science but let me show you what i mean when i want to send that email i can decide uh i first i need to first tell alpha where it's going and instead of just specifying you might think i could just type in an email address here now what you do instead is you you uh write a little piece of javascript and that javascript does nothing other than set this thing called result equal to the email that you wanted now you'll notice i have this hard-coded so these these invoices always go to me but if i wanted to i could i could put in a comma and hardcode another email address there or and this is pretty cool i could add a field which has got an a email address in it so for example i could say the email to field see what i did there so results now equals you know maybe that's your name plus and there's your client's name and that's that's what you filled out actually literally in the thing so let's test the code let's see what you would have gotten back test code and you we would have gotten back dave at alphasoftware.com comma frank example.com that's exactly what we want those would be the two email addresses that we would send it to i'm going to click cancel because i don't really have to save that change cancel x without saving changes yes great then the send from like the send to you need to set a variable called result and i have hard-coded this guides at alphasoftware.com of course you could also programmatically set who it's from here as well i don't know why you would want to do that but you could uh here's the display name which is different than the uh well that's the name that you'll see uh in your email reader so if i go back to powerpoint here and i show you this automatic message system that's the name of that's how it comes across when i get it in my in my mailbox and so that's where you set it here in an alpha again you use it using result equals notation subject same deal result equals this and again this could be dynamic you know your report for and then you could put a date or for example something like that and customize the subject line that way send format that's an interesting one um i'm choosing html and there are two types of reports that you can generate in two formats you can do html or you could do pdf and for a variety of reasons i prefer to do html so that's the one that we're going to to use uh one thing i like about it you don't need a pdf reader it shows up right directly in inline in the message message and then what some things about the size of the output because if you keep in mind uh pdf online channel it's really it's page page layout sorry a page based uh display system so here you could you would put in we have eight and a half by eleven inches for the width and stuff but again if you're just doing html you can ignore that one let's pop down a message body okay this just says yeah uh yeah your um audio video lagged out a little bit there when you were explaining the send format so if you could send people yeah that's great thank you thanks okay so can you see my screen right now yes okay great so for the send format again you're sending a variable result equals and use html for the reasons that i mentioned before it just shows up in the body it's not a separate attachment it's more convenient okay um multiple templates i'm not going to go over that spark post key this one is interesting right now i actually have filled in a spark post key for a spark post account that we have shortly it's not in there now but i'd say in the next week or so you're not gonna need to have your own spark post account to do this instead you'll be able to select or put in the word system so that uh in here and what that will do is it'll use our key so you don't actually need one we decided that that would be a nice thing to add to the transform account so we're adding that at no additional charge uh then the next thing is the template type and there are two one is custom and let me show you how you set that obviously it's a result equals thing again one equal so custom is one and the other is transform form transform form is kind of interesting i haven't played around with it very much but what it lets you do is it lets you use the format of your transform form that you designed to create or form design that you design i guess it's the technical term to actually create the output of the report but i decided in this case i really didn't want to do it that way it would look kind of i don't know weird uh so instead i decided that we're going to do customs we'll create our own template all right hopefully everyone is with me so far now we're going to actually dive into the cool part and that is the template itself so i'm going to go ahead and click on that and we get this template editor sometimes when i open it i find that my and maybe that's just my screen i find that these buttons here at the bottom are hidden keep in mind you have to be able to get to them so you make sure you move the window up because when you're done you're going to want to click ok you're not going to want to just click this red x because any changes you make will be lost all right so when i created this for the first time it gave me a really simple template and that really simple template just had us just listed out all the fields i think there were field names next to it i'm not sure but what i did instead was i went in here and i started to write my own html so i created a div and i re confined it to 650 pixels a div is like imagine like a box or an area on your screen you can spend multiple lines and you can give it sizes you can do a bunch of stuff with divs uh the reason i go with 650 is because that makes it appropriate for just about every email reader out there so you have to keep in mind screen size and an email reader isn't exactly the same as screen size when you're doing uh regular html web work so i find 600 600 is ultra safe but nowadays you can get away with 650. so then all i did was just wrote some more html you know i put in the name of the company and invoice and all that and then when i got to the point where i needed to actually display the data that's where i started to insert my fields and so for example i have one here called payee name so that right here that's that's this one here frank jennings so if i took that and i deleted it bang you'll see it frank jennings is gone so how do we put him back well what i'll do is i can just say insert field and i'm going to grab that payee name click ok bang and inserted it here into my template and as you can see here in the preview window it's there as well so let's go through a couple of the tabs then i'm going to jump back into a little bit more html and we'll see it all working together again um so if you decided to you could actually create i don't know why you'd want to use javascript especially if you're sending out an email so that may not make any sense but you might very well want to want to define your own classes and subclasses and in css i used a combination i used some of the uh some classes and some inline styles it's it's really whatever your preference is um i i tend to use a lot of inline styles because they're because they're just quick for me but you know it's not a great practice if you're doing a long web page but for a simple email i don't think it's a i don't think it makes a big deal okay so when all of that was in place i was i would click ok and i can now go ahead and preview see what it looks like and there is the example right there and in fact i can even take it a little further if i clicked okay i could say test and say test and it report was sent via email so it was sent to me via email and that's the report that i got all right so let's jump a little bit more into the html and then we've got a couple little things to go through and then we will call it good so let's close this down and edit that action i'm going to go into templates so this is the part this is another part that's a little confusing so it was easy enough to insert a field here like you know which is only going to appear once but what about these these are repeating sections so we don't know how many they're going to be maybe there's seven things on the invoice maybe there's just one so how do we get it to iterate through the loop well we do that using something called a directive and i'm going to go down here i'm going to show you how that works so right here this is just a comma but it says oh yeah sorry it's not just a comment this is something which tells it that this is the beginning of the data group and this is the end of the data group so that's the beginning and the end and what this tells alpha to do is when you come across the array in this data group you should go through and put in all this html in other words template it like this and then go back through and loop through again and loop through again and loop through again until you have gotten all of the invoice items displayed so you can do that if you wanted to insert that as this yeah that's called a it gets called a format directive nope different type of directive my bad but anyway this is when you actually when you create uh a uh report using transform um it and using alpha anywheres on submit builder it actually puts this code in for you automatically so even if i can't find it immediately here uh there there is a template syntax help though if you need it i'll open that up a little slow today it's fine um and that's that so i don't think there's anything else really tricky to do here if you want to go this is for iterating through line items you can insert fields when it's all done you can test it okay so there was there were two things that i want to go back to on the form and i wanted to show you what we did here and i'm going to go done i'm going to choose invoice generation we're going to go into the code behind our form because we had a couple of questions on that one was how did we do the sales tax and we did that using tpl we we set the sales tax amount ahead of time so unload we set tr 0 tax rate 0 equals 6.25 and then for the calculations we run a script and i've covered this one in another thing so i'm not going to go through it right now but we run a script that basically goes through all of the items and figures out uh you know how much they all cost if you were to add them together and it sets the total to it and then it rounds that number so that it's it's you know it doesn't have a million decimal places at the end um and then the last thing i want to show you because i had a question on this one too was how do i put in that that submit button at the end and the only tricky thing about it is that it's it's got kind of a name that you wouldn't expect so let me find my button here that's where would i put my butt am i on the wrong invoice no ah there it is this is exactly what i'm going to tell you okay so this button here the save and send button when you add one of these from the form control types it's important to remember that the name of this isn't button there's one called action button it's not submit or anything like that it's called change status so what you want to do is you choose the change status option and then when you choose change status you can decide what you're going to choose it to let's say it's submitted you can decide whether or not it's going to stay on the phone after it's been uploaded or should it be deleted from the phone and you have a couple other options here as well you could change the message that appears on the button this right now says close upload form but you could say close and send or something like that i don't know changed there let me just remove this because i don't want that and then one last thing to remind you of quickly whenever you do make a change you need to update here first right and save it and then in transform central i'm sorry then on the device when you're adding that let me turn screen mirroring back on all right there we go great when you add a blank form what you're going to want to do is you're going to want to click refresh from server so that it knows to get the updated form type so any changes that you make will be reflected in that all right let's shut down mirroring um so let me go through and see if we're missing anything uh let you know that um how to dynamically set the email address how to create the template we've seen um i'll let you know that there's very soon going to be a system key that you can use for spark post so you don't have to get your own account although spark post does have a free account which lets you do like 100 emails per day or something like that which might be more than sufficient if you want to use that um and talked a little bit about fetching and saving the on submit definitions and all that so i think that that's uh i think we've covered everything we want to cover let me jump down into questions and see what we've got here uh nothing here just uh some audio and video lags hopefully those have been taken care of well if you do have other questions go ahead and send them to tf service that's transform service tf service at alpha software.com a team of people here monitor that email and we are happy to get back to you with answers so thank you everyone for showing up thank you for helping me out here today sarah as always we hope to see you at our next transform tuesday take care and stay well bye-bye