Differences

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

--- visionx:invoice_application [2020/06/08 10:54]
cduncan [Creating a Work Screen]
+++ visionx:invoice_application [2020/06/08 11:10]
cduncan [Adding Articles (Master Data/Popup)]
@@ Line 36: / Line 36: @@
 ====== Finishing the Data Model ======
-For this invoicing application we are going to create the following data model:
+For this invoicing application, we are going to create the following data model:
 {{:visionx:invoice_application:data-model.png?nolink|The Data Model}}
-===== Add customers (Combobox) =====
+===== Add Customers (Combobox) =====
-The data model for our invoice application is not done yet. To send out our invoices we need a table to store our Customers in. For this purpose we are going to create our table from .csv Data. In the bottom middle part of VisionX press "NEW table" (1) and choose the first option to "Take data from a Spreadsheet" (2). Press "Next" (3) to continue.
+The data model for our invoice application is not done yet. To send out our invoices, we need a table to store our customers in. For this purpose, we are going to create our table from .csv data. In the bottom, middle part of VisionX, press "NEW table" (1) and choose the first option to "Take data from a Spreadsheet" (2). Press "Next" (3) to continue.
 {{:visionx:invoice_application:create-table-spreadsheet-step1.png?nolink|Create table from spreadsheet}}
-In this screen we paste the following string of data to create the table and press "Next". This list could be copied from an existing customer list as well.
+In this screen, we paste the following string of data to create the table and press "Next". This list could be copied from an existing customer list as well.
 <code>
@@ Line 67: / Line 67: @@
 {{:visionx:invoice_application:create-table-spreadsheet-step2.png?nolink|Inputting the data}}
-In the "Options" group of this screen we select "First row contains labels" and choose "," as the delimiter for our data.
+In the "Options" group of this screen, we select "First row contains labels" and choose "," as the delimiter for our data.
 {{:visionx:invoice_application:create-table-spreadsheet-step3.png?nolink|Change options}}
-For the last step we just change the "Table name" and leave everything else as it is. After pressing "Finish" our customer table is created and already has some data in it.
+For the last step, we just change the "Table name" and leave everything else as it is. After pressing "Finish", our customer table is created and already has some data in it.
 {{:visionx:invoice_application:create-table-spreadsheet-step4.png?nolink|Last step}}
-Our data model is not quite finished yet as we still need to create a reference of our customers in the invoice table. To do this we are going to edit (1) the table. In this screen we once again press the "More..." button to reveal additional options. Press the "Database changes" button (2) add a new Column (3) and select "Make Combobox". This time we select the customer table (4) and press "Finish".
+Our data model is not quite finished yet as we still need to create a reference of our customers in the invoice table. To do this, we are going to edit (1) the table. In this screen, we once again press the "More..." button to reveal additional options. Press the "Database changes" button (2), add a new column (3), and select "Make Combobox". This time we select the customer table (4) and press "Finish".
 {{:visionx:invoice_application:add-customer-reference.png?nolink|Add customer reference}}
@@ Line 81: / Line 81: @@
 ===== Add Articles =====
-Every invoice needs articles/items so as the next step we are going to create a table to store our articles in. We once again create a new table and same as in the invoice table we created before we are going to define the information ourselfs. Our article table consists of a name, a description and a the rate of our article.
+Every invoice needs articles/items, so, as the next step, we are going to create a table to store our articles in. We once again create a new table and, same as in the invoice table we created before we, are going to define the information ourselves. Our article table consists of a name, a description, and a the rate of our article.
 {{:visionx:invoice_application:create-table-article.png?nolink|Creating the article table}}
@@ Line 87: / Line 87: @@
 ===== Add Items (Master-Detail) =====
-The last table we are going to create is the invoice item table. This table consists of a reference to the article table, a quanitity and an amount(rate * quantity). For this we are going to create a subtable in our invoice table. This way the database already knows which invoice items are related to which invoices. To do this we press the "Edit" button on the invoice table.
+The last table we are going to create is the invoice item table. This table consists of a reference to the article table, a quantity, and an amount(rate * quantity). For this, we are going to create a subtable in our invoice table. This way the database already knows which invoice items are related to which invoices. To do this, we press the "Edit" button on the invoice table.
 {{:visionx:invoice_application:create-invoice-items-new-step1.png?nolink|Edit invoice table}}
-In the following wizard we press the "More..." button. Press on "Database changes" and add a new column to the table. Now we press the "Make Subtable" button above the table.
+In the following wizard, we press the "More..." button. Press on "Database changes" and add a new column to the table. Now we press the "Make Subtable" button above the table.
 {{:visionx:invoice_application:create-invoice-items-new-step2.png?nolink|Creating a subtable}}
-We name our table "Invoice Items" and add the columns quantity and amount and a reference to the article table. Press Finish to create the subtable and therefore our data model.
+We name our table "Invoice Items" and add the columns quantity and amount and a reference to the article table. Press "Finish" to create the subtable and, therefore, our data model.
 {{:visionx:invoice_application:create-invoice-items-new-step3.png?nolink|Finishing the data model}}
-====== Layouting the Invoice Screen ======
+====== Laying Out the Invoice Screen ======
 ===== Change Table =====
-Up next is the layouting of our application. The created screen is a good start but we need to change a few things to make it a proper invoicing application. First off we are going to change the columns shown in the left side table. For this we press the "Edit" button (1) on the table. Here we tick off the columns (2) we don't want to be shown, in this case invoice date and due date, in this table we also change the label of the columns. We also turn off the navigation (3) in this table as we are going to do this via buttons. We change the margins (4) for our table to make it look nicer and with this are done editing the table.
+Up next is the laying out of our application. The created screen is a good start, but we need to change a few things to make it a proper invoicing application. First off, we are going to change the columns shown in the left side table. For this, we press the "Edit" button (1) on the table. Here, we tick off the columns (2) we don't want to be shown, in this case invoice date and due date. In this table, we also change the label of the columns. We also turn off the navigation (3) in this table, as we are going to do this via buttons. We change the margins (4) for our table to make it look nicer. With this, we are done editing the table.
 {{:visionx:invoice_application:change-table.png?nolink|Configuring the table}}
-The table still needs a search bar and buttons for adding and deleting a new invoice. Add a panel (1) on the north side of our table. In this panel we are goint to add the search bar (2) and an "Insert" and a "Delete" button from the "Web Elements"(3).
+The table still needs a search bar and buttons for adding and deleting a new invoice. Add a panel (1) on the north side of our table. In this panel, we are going to add the search bar, (2) and an "Insert", and a "Delete" button from the "Web Elements"(3).
 {{:visionx:invoice_application:change-table-layout.png?nolink|Layouting the table}}
-After changing the labels of our buttons this is what the screen should look by now.
+After changing the labels of our buttons, this is what the screen should look by now.
 {{:visionx:invoice_application:change-table-layout-done.png?nolink|The finished table layout}}
-===== Add invoice items =====
+===== Add Invoice Items =====
-To layout the form we are going to add the customer selection on top. Just take the "Customer" (1) editor from the "Unused Editors" section and drag it into the screen (2). We also add a label (3) in front of the editor.
+To lay out the form, we are going to add the customer selection on top. Just take the "Customer" (1) editor from the "Unused Editors" section and drag it into the screen (2). We also add a label (3) in front of the editor.
 {{:visionx:invoice_application:add-customer-selection.png?nolink|Layouting the form}}
-To add items to our invoice we are not going to use a standard table but a special "Component Table". This kind of table is typically used in web applications. To add this control we select "Data Links" (1) in the left sidebar of VisionX. Now we drag the "Component Table" (2) directly under our form (3).
+To add items to our invoice, we are not going to use a standard table, but a special "Component Table". This kind of table is typically used in web applications. To add this control, we select "Data Links" (1) in the left sidebar of VisionX. Now, we drag the "Component Table" (2) directly under our form (3).
 {{:visionx:invoice_application:add-component-table.png?nolink|Adding a Component Table}}
-This control is built in a way, that everything you put into it is copied for each row in a table. For instance if we add the editors of our invoice items table into the "Component Table" the editors are "cloned" for every item in our invoice. That means we are going to select our invoice item table (1) in the bottom of VisionX. We are adding the following editors: "Name", "Quantity", "Rate" and "Amount" (2) in this order into the control (3). Next to the editors we add a "Delete" button from the "Web Elements"(4) to delete the specifc item.
+This control is built in such a way that everything you put into it is copied for each row in a table. For instance, if we add the editors of our invoice items table into the "Component Table", the editors are "cloned" for every item in our invoice. That means we are going to select our invoice item table (1) in the bottom of VisionX. We are adding the following editors: "Name", "Quantity", "Rate", and "Amount" (2) in this order into the control (3). Next to the editors we add a "Delete" button from the "Web Elements"(4) to delete the specific item.
 {{:visionx:invoice_application:add-component-table-items.png?nolink|Adding the component table items}}
-After this step the screen should look like this in the designer:
+After this step, the screen should look like this in the designer:
 {{:visionx:invoice_application:add-component-table-items-done.png?nolink|The added component table items}}
-We dont want the labels for our columns cloned so we add those outside and on top of our table in their own panel. As the last thing we are going to add a button next to the item column to add a new article to the article table and a button under the "Component Table" to add a new invoice item. When everything is set into place this is how our screen should look in the editor by now.
+We don't want the labels for our columns cloned, so we add those outside and on top of our table in their own panel. As the last step, we are going to add a button next to the item column in order to add a new article to the article table and a button under the "Component Table" to add a new invoice item. When everything is set into place, this is how our screen should look in the editor by now.
 {{:visionx:invoice_application:layout-component-table-done.png?nolink|The current screen}}
@@ Line 139: / Line 139: @@
 ====== Adding the Functionality ======
-We added all those buttons in the preceding steps and now we are going to add some functionality to them.
+We added all those buttons in the preceding steps, and now we are going to add some functionality to them.
 ===== Adding/Deleting Invoices =====
@@ Line 147: / Line 147: @@
 ===== Adding/Deleting Invoice Items =====
-Next up we are going to edit the actions for the "Add new item" and "Delete" buttons for the invoice item table in the "Component Table".
+Next up, we are going to edit the actions for the "Add new item" and "Delete" buttons for the invoice item table in the "Component Table".
-Action for the Add new item-Button:
+Action for the "Add New Item" button:
 {{:visionx:invoice_application:add-invoice-item-action.png?nolink|The add new item action}}
-The "Delete" button we added once again already has all the required actions to delete an invoice item so nothing to do here.
+The "Delete" button we added already has all the required actions to delete an invoice item, so there is nothing to do here.
 ===== Adding Articles (Master Data/Popup) =====
-The last button on our list is the "Add Article" button. This button will be used to add articles to our database which can be chosen as the items for our invoice. For this we are going to create a popup screen. Press the "New Screen" Button to create a new workscreen. In the second part of the wizard we chose "Application screen as Form" now though. As the data source we choose "Use existing data from database tables" select "Use Application Database User" in the next step and select our article table in the second to last step. In the layout options we choose a "Form" column count of one and press "Finish" to create the screen. If everything was done correctly we are greeted with this screen:
+The last button on our list is the "Add Article" button. This button will be used to add articles to our database that can be chosen as the items for our invoice. For this, we are going to create a popup screen. Press the "New Screen" button to create a new workscreen. In the second part of the wizard, we choose "Application screen as Form" now. As the data source, we choose "Use existing data from database tables", select "Use Application Database User" in the next step, and select our article table in the penultimate step. In the layout options, we choose a "Form" column count of one and press "Finish" to create the screen. If everything was done correctly, we are greeted with this screen:
 {{:visionx:invoice_application:add-item-screen.png?nolink|The generated screen}}
-In this screen we add a "Save" and a "Cancel" button and change up the layout and size a bit.
+In this screen, we add a "Save" and a "Cancel" button and change up the layout and size a bit.
 {{:visionx:invoice_application:article-screen.png?nolink|The layouted screen}}
-To make our screen open as a popup select the screen and press its edit button (1). Tick "Show as Popup" (2) and we are done.
+To make our screen open as a popup, select the screen and press its edit button (1). Tick "Show as Popup" (2), and we are done.
 {{:visionx:invoice_application:set-modal.png?nolink|Mark as popup}}
-To give this screen its desired functionality we have to add actions to our buttons.
+To give this screen its desired functionality, we have to add actions to our buttons.
-Action for the Save-Button:
+Action for the "Save" button:
 {{:visionx:invoice_application:save-action.png?nolink|The save action}}
-Action for the Cancel-Button:
+Action for the "Cancel" button:
 {{:visionx:invoice_application:cancel-action.png?nolink|The cancel action}}
-To incorporate this popup to our invoice screen we are going to edit the action of our "+" button next to the item column.
+To incorporate this popup to our invoice screen, we are going to edit the action of our "+" button next to the item column.
 {{:visionx:invoice_application:add-article-action.png?nolink|The add article action}}