Trace:
Differences
This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision Next revision Both sides next revision | ||
visionx:invoice_application [2020/06/08 11:10] cduncan [Adding Articles (Master Data/Popup)] |
visionx:invoice_application [2020/06/08 11:20] cduncan [Calculations in the Application] |
||
---|---|---|---|
Line 143: | Line 143: | ||
===== Adding/Deleting Invoices ===== | ===== Adding/Deleting Invoices ===== | ||
- | The "Insert" and the "Delete" button from our "Web Elements" already have all the required actions to add and delete a new invoice so we dont have to change anything here. | + | The "Insert" and the "Delete" button from our "Web Elements" already have all the required actions to add and delete a new invoice, so we don't need to change anything here. |
===== Adding/Deleting Invoice Items ===== | ===== Adding/Deleting Invoice Items ===== | ||
Line 187: | Line 187: | ||
===== Changing the Application Style ===== | ===== Changing the Application Style ===== | ||
- | Without any additional styling done this is what the application looks right now in the web preview. | + | Without any additional styling done, this is what the application looks right now in the web preview. |
{{:visionx:invoice_application:web-preview-1.png?nolink|The current application}} | {{:visionx:invoice_application:web-preview-1.png?nolink|The current application}} | ||
- | Not the prettiest application yet but with a few tweaks we can change that pretty fast. As the first step lets change the display mode and theme for our web application. For this we select the Dropdown next to "Settings" in the right VisionX Toolbar and press "Web" (1). | + | Not the prettiest application yet but, with a few tweaks, we can change that pretty fast. As the first step, let's change the display mode and theme for our web application. For this, we select the dropdown next to "Settings" in the right VisionX toolbar and press "Web" (1). |
{{:visionx:invoice_application:open-web-settings.png?nolink|Opening the Web Settings}} | {{:visionx:invoice_application:open-web-settings.png?nolink|Opening the Web Settings}} | ||
- | In the following wizard change the "Display mode" to "Corporation" (1) and the "Theme" to "Valo" (2). | + | In the following wizard, change the "Display mode" to "Corporation" (1) and the "Theme" to "Valo" (2). |
{{:visionx:invoice_application:set-web-design.png?nolink|Change Web Design}} | {{:visionx:invoice_application:set-web-design.png?nolink|Change Web Design}} | ||
- | This is how our Screen looks with the Valo-Theme now: | + | This is how our screen looks with the Valo theme now: |
{{:visionx:invoice_application:layout-valo.png?nolink|Application in valo theme}} | {{:visionx:invoice_application:layout-valo.png?nolink|Application in valo theme}} | ||
Line 205: | Line 205: | ||
===== Changing the Invoice Screen ===== | ===== Changing the Invoice Screen ===== | ||
- | As the next step we are going to style our buttons. Starting off with the "Insert" and "Delete" buttons above our invoice table. To do that we press the "Edit" button (1) on our button and set the foreground color to white (2) and the background color to a nice blue (2) for the "Add" button and red for the "Delete" button. Additionally we are going to turn off the border of our button (3). We're also going to change the text from "Insert" to "Add" | + | As the next step, we are going to style our buttons beginning with the "Insert" and "Delete" buttons above our invoice table. To do that, we press the "Edit" button (1) on our button and set the foreground color to white (2), the background color to a nice blue (2) for the "Add" button, and red for the "Delete" button. Additionally, we are going to turn off the border of our button (3). We're also going to change the text from "Insert" to "Add". |
{{:visionx:invoice_application:style-button.png?nolink|Styling the buttons}} | {{:visionx:invoice_application:style-button.png?nolink|Styling the buttons}} | ||
- | The "Add Article" and "Add new item" buttons are getting a new style as well. Press the "Edit" button (1), uncheck "Show border" (2) and check "Border on Mouseover" (2). Additionally we set the foreground color to the same color of our "Add" button (3) and the background to transparent (3). | + | The "Add Article" and "Add new item" buttons are getting a new style as well. Press the "Edit" button (1), uncheck "Show border" (2), and check "Border on Mouseover" (2). Additionally, we set the foreground color to the same color as our "Add" button (3) and the background to transparent (3). |
{{:visionx:invoice_application:style-button-add.png?nolink|Styling the add buttons}} | {{:visionx:invoice_application:style-button-add.png?nolink|Styling the add buttons}} | ||
- | Now we style the "Delete" button of the component table. We remove the text altogether (1) and set the foreground to the same red we used at the "Delete" Button (2). Uncheck "Show border" (2) and check "Border on Mouseover" (2) and as the last step select the "minus-circle" icon with a size of 24 for this button (3). | + | Now we style the "Delete" button of the component table. We remove the text altogether (1) and set the foreground to the same red we used for the "Delete" button (2). Uncheck "Show border" (2), check "Border on Mouseover" (2), and, as the last step, select the "minus-circle" icon with a size of 24 for this button (3). |
{{:visionx:invoice_application:style-button-delete.png?nolink|Styling the delete button}} | {{:visionx:invoice_application:style-button-delete.png?nolink|Styling the delete button}} | ||
- | The last button we are going to style is the "+" button of the component table. We remove the text altogether (1) and set the foreground to the same blue we used at the "Add" Button (2). Uncheck "Show border" (2) and check "Border on Mouseover" (2) and as the last step select the "plus-circle" icon with a size of 24 for this button (3). | + | The last button we are going to style is the "+" button of the component table. We remove the text altogether (1) and set the foreground to the same blue we used for the "Add" button (2). Uncheck "Show border" (2), check "Border on Mouseover" (2), and select the "plus-circle" icon with a size of 24 for this button (3). |
{{:visionx:invoice_application:stle-button-add-article.png?nolink|Styling the add article button}} | {{:visionx:invoice_application:stle-button-add-article.png?nolink|Styling the add article button}} | ||
- | To make the component table look like a real table we have to line up the labels with the editors. To do that you select the label in the editor and set the anchors to your desired positions. In the "Edit" menu of the labels we set them to bold as well. Next up we are going to add a title to the right side of the screen. To do that we change the type of our panel in its "Edit" menu. To do that we select the left side icon under the "Margins" of the panel. After that we add a label "Edit Invoice" and add an icon in front of it with the Font Awesome Icon "file-text-o". | + | To make the component table look like a real table, we have to line up the labels with the editors. To do that, you select the label in the editor and set the anchors to your desired positions. In the "Edit" menu of the labels, we set them to bold as well. Next up, we are going to add a title to the right side of the screen. To do that, we change the type of our panel in its "Edit" menu. To do that, we select the left side icon under the "Margins" of the panel. After that, we add a label "Edit Invoice" and add an icon in front of it with the Font Awesome Icon "file-text-o". |
{{:visionx:invoice_application:web-preview-2.png?nolink|The current application}} | {{:visionx:invoice_application:web-preview-2.png?nolink|The current application}} | ||
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 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. |
- | 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 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). |
{{: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 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: |
{{:visionx:invoice_application:web-preview-3.png?nolink|The current application}} | {{:visionx:invoice_application:web-preview-3.png?nolink|The current application}} |