The Creating Invoices and Managing Quotes use case helps users create an invoice using a cascading lists in a grid.
You will also learn how to use several features in TGNG app such as:
Introduction
The Creating Invoices and Managing Quotes use case helps users create cascading lists in a grid using Column values placeholders. Users can use external database systems such as MySQL, Postgres, SQL Server, etc., to create cascading lists.
This use case is based an example of a laptop reseller who used Jira to manage the sale, and each Jira ticket will be a sale management/invoice ticket. Users can apply the methodology of this use case for their organization departments, such as Sales, Marketing, IT, and Human Resources, to control the performance of each team and also to analyze further strategies for the team.
Prerequisites
User logged into their account, installed Table Grid Next Generation App
User created a related Jira project and issue
User had the admin role on Jira
User had a database system such as: MySQL, Postgres, SQL Server, etc.
An existing data source configured using TGNG app: Connecting an external data source
Post-condition
User can use the grid to update related information for the list of items
User can create issues using the Invoice grid
User can download/upload the Configuration for personal usage
User can add more columns to support the order management such as: total, amount,..
Conditions
Required fields are marked with a red asterisk *.
User can use formulas in Table Grid Next Generation Cloud as a separate column or as an aggregation option for other column types. User can input formulas inside the embedded JavaScript Editor and get results on the grid view. The grid can process formula logic and display formula results. Error types in the formula column type
#error - syntax error
#type - operation error (operation could not be executed using different column types)
User have to set the name of Column to be an exact match with Column of the database.
User need to type the correct statement for the “SQL query”. For example:
SELECT column1, column2, ... FROM table_name;
Each grid must contain at least 1 column, or else it will show the pop-up message “table-config-column-config-required”.
The database table name must be distinguished. If not, the system shows a pop-up message:
“Table wasn't created
Maybe table with this name already exists in the database”.
The database table name can only contains alphanumeric characters and underscores.
Use case Flow Diagram
Configure Grid “Invoice”
You can upload this grid configuration for practice:
Basic Flow
Actions | |
|---|---|
| 1 | Click Add Data Source in Data Source  |
| 2 | Fill all required information in Data Source  |
| 3 | Click Test Connection to examine the connection between Database and Jira |
| 4 | Click Save to save information of Data Source |
| 5 | Click Add Grid in Grids section  |
| 6 | Select Grid fields (to populate data manually) Click Confirm  |
| 7 | Fill information for Name = “Invoice” |
| 8 | In Scopes, select your Projects and Issue Types on which you want to display the grid  Select “Is available in all new projects” to ensure that all new created projects will be added automatically to Scopes of the current grid. |
| 9 | In Configuration - Column, click |
| 10 | In Add Column, choose Single Select List in Column type User fill information for Identifier and Title Type “jtype“ as Identifier and type “Product Type” as Title Select “Cell can be edited” to select Product Type on Issue Screen  In Dynamic options, choose Data Source and type SQL query In this example, writer used:
Data in table laptop_sale_management_1  Click Get data button to connect the database. When the query is corrected, the result will be displayed. In Mapping, choose pcategory for label (because this column represents for Product Type in Database)  Click Click Add button to save the column information |
| 11 | In Configuration - Column, click |
| 12 | In Add Column, choose Single Select List in Column type User fill information for Identifier and Title Type “jman“ as Identifier and type “Manufacturer” as Title Select “Cell can be edited” to select Manufacturer on Issue Screen  In Dynamic options, choose Data Source and type SQL query In this example, writer used:
In Mapping, type “pmanufacturer” for label (because this column represents for Manufacturer in Database)  Click Click Add button to save the column information |
| 13 | In Configuration - Column, click |
| 14 | In Add Column, choose Single Select List in Column type User fill information for Identifier and Title Type “jmodel“ as Identifier and type “Model” as Title Select “Cell can be edited” to select Model on Issue Screen  In Dynamic options, choose Data Source and type SQL query In this example, writer used:
In Mapping, type “pmodel” for label (because this column represents for Model in Database)  Click Click Add button to save the column information |
| 15 | In Configuration - Column, click |
| 16 | In Add Column, choose Single Select List in Column type User fill information for Identifier and Title Type “jprice“ as Identifier and type “Price” as Title Select “Cell can be edited” to select Price on Issue Screen  In Dynamic options, choose Data Source and type SQL query In this example, writer used:
In Mapping, type “pprice” for label (because this column represents for Price in Database)  Click Click Add button to save the column information |
| 17 | In Configuration - Column, click |
| 18 | In Add Column, choose Number in Column type User fill information for Identifier and Title Type “jquantity“ as Identifier and type “Quantity” as Title Select “Cell can be edited” to type Quantity on Issue Screen  Click Add button to save the column information |
| 19 | In Configuration - Column, click |
| 20 | In Add Column, choose Formula in Column type User fill information for Identifier and Title Type “jtotal“ as Identifier and type “Total” as Title  In Formula expression, type: return Number($(jprice).label) * Number($(jquantity)); In Aggregation operation, select “sum” to display sum of the Total column in the grid  Click Add button to save the column information |
| 21 |  Click Save button to save the gird configuration |
Exceptional Flow
Users can’t connect to database
Continued from step #3 in the Basic Flow:
Step | Description |
4a | An “Errors” message appears |
Use case stops. | |
Users type wrong SQL query
Continued from step #11 in the Basic Flow:
Step | Description |
12a | An “Errors” message appears |
Use case stops. | |
Users click “Cancel” while saving the config
Continued from step #21 in the Basic Flow:
Step | Description |
22a | The system will automatically come back to the “Grids” page |
Use case stops. | |
Use the Invoice grid in a Jira Project
Open the issue in Projects and Issue Type that you added to Scopes of the grid.
Click on Apps button, and then select Grid → The grid will appear on Issue Screen.
Click on
to edit the grid.
Click on
to add row to the grid.
Double-click on each cell to select value.
Enter Quantity to calculate Total
Click on
to save the grid data.The final result will look like this
User can continue to edit the grid in the issue by clicking the 
button and add more rows in the grid by clicking the button
Conclusion
Creating Invoices and Managing Quotes use case simplifies invoice creation through cascading lists in a grid, reducing errors and enhancing efficiency. This feature streamlines invoicing and quote management, enabling faster processing and improved customer service.
We hope you can apply this approach to your own processes, enhancing efficiency and control in real-world situations.