Collaborate on Software Development Invoice Example for Planning with Ease Using airSlate SignNow

Software development invoice example for Planning

hello and welcome to transform Tuesday I'm Dave McCormack VP of products and services here at alpha software and I'm pleased to be joined by Sarah Mitchell who's in charge of our documentation department today we are going to be talking about transform of course and we're here to answer your questions that you could type those questions into the questions box of the GoToWebinar control panel so this week I'm going to follow up on something that I covered a couple of weeks ago which had to do with invoicing so let me just dive right into that but before I do could I get confirmation that you can see my screen and that you can hear my voice if you can either Sarah if you're there you can turn on your mic well there we go perfect showing up the questions box thanks so much everyone I appreciate it alright let's dive down into here at the grid around slide 280 something to ad by if I think here we go so just as a quick recap of what we've covered over the last I don't know five or six weeks ago I think we started this series we were talking about we started with a question that someone had written and saying hey I I see how to use TTL the transform programming language you know client-side inside the application to do addition and subtraction on regular fields but how do i total up things in data groups so we covered that and we showed the code on how to do that and how to how to basically loop through and and add up the items in a data group to get totals and the example that we used was for an invoice so we built a really simple invoice it just basically had the clients name a date and then some spaces here for the items so we could choose the product we could choose the price quantity and then the extension was calculated by multiplying out the pronti quantity times the price and then at the very end we ended up giving a total okay so moving on we then said that's great so we figured out how to do that on the phone but what we wanted to do after we had filled out our form and actually I think I've got a picture of it here nope is we wanted to create a type of invoice and maybe have that invoice get emailed out to a customer so our plan was to use alpha transform and use the on submit events to trigger a web hook the on submit event is something that has built in to transform central and I'll show that to you in a moment but basically once a record is sent transform central gives you a handful of things that you can do with it to automatically process that record one of which is to call a whip hook and the idea was that we would call it web hook and have a really simple application running on alpha cloud that would generate an email a nicely formatted invoice and then that that same API or that same web service would then be used to send out the invoice to the customer now we went through the basically how to create a layout table report for those of us who joined us for that and we were going to go further in the process of then how to basically take that layouts table report and automatically send it as an email but it occurred to me before I showed you that there is in fact a simpler way of doing this one with fewer moving pieces and that's the one that we're going to cover today instead of having alpha cloud and a little application here wouldn't it be cool if we could just bypass alpha cloud and go directly from transform central to create our invoice email so think of it like this someone uploads a form transform central builds a nice formatted email and sends that email out to the customer okay so how do we do that so this is an example of it after it's already done look there are two different records here pseudo sorry there's a little dissonance here on this slide but basically you can enter in things on the phone and you can end up getting an email on the other side and to do that down to the next slide we're going to go into a live demo all right is um Sarah I don't know if you're there I'm Mike but is process I just want to do a quick process check make sure the screen is still coming through is excellent thanks so much all right I'm going to go into anywhere since hop over here to Windows and alpha anywhere is a companion product you can think of to transform actually transform is written there is written using alpha anywhere but you don't need alpha anywhere in order to use transform but what alpha anywhere does have are a few helper tools that make transform considerably more valuable and powerful and we're going to go take a look at one of those tools right now so here I am I've opened up alpha anywhere and I'm going to its tools menu and then and this is buried down here hundred more down here under transform utilities you're gonna find an option called builder for transform on submit events I'm going to go ahead and click that now my builder right now is empty but let me pop back to my transform central account to show you something there here in transform central I have a bunch of onsubmit actions that have been defined already I have one which sends an email anytime a form is submitted I have one which enters data into a sequel database any time a dish form is entered that's a dishwasher repair form if you're wondering what that is and then I have these two reports that I've created today and what these are are formatted HTML representations of my data that are automatically sent out so these are the things that we want to build we want to build a report right here now there are two ways of doing it there is this way the JSON view way in which if you do all of the coding that went behind it you could enter in a whole bunch of name value pairs in order to create your report but there's a much easier way to do that instead back in alpha transform I can actually fetch my definition from my transform accounts so I'm going to click fetch definition from transform account now I've already filled in my API key that's how alpha knows which account I'm supposed to pull the data out of and it also makes sure that I have the authorization to do this in the first place if you need to get an API key you just grab that here again on the Home tab of transform central and you go to get a API key now in this particular case you're going to want to use one with all scope and because we do actually need to do some reading and writing to the transform interface specifically we need to write back the settings that are required to generate that report so a read-only key isn't gonna do it the trick for it this time like it did in our previous examples so you're gonna want to get in all key ok back here I've pasted it in my Alt key and I'm gonna click fetch definition and it shows me basically what it showed me back on transform central that I have these four actions set up I have the one that sends an email for all forms this one's that enters data into a database for just the dishwasher form and these two reports that I've created today to create invoices so I'm not gonna actually go into these just yet we'll take a look at them in a minute but let's try to actually create a brand-new report right here on the fly so to do that now that I fetched my data here I'm going to now say add new action and here are the choices that I had I have sent an email and if you recall we've done sent a sequel database call a web book we've talked about that one before although I don't think I've demonstrated it but this is what we're really interested in and it's the report section here so I'm going to click on report and I'm gonna click OK and now I'm gonna say edit action because it's been created but I haven't really set it up to do anything alright and this is where things get a little bit finicky in fact we're going to be doing a little bit of JavaScript code but don't worry it's not very much JavaScript code and it's practically all copy and paste so I'm gonna take you through that right now the first thing I want to do though is I want to pull some sample data out from my transform account so that I have something that I can manipulate and play with in order to create my might report so to begin with I'm just gonna fill out this property sheet by choosing the form name so once I clicked on that smart button or ellipsis right here I'm gonna click the select button again it already has my API key filled in and here are all the forms that I have defined for the account I'm going to grab that invoice account that we worked on before all right now that that's there I can say go ahead and define it's gonna grab my sample data I think I need to click that button yeah grab sample data and it's gonna say which of my form instances do I want to use I'm going to use the second form instance the reason is back when I had this first form instance was an earlier iteration of my form it just had my name and date and stuff like that I don't think it had email oh this one does I take that back these are both from today well I guess it doesn't matter which one I choose let's choose this one which is the first one okay and so here's the data that we got back literally from transform you don't have to read through all that gobbledygook but down here is basically what we're really interested in here are the fields that were going to have access to in our report we're gonna have access to the name the email the date/time field as well as the things that fill in the invoice themselves the prices quantities extensions and the names of each product notice I called this product field one I really should have called it product name that that was bad at me if you don't change the default names you're gonna end up with things like field1 field2 field3 field 4 and it'll get confusing this is the only case so I think we'll be able to I think we'll be ok for now we're gonna click OK and I've selected my transform name and that work the first thing we're gonna do is select who we're going to send it to now you might think I'm just going to type in here and type in an email address but it's a little bit trickier than that not much instead what we're going to do is create some JavaScript that calculates what the email address is to whom it's going to be sent and the reason that we're doing it that way is because we can then use variables we don't always have to send it to the same person so in order to format that here we've given you some examples of how this might work and you'll see that you can send it to multiple people by putting a comma in between each one of these addresses so I'm going to just for now I'm going to hard-code it and then we'll go back and we'll show you how to actually I'll do both I'll hard-code it and I'll do a field as well so first I'm going to put in the insert for whoops then I do something my shinobi I did a moment and move my cursor to the very end here outside of all the comments for the real JavaScript goes and I'm going to say insert for result equals and here if I wanted to hard cut it I could just say something like dave at alpha software.com semicolon this is JavaScript okay so that's good now the other thing I could have done is I could have said that plus and then I could go take a look at my code and insert a field let's say we wanted to get the email field from the forum that's the customers email address so now I'm telling it hey you can send it to please send it to david alpha software calm as well as whatever email address is listed there in the data itself so that's all set we can click okay descendant from address again this one could be calculated I don't really see a real need to do that but instead it so I'm going to hard code this one so far result equals whoops single quote dave at alpha software calm moment and the next thing we're going to do is we're going to go to display name just hang on here one moment while i dismiss this color all right and aback things so the display name that's not the actual email address that's coming from like we had here but it's in fact what you want to have it display when it comes into their email program you know might be something like 4 equals alternated dress fox right the subject again the subject you do by setting a variable and in this case i could say your invoice is ready or something older whoops and look Donna put it in double quotes that's not right but that single quotes yeah no okay send format here we have two options we can send it as PDF where we can send it as HTML I prefer going to use HTML today which is a little bit of control for what we're doing so we're gonna save our results equals HTML code semicolon are nice I don't have to bother with PDF size message body I believe is optional because the rest of it is generated for you but this is the text that would appear above so we're gonna do that we're gonna say insert VAR and we're gonna say your invoice is below we're gonna put a break in there and a semicolon okay we can attach a file we're not gonna do that and down here for template type we're actually gonna do a custom template that means we get to define the HTML and it's actually pretty easy I'll show you how that'll work so we're gonna say results equals custom [Music] and now we are going to define that template I'm going to click here on this ellipsis button and all and you'll see that I'm now in a template editor so over here on the right it has a list of my fields that's my is this re over here on the left is the template and over here on the right is the result from that template so if you'll take a look here the first field I have is name and that's the name of the person I entered in was Tom Tuesday the other thing you might notice is there's this little greater than sign and a couple of dashes that is a mistake a bug we will fix that but you could just pull that right out just probably don't want that in your design now the next I probably want to put these on separate lines so I'm gonna put a break in between and another break in between and then another break give it a little space in fact we might do two breaks and this is all fine except it so everything is kind of squished together here so let's give a little bit of space right here in this table you sumer it says form data items that is a format directive doesn't really matter if you know what that term means but basically what it what it does is it goes through all it loops through all of the data all of the filled ones prices quantities and extensions that I've entered in this case there's two of them one for a router one for a modem and I can format it so it's the same each time I can say with equals I don't know let's go with like 100 pixels and you'll see that gave a nice amount of space there so let's do this with equals 50 pixels and I'll do the same for the next couple we'll see okay that's you know I might add a little extra space I might do left and right alignment this is all HTML so you can use HTML here wherever you like and now that it's done I can see what it looks like maybe for the total which is down here let's put in another break let's put this one in bold they keep doing that old bows and close the bolt tag okay so there we go that should be everything now I can hit preview at this point and this is what it's going to look like when it comes out but what looks I made a little mistake there yeah my address Oh actually that's from the data that's not like that's not my fault that's what I entered it in we're okay there all right so I'm going to go ahead and click OK oops there's one thing that's missing in order to do this I need to have a key at one or two service providers one it's called spark post or the other is called sends grid you could just go to spark post com to grab that key and what you're going to do is again just like the other ones var result and you're gonna put in your key number now I've already done that so I'm not going to bother here I'm going to cancel out and I'm going to show you one that I baked earlier in the meantime yeah so let's go here and we're going to test this action so this one let me edit it for you I'll show you it's basically the exact same one that we created before let me pop down to the template type to show you that whoops template not the template type and I did it similarly oh I didn't I didn't put bold though on the on the total it's maybe bold that total great and we're gonna click OK okay again and now I can test that action and I'm going to test that actually using the data that I had in there before so here we're gonna click test and what what will happen if you're successful is you'll see this it'll say report was sent via email and here's what's on the inside if you make a mistake I'm gonna tell you this right now this system is very finicky and we are going to make it smoother and more bulletproof as times go on but let me show you what happens if you make a mistake let's say I edited this action and I made just a really simple mistake my send to form for example I instead of closing with a single quote I closed it with a double quote I made a real minute actual JavaScript error that won't actually caught it right all right well I guess I have to do a harder mistake if you do a harder mistake I guess my point is you're gonna end up with a cryptic error message that says something like sub-element not found that's also the case if you've left out something that's important let's try this let me get rid of the sin too altogether for example delete that okay and if I tested that action no actually that gave us a pretty sensible error message Wow okay I'm kind of impressed absolutist oh I found that it's been a little bit more finicky than that so if you do run into some sort of weird error just go back and check your settings it may not have pointed to the right one but just go setting by setting and you should be able to find it I'm gonna go put this test action gun back in all right okay and okay so those are all in now that that's done I can now save my definition what that will do is it'll take all of this JSON that we've defined using that builder and it's going to save it back to transform central now it's there now if I go back to transform central and I go into define on submit events it is now down here in this box your invoices below we set it from automated response you see how cryptic this is you wouldn't want to mess around with us or so maybe do but it's much easier to let the builder do it so now that that's done all I need to do now is open up a form and send out a email and I think because I've been doing tests already that might already be here so hold on a moment I'm just gonna pause my screen for a second ah here we go I'm just gonna open up the one that I just got show okay so here is one that I got using different data but see it was sent at 119 p.m. that was a couple minutes ago when we were testing it and sure enough it came right in so the on submit reports definitely defining the HTML is not as easy as using a report but on the other hand it is HTML so there's a lot of standards and a lot of documentation and examples that you can use to do that so that's that do we have any questions today they're in a sending date order yeah I did notice that and my spark pony cat uses the spark post EU SMTP address will that work here I am Not sure so if you are doing it in the UK and it's not working please let us know there might be something that we'll need to adjust on our site but we're happy to make that adjustments so that it does work across internationally all right well that does it for me for today thank you very much for attending thanks for folks who stopped by answer questions and thanks for the person who kicked off this whole series asking about doing invoicing to begin with there are a few more things that I would like to cover such as properly hooking up a web hook so that I can send back a more defined type of report and we have some other topics to cover as well in the meantime if you have any questions by all means send your questions to TF service that's transformed service TF service at alpha software comm it's monitored by a team of people they'll be happy to get back to you thanks very much for joining see you next week take care and stay well bye bye