Differences

This shows you the differences between two versions of the page.

Link to this comparison view

best practices - invoice [2016/09/14 18:19]
best practices - invoice [2016/09/14 18:19] (current)
Line 1: Line 1:
 +====== How do I create an invoice? ======
 +
 +
 +===== Setting up the table =====
 +|< 100% 40% 60% >|
 +|The first step is to create the appropriate [[Table|tables]] and [[Field|fields]]. First, let’s create an Invoice table. Click the “Create a Table” tile in the toolbar, and follow the wizard. Select a name.| ​ {{:​invoice:​image001.jpg?​direct&​500|}} ​ |
 +|And an icon for the table, and create some of the fields you’ll want on the table. I’d suggest creating at least a Number field (of type [[Field Type - Autonumber|autonumber]]),​ a Total field (of type [[Field Type - Currency|currency]] and a Date field (of type [[Field Type - Date|date]]).| ​ {{:​invoice:​image002.jpg?​direct&​500|}} ​ |
 +|Next, create another [[Table|table]] for the Invoice’s line items. I called mine “Line Item”. You’ll need fields to store a description (of type [[Field Type - Long Text|long text]]), unit price (of type [[Field Type - Currency|currency]]),​ quantity (of type [[Field Type - Number|number]]) and extended price (of type [[Field Type - Currency|currency]]). You’ll also need a [[Field Type - Selection|selection]] field to pick the invoice that the line item is attached to. When creating the selection field, make sure to have the field manage the [[Relationship Table|relationship]] from the line item to the selected invoice (if no relationship yet exists, create one).| ​ {{:​invoice:​image003.jpg?​direct&​500|}} ​ |
 +|Now that we have the invoice and line item tables, and a relationship that connects them, we’re ready to get to work on the interface. We need to create a list on the invoice pages to show the related line items. Bring up the Add Invoice page, remove the invoice name, number, and total fields, then click to create a new [[Form|form]]. Choose to create a [[Form Type - List|list]],​ and on the confirmation page, be sure to disable all the [[Form Type - List#List Automation|list automation]].| ​ {{:​invoice:​image004.jpg?​direct&​500|}} ​ |
 +|Also, enable [[Form Type - List#Inline Record Add and Row Edit|inline add and edit]].| ​ {{:​invoice:​image005.jpg?​direct&​500|}} ​ |
 +
 +===== Adding Automation =====
 +|< 100% 40% 60% >|
 +|Now, let’s start to set up the automation to calculate the financial numbers for the invoice. First, we’re going to calculate extended price based on quantity and unit price. In order to do this, first, make extended price [[Field Setting - View Only|view only]] (since we’re calculating it based on other data, we don’t want people to enter their own numbers for extended price).| ​ {{:​invoice:​image006.jpg?​direct&​500|}} ​ |
 +|Now, bring up the automation for when a row is added to the list. Drag a [[Action Type - Set Field Value|set field value]] action onto the [[Field Save (automation tigger)|field save trigger]] for the unit price field.| ​ {{:​invoice:​image007.jpg?​direct&​500|}} ​ |
 +|Configure the action to set the extended price field. For the expression, use the [[Expression Builder - Arithmetic|Expression Builder arithmetic function]] to build the expression +=(${quantity} * ${unit price ([[Field Type - Number|number only]])})| ​ {{:​invoice:​image008.jpg?​direct&​500|}} ​ |
 +|::: |  {{:​invoice:​image009.jpg?​direct&​500|}} ​ |
 +|::: |  {{:​invoice:​image010.jpg?​direct&​500|}} ​ |
 +|Now, we’re going to make this automation a bit more efficient by only executing it if a value changed. Grab a [[Action Type - Field Change|field changed]] evaluation and place it just before the action you just created. Select the unit price field, and have it execute when any change happens.| ​ {{:​invoice:​image011.jpg?​direct&​500|}} ​ |
 +|Now expand the evaluation and place your previous action inside the “if true” branch.| ​ {{:​invoice:​image014.jpg?​direct&​500|}} ​ |
 +|The next step is to put the same automation on the quantity field. To reduce maintenance,​ it’s best practice to use a [[Function|function]] for this, rather than replicating the same automation again. Grab a [[Action Type - Function|function]] from the palette and place it inside the “if true” branch of the evaluation, just before the action to update extended price. Create a new function for calculating the line item extended price.| ​ {{:​invoice:​image013.jpg?​direct&​500|}} ​ |
 +|Drag your action that updated the extended price inside your new function. Now, replicate this same automation on the quantity field: add an evaluation to check if the quantity field changed, then place another function that runs the same function inside the “if true” branch of the evaluation. Your action tree for the list’s inline record add should now look like this:​| ​ {{:​invoice:​image014.jpg?​direct&​500|}} ​ |
 +|That completes the automation for calculating a line item extended price. Now let’s calculate the total price on the invoice. \\ \\ To do this, we’ll create a new function on the invoice table to calculate total price. Exit this Action Manager and bring up the actions that occur when you submit the [[Form Type - Page|page]] [[Forms|form]]. Drag a new [[Function (action type)|function action]] on the blue [[When Form Saved (automation trigger)|page save]] [[Automation Trigger|automation trigger]]. Create a new function on the invoice table for calculating the invoice total price. Inside this new function, place a new [[Action Type - Set Field Value|field save action]]. Have it set the total price field, and for the expression, choose to use the [[Expression Function - Sum|sum function]].| ​ {{:​invoice:​image015.jpg?​direct&​500|}} ​ |
 +|Inside the [[Expression Builder]] function configuration,​ choose to sum the extended price filed on the related line items.| ​ {{:​invoice:​image016.jpg?​direct&​500|}} ​ |
 +|Your action should look like this:​| ​ {{:​invoice:​image017.jpg?​direct&​500|}} ​ |
 +|Your action tree should now look like this:​| ​ {{:​invoice:​image018.jpg?​direct&​500|}} ​ |
 +|On this page, we really only care about calculating the total price when the invoice is added (since if the page doesn’t get added, the record never exists anyway). So we’re done with financial automation on this page. \\ \\ The last thing we want to do here is show the subtotal of the line items as they’re added. To do this, edit the extended price field and enable [[Field Type - Currency#​Totals in Lists|subtotaling]]. Choose to sum to 2 decimal places.| ​ {{:​invoice:​image019.jpg?​direct&​500|}} ​ |
 +|Your page should now look like this:​| ​ {{:​invoice:​image020.jpg?​direct&​500|}} ​ |
 +|One more thing before we leave: remember the number field we created on the invoice? We need to configure that field to automatically increment whenever a new invoice gets created. To do this, bring up the action manager for the page. Drag a new [[Action Type - Record Operation|operation evaluation]] onto the red [[Record Updated (automation trigger)|record updated]] [[Automation Trigger|automation trigger]].| {{:​invoice:​image021.jpg?​direct&​500|}} ​ |
 +|Choose to detect the [[Add (operation)|add]] [[Operations|operation]]. Inside the “if true” branch, drag a new field save action. Set the number field with the [[Type a Value (expression builder category)|static value]] 1 (or any other non-empty value).| ​ {{:​invoice:​image022.jpg?​direct&​500|}} ​ |
 +|Your add invoice page’s automation should now look like this:​| ​ {{:​invoice:​image023.jpg?​direct&​500|}} ​ |
 +|It’s important that all integral tables have names, so after we set the invoice number, let’s name the invoice according to its invoice number. To do this, after the evaluation to check for the [[Add Operation|add operation]],​ add another field save action. Choose to set the invoice name field. In the [[Expression Builder]], choose a [[Expression Function - Concatenate|concat)]] function. Build the parameters as shown in the screenshot.| ​ {{:​invoice:​image024.jpg?​direct&​500|}} ​ |
 +|Your automation should now look like this:​| ​ {{:​invoice:​image025.jpg?​direct&​500|}} ​ |
 +|That completes the add invoice page. |  |
 +
 +===== Creating the View Page =====
 +|< 100% 40% 60% >|
 +|Let’s now go to the view page. Click add and view.| |
 +|Remove the invoice name and number fields from the interface. Set the total field to be view-only.| ​ {{:​invoice:​image026.jpg?​direct&​500|}} ​ |
 +|::: |  {{:​invoice:​image027.jpg?​direct&​500|}} ​ |
 +|Recreate the same list you put on the add page. \\ \\ You’ll notice that the Edit button is below the list, when really it applies just to the invoice information. Let’s address this. On the [[Form Type - Page|page]] settings, under Save and Add Options, disable the [[Form Setting - Enable Page Save and Add Controls|Enable Page Save/Add Controls]] setting.| ​ {{:​invoice:​image028.jpg?​direct&​500|}} ​ |
 +|Now, edit the [[Form Type - Field Grid|field grid’s]] settings, and enable [[Form Setting - Allow Form to Be Saved Independently of the Pageindependent save controls]].| ​ {{:​invoice:​image029.jpg?​direct&​500|}} ​ |
 +|Now, click to add the existing field “Delete Line Item” ([[Permanent Field Association|attached]] to the line item table) to the [[Mass Action Buttons|mass action]] area of the list. Your page should now look like this:​| ​ {{:​invoice:​image030.jpg?​direct&​500|}} ​ |
 +|Now let’s set up the automation we need on this page. The automation to calculate line item extended prices was global to the fields, so we don’t need to replicate it. The automation to calculate the total price, though, was not. We do have to place the appropriate automation to calculate total price anytime it could potentially change. The three places on this page when total price could potentially change are: when a line item is added, when a line item is edited, and when a line item is deleted. We need to execute the function to recalculate the total price in each of those places. We’ll start with when a row is added. Bring up the automation for the inline add row of the list. Drop a [[Function (action type)|function action]] on the blue drop point for when the [[When Row is Added (automation trigger)|row is added]]. The default context here is the row that we’re adding, so we need to change the context to the invoice. Use the [[Page Record (query starting point)|record from the page]] [[Query Starting Point|query starting point]] (this will be the invoice record). Now select the function you previously built to calculate the invoice’s total.| ​ {{:​invoice:​image031.jpg?​direct&​500|}} ​ |
 +|::: |  {{:​invoice:​image032.jpg?​direct&​500|}} ​ |
 +|Similarly, go to the automation for [[When Row is Edited (automation trigger)|when a row is edited]] and add the same function call there.| ​ {{:​invoice:​image033.jpg?​direct&​500|}} ​ |
 +|Now, bring up the automation for the delete button you put in the list. Add a [[Function (action type)|function action]] to recalculate the invoice total there as well. Make sure you place the action after the action that deletes the selected line items.| ​ {{:​invoice:​image034.jpg?​direct&​500|}} ​ |
 +|This completes the basics of setting up an invoice table.| ​ {{:​invoice:​image035.jpg?​direct&​500|}} ​ |
 +|Now, let’s make a button to print the invoice to a PDF. First, make a new [[WorkXpress Link (field type)|WorkXpress link]] field in the header of the [[Page (form type)|page]]. Choose image only and select the printer icon. Bring up the [[Tooltip (field feature)|tooltip]] setting, and type in “Print Invoice”.| ​ {{:​invoice:​image036.jpg?​direct&​500|}} ​ |
 +|::: |  {{:​invoice:​image037.jpg?​direct&​500|}} ​ |
 +
 +===== Creating a Report =====
 +
 +|< 100% 40% 60% >|
 +|The next part is to create a [[Report|report]] to generate the invoice document you wish to print. Get to the add report page. Make sure to choose yes for the [[Application Role|application role]].| ​ {{:​invoice:​image038.jpg?​direct&​500|}} ​ |
 +|For the report’s query, choose to start from a [[Future Record (query starting point)|future record]] of type invoice.| ​ {{:​invoice:​image039.jpg?​direct&​500|}} ​ |
 +|Now, build the content that you want your report to have. If you’re good with HTML, you can use the HTML builder to build your own custom HTML. This file contains a good starting point for this HTML.**INSERT TEXT FILE** If you’re not as skilled in HTML, you can use the rich text controls to build your content.| ​ {{:​invoice:​image040.jpg?​direct&​500|}} ​ |
 +|Now, place your cursor wherever you want the line items to appear and click the green plus icon to create a new [[Subreport|subreport]].| ​ {{:​invoice:​image041.jpg?​direct&​500|}} ​ |
 +|In the [[Subreport|subreport]],​ choose a [[Future Record (query starting point)|future]] invoice for your [[Query Starting Point|query starting point]]. From that starting point, navigate across the relationship you previously built to the line item table. Select the data you wish to display, and save your query.| ​ {{:​invoice:​image042.jpg?​direct&​500|}} ​ |
 +|For the content, if you’re using the provided HTML, here’s a good starting point for the line item HTML:​(insert .txt file) \\ \\ Save your report.| |
 +
 +
 +
 +
 +
 +
 +
 +
 +
  
best practices - invoice.txt · Last modified: 2016/09/14 18:19 (external edit)
Copyright WorkXpress, 2024