Documentation

Trace:

Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
visionx:invoice_application [2020/06/08 11:17]
cduncan [Changing the Invoice Screen]
visionx:invoice_application [2020/06/10 10:37] (current)
cduncan
Line 1: Line 1:
 ~~NOTRANS~~ ~~NOTRANS~~
  
-~~Title: Invoice ​application~~+~~Title: Invoice ​Application~~
 Version: 5.0 / 2019-07-01 Version: 5.0 / 2019-07-01
  
Line 227: Line 227:
 ====== Calculations in the Application ====== ====== Calculations in the Application ======
  
-As the last few steps we are going to add a "Sub Total" area under the component table. For this we have to add a "​Total"​ column to our invoice table. We already added a column in this tutorial so we are going to skip this part. As the next step we are going to add a label "Sub Total" and the new editor "​Total"​ from our table directly under the "​Amount"​ column of our component table. We remove the border of our editor in the "​Edit"​ menu to make it fit better.+For the last few stepswe are going to add a "Sub Total" area under the component table. For thiswe have to add a "​Total"​ column to our invoice table. We already added a column in this tutorialso we are going to skip this part. As the next stepwe are going to add a label "Sub Total" and the new editor "​Total"​ from our table directly under the "​Amount"​ column of our component table. We remove the border of our editor in the "​Edit"​ menu to make it fit better.
  
-As the next step we are going to make the table do the calculations when a row is changed. Select a component in our component table and press "​Create Row Value Changed"​. In the following wizard we select "​Calculate Value" specify that we want to "Write to" the invoice item amount column and add "​[Invoice Item.Quantity] * [Invoice Item.Rate]"​ as the Formula. This is done to save the amount into the invoice item row. We add another command, select "​Calculate Value" once more but "Write to" our total column in the invoice table now. The formula is "​sum([Invoice Item.Amount])"​ in this case. To add columns to our formula we can press the button (1) next to the formula field. This way you can add the columns of our tables via dropdown (2).+Next, we are going to make the table do the calculations when a row is changed. Select a component in our component table and press "​Create Row Value Changed"​. In the following wizardwe select "​Calculate Value"specify that we want to "Write to" the invoice item amount columnand add "​[Invoice Item.Quantity] * [Invoice Item.Rate]"​ as the formula. This is done to save the amount into the invoice item row. We add another command, select "​Calculate Value" once morebut "Write to" our total column in the invoice table now. The formula is "​sum([Invoice Item.Amount])"​ in this case. To add columns to our formulawe can press the button (1) next to the formula field. This way you can add the columns of our tables via dropdown (2).
  
 {{:​visionx:​invoice_application:​add-calculation-action.png?​nolink|The calculation action}} {{:​visionx:​invoice_application:​add-calculation-action.png?​nolink|The calculation action}}
  
-After that we can add items and the calculations will be done. To make sure that the values are also changed when we delete an item we have to add a "​Create After Deleted Row" event with the same commands as well. Our application should now look somewhat like this:+After thatwe can add items and the calculations will be done. To make sure that the values are also changed when we delete an itemwe have to add a "​Create After Deleted Row" event with the same commands as well. Our application should now look somewhat like this:
  
 {{:​visionx:​invoice_application:​web-preview-3.png?​nolink|The current application}} {{:​visionx:​invoice_application:​web-preview-3.png?​nolink|The current application}}
Line 239: Line 239:
 ====== Creating a Report ====== ====== Creating a Report ======
  
-The last step of our tutorial is going to be a report of our invoice. For this matter we add a "​Export Invoice"​ button under the "+ Add new item" button. This button will have the same style as the "​Add"​ button but the icon we choose will be "​download"​.+The last step of our tutorial is going to be a report of our invoice. For this matterwe add a "​Export Invoice"​ button under the "+ Add new item" button. This button will have the same style as the "​Add"​ buttonbut the icon we choose will be "​download"​.
  
-To add a report we press the "​Reports" ​Button ​on the right side of the VisionX ​Designer. In the following wizard we select ​out "​Invoice" ​Screen ​and press "​Next"​.+To add a reportwe press the "​Reports" ​button ​on the right side of the VisionX ​designer. In the following wizardwe select "​Invoice" ​screen ​and press "​Next"​.
  
 {{:​visionx:​invoice_application:​create-report-step1.png?​nolink|Create report step one}} {{:​visionx:​invoice_application:​create-report-step1.png?​nolink|Create report step one}}
Line 249: Line 249:
 {{:​visionx:​invoice_application:​create-report-step2.png?​nolink|Create report step two}} {{:​visionx:​invoice_application:​create-report-step2.png?​nolink|Create report step two}}
  
-We are going to create a "​Document"​ and it will contain "A list with detail information"​.+We are going to create a "​Document," and it will contain "A list with detail information"​.
  
 {{:​visionx:​invoice_application:​create-report-step3.png?​nolink|Create report step three}} {{:​visionx:​invoice_application:​create-report-step3.png?​nolink|Create report step three}}
  
-In the next step we select our invoice table, specify that we only want to "Show detail records only for selected master"​ and press "​Finish"​.+In the next stepwe select our invoice table, specify that we only want to "Show detail records only for selected master"​ and press "​Finish"​.
  
 {{:​visionx:​invoice_application:​create-report-step4.png?​nolink|Create report step four}} {{:​visionx:​invoice_application:​create-report-step4.png?​nolink|Create report step four}}
  
-VisionX will now create our report and asks us how we want to add the report to our application. Select "Add "Show Report"​ automatically"​ in this step and select the "​Export Invoice button"​. After pressing "​Finish"​ our report will now be available when pressing the button. If we do that this is how the report ​is looking ​now.+VisionX will now create our report and ask us how we want to add the report to our application. Select "Add "Show Report"​ automatically"​ in this step and select the "​Export Invoice button"​. After pressing "​Finish"​our report will now be available when pressing the button. If we do thatthis is how the report ​will look now.
  
 {{:​visionx:​invoice_application:​export-report-1.png?​nolink|The initial report}} {{:​visionx:​invoice_application:​export-report-1.png?​nolink|The initial report}}
Line 265: Line 265:
 {{:​visionx:​invoice_application:​report-design-1.png?​nolink|The initial template}} {{:​visionx:​invoice_application:​report-design-1.png?​nolink|The initial template}}
  
-The initial report doesn'​t really look like an invoice but you can change it with Microsoft Word/Open Office/​Libre Office. You can find additional information on how to change a report [[:​visionx:​reports|in the VisionX report documentation]]. To download and later upload an alternative template for this report you press the "​Reports"​ button on the left side of VisionX again. In the following wizard once again select our invoice screen.+The initial report doesn'​t really look like an invoicebut you can change it with Microsoft Word/Open Office/​Libre Office. You can find additional information on how to change a report [[:​visionx:​reports|in the VisionX report documentation]]. To download and later upload an alternative template for this reportyou press the "​Reports"​ button on the left side of VisionX again. In the following wizardonce again select our invoice screen.
  
 {{:​visionx:​invoice_application:​create-report-step1.png?​nolink|Change template step one}} {{:​visionx:​invoice_application:​create-report-step1.png?​nolink|Change template step one}}
  
-Select "Edit an existing report",​ select our previously created template and press "​Next"​.+Select "Edit an existing report",​ select our previously created templateand press "​Next"​.
  
 {{:​visionx:​invoice_application:​change-template-step1.png?​nolink|Change template step one}} {{:​visionx:​invoice_application:​change-template-step1.png?​nolink|Change template step one}}
  
-In the following dialog press either the "Get Template"​ button to download the template or the "​Change Template..."​ button to upload the changed template. If you decided to upload a template press "​Finish"​ and your selected template will be used for the export.+In the following dialogpress either the "Get Template"​ button to download the template or the "​Change Template..."​ button to upload the changed template. If you decided to upload a templatepress "​Finish"​ and your selected template will be used for the export.
  
 This is how the changed invoice could look like: This is how the changed invoice could look like:
Line 285: Line 285:
 You can download the changed template from [[https://​doc.sibvisions.com/​_media/​visionx/​invoice_application/​InvoiceTemplate.rtf|here]]. You can download the changed template from [[https://​doc.sibvisions.com/​_media/​visionx/​invoice_application/​InvoiceTemplate.rtf|here]].
  
-====== The finished application ​======+====== The Finished Application ​======
  
-With this done this let'​s ​look how our application ​is looking ​in a web environment. For this we once again use the "​Preview" ​Button ​in VisionX. This will start a browser window which shows our finished application:​+With this donelet'​s ​see at how our application ​looks in a web environment. For thiswe once again use the "​Preview" ​button ​in VisionX. This will start a browser window which shows our finished application:​
  
 {{:​visionx:​invoice_application:​web-preview-4.png?​nolink|The master screen}} {{:​visionx:​invoice_application:​web-preview-4.png?​nolink|The master screen}}
  
  
This website uses cookies for visitor traffic analysis. By using the website, you agree with storing the cookies on your computer.More information