{"type":"doc","content":[{"type":"paragraph","content":[{"type":"placeholder","attrs":{"text":"\n*****************************************************\n*****************************************************\n*****************************************************\n*****************************************************\n*****************************************************\n********************** WARNING **********************\n********************** WARNING **********************\n********************** WARNING **********************\n********************** WARNING **********************\n********************** WARNING **********************\n********************** WARNING **********************\n********************** WARNING **********************\n********************** WARNING **********************\n********************** WARNING **********************\n********************** WARNING **********************\n\nThis Confluence article was automatically generated from Asciidoc. Any changes you make to this document will be overridden!\n\nIf you want to change the content, consider leaving a comment.\n\nYou can edit the content directly here: https://gitlab.pricefx.eu/training/pricefx-knowledge-base/-/tree/dev/public/content/docs/quick-reference/charts/tables\n\n*****************************************************\n*****************************************************\n*****************************************************\n*****************************************************\n*****************************************************\n********************** WARNING **********************\n********************** WARNING **********************\n********************** WARNING **********************\n********************** WARNING **********************\n********************** WARNING **********************\n********************** WARNING **********************\n********************** WARNING **********************\n********************** WARNING **********************\n********************** WARNING **********************\n********************** WARNING **********************\n"}}]},{"type":"paragraph","content":[{"text":"Tables display information in a way that makes it easy for end users to visually scan the data. Data series that cannot be aggregated are especially suited for tables. An example can be a list of prices.","type":"text"}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Simple Table","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":75.0},"content":[{"type":"media","attrs":{"width":839,"alt":"simple","id":"a0ef1201-7142-4ba6-b6ab-cfbb588e0984","collection":"contentId-3830087899","type":"file","height":228}}]},{"type":"paragraph","content":[{"type":"emoji","attrs":{"id":"atlassian-info","text":":info:","shortName":":info:"}},{"text":" ","type":"text"},{"text":"Dashboard Chart Example Groovy","type":"text","marks":[{"type":"strong"},{"type":"link","attrs":{"href":"https://github.com/pricefx/example-configuration/tree/main/pricefxSrc/CalculationLogic/Dashboard_Chart_Examples/elements/SimpleTable.groovy"}}]}]},{"type":"codeBlock","attrs":{"language":"groovy"},"content":[{"text":"ResultMatrix simpleTable(\n List data,\n Map labels\n) {\n def table = api.newMatrix()\n\n table.withColumns(labels.keySet())\n table.withRows(data)\n\n // Add labels to the columns\n labels.each { name, label ->\n table.withColumnTranslation(name, ['': label])\n }\n\n return table\n}","type":"text"}]},{"type":"paragraph","content":[{"type":"emoji","attrs":{"id":"atlassian-info","text":":info:","shortName":":info:"}},{"text":" ","type":"text"},{"text":"Dashboard Chart Simple Table Groovy","type":"text","marks":[{"type":"strong"},{"type":"link","attrs":{"href":"https://github.com/pricefx/example-configuration/tree/main/pricefxSrc/CalculationLogic/Dashboard_Chart_Examples/elements/SimpleTable.groovy"}}]}]},{"type":"codeBlock","attrs":{"language":"groovy"},"content":[{"text":"ResultMatrix data = [\n [\n customerId: 'CD-00001',\n label : 'Mega Evil Space Cooperation',\n totalSales: 12.8e3,\n ], [\n customerId: 'CD-00001',\n label : 'Mom & Pop Store Inc.',\n totalSales: 66.0e3,\n ], [\n customerId: 'CD-00001',\n label : 'Academy Toddlers',\n totalSales: 32.2e3,\n ]\n]\n\ndef labels = [\n // Do not include the customerId\n label : 'Customer Name',\n totalSales: 'Total Sales (€)',\n]\n\nreturn simpleTable(data, labels)","type":"text"}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Cell Formatting","type":"text"}]},{"type":"paragraph","content":[{"text":"You can specify exactly how the cells in a column should be formatted with the ","type":"text"},{"text":"FielFormatType","type":"text","marks":[{"type":"code"}]},{"text":" enumeration.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":75.0},"content":[{"type":"media","attrs":{"width":837,"alt":"field formatting","id":"1d618a96-bfab-447b-9015-04740f43d319","collection":"contentId-3830087899","type":"file","height":236}},{"type":"caption","content":[{"text":"Figure 1. A table where the cell values in the second column has been formatted to show the amount in Euros.","type":"text"}]}]},{"type":"paragraph","content":[{"type":"emoji","attrs":{"id":"atlassian-info","text":":info:","shortName":":info:"}},{"text":" ","type":"text"},{"text":"Dashboard Chart Table with Formatting Groovy","type":"text","marks":[{"type":"strong"},{"type":"link","attrs":{"href":"https://github.com/pricefx/example-configuration/tree/main/pricefxSrc/CalculationLogic/Dashboard_Chart_Examples/elements/TableWithFormatting.groovy"}}]}]},{"type":"codeBlock","attrs":{"language":"groovy"},"content":[{"text":"ResultMatrix tableWithFormatting(\n List data,\n Map labels,\n Map formatting\n) {\n def table = api.newMatrix()\n\n table.withColumns(labels.keySet())\n table.withRows(data)\n table.withColumnFormats(formatting)\n\n // Add labels to the columns\n labels.each { name, label ->\n table.withColumnTranslation(name, ['': label])\n }\n\n return table\n}","type":"text"}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Filtering & Sorting","type":"text"}]},{"type":"paragraph","content":[{"text":"A table header can allow the end user to filter and sort rows according to their field values. Both these features must be switched on by method calls.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":100.0},"content":[{"type":"media","attrs":{"width":834,"alt":"filter and sort","id":"6df61fce-77e7-4d30-ba1a-d3a6dae06563","collection":"contentId-3830087899","type":"file","height":544}},{"type":"caption","content":[{"text":"Figure 2. A table that has filtering and sorting enabled.","type":"text"}]}]},{"type":"paragraph","content":[{"type":"emoji","attrs":{"id":"atlassian-info","text":":info:","shortName":":info:"}},{"text":" ","type":"text"},{"text":"Dashboard Chart Table with Sort and Search Groovy","type":"text","marks":[{"type":"strong"},{"type":"link","attrs":{"href":"https://github.com/pricefx/example-configuration/tree/main/pricefxSrc/CalculationLogic/Dashboard_Chart_Examples/elements/TableWithSortAndSearch.groovy"}}]}]},{"type":"codeBlock","attrs":{"language":"groovy"},"content":[{"text":"ResultMatrix simpleTableWithSortAndSearch(\n List data,\n Map labels\n) {\n def table = api.newMatrix()\n\n table.withColumns(labels.keySet())\n table.withRows(data)\n\n table.withDisableSorting(false)\n table.withEnableClientFilter(true)\n\n // Add labels to the columns\n labels.each { name, label ->\n table.withColumnTranslation(name, ['': label])\n }\n\n return table\n}","type":"text"}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"External Links","type":"text"}]},{"type":"paragraph","content":[{"text":"A table cell can contain a link to other pages within the frontend application. To turn the cell into a link, simply set the cell value to a string that contains an HTML anchor tag.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":100.0},"content":[{"type":"media","attrs":{"width":856,"alt":"external links","id":"e09d25c4-e1e1-4049-adc4-5e05cf8d0776","collection":"contentId-3830087899","type":"file","height":241}},{"type":"caption","content":[{"text":"Figure 3. A table where the third column contains external links.","type":"text"}]}]},{"type":"paragraph","content":[{"type":"emoji","attrs":{"id":"atlassian-info","text":":info:","shortName":":info:"}},{"text":" ","type":"text"},{"text":"Dashboard Chart Table with External Links Groovy","type":"text","marks":[{"type":"strong"},{"type":"link","attrs":{"href":"https://github.com/pricefx/example-configuration/tree/main/pricefxSrc/CalculationLogic/Dashboard_Chart_Examples/elements/TableWithExternalLinks.groovy"}}]}]},{"type":"codeBlock","attrs":{"language":"groovy"},"content":[{"text":"ResultMatrix tableWithExternalLink(\n List data,\n Map labels\n) {\n def table = api.newMatrix()\n\n def allLabels = labels + [externalLink: 'External Link']\n\n table.withColumns(allLabels.keySet())\n\n def rows = data.collect { dataRow ->\n // Add a field to the data set\n dataRow + [\n externalLink: externalLink(\n \"https://duck.com/?q=${urlEncode(dataRow.label)}\",\n \"I'm Feeling Lucky\"\n )\n ]\n }\n\n table.withRows(rows)\n\n // Add labels to the columns\n allLabels.each { name, label ->\n table.withColumnTranslation(name, ['': label])\n }\n\n return table\n}\n\nString externalLink(String href, String children){\n return \"\"\"${children}\"\"\"\n}","type":"text"}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Internal Links","type":"text"}]},{"type":"paragraph","content":[{"text":"If you want to link to a page within the Pricefx application, it is best to use ","type":"text"},{"text":"ResultMatrix.linkCell()","type":"text","marks":[{"type":"link","attrs":{"href":"https://developer.pricefx.eu/pricefx-api/groovy/develop/net/pricefx/server/dto/calculation/ResultMatrix.html#linkCell(java.lang.Object,java.lang.String,java.lang.String)"}}]},{"text":". This will ensure that the link that the end user clicks points to a valid page within the same frontend application. Otherwise, there will be issues if the URL changes.","type":"text"}]},{"type":"panel","attrs":{"panelType":"success"},"content":[{"type":"paragraph","content":[{"text":"For a full list of pages that can be targeted with ","type":"text"},{"text":"ResultMatrix.linkCell()","type":"text","marks":[{"type":"code"}]},{"text":", see the ","type":"text"},{"text":"reference","type":"text","marks":[{"type":"link","attrs":{"href":"https://knowledge.pricefx.com/display/KB/Deep+Linking"}}]},{"text":".","type":"text"}]}]},{"type":"paragraph","content":[{"type":"emoji","attrs":{"id":"atlassian-info","text":":info:","shortName":":info:"}},{"text":" ","type":"text"},{"text":"Dashboard Chart Table with Internal Links Groovy","type":"text","marks":[{"type":"strong"},{"type":"link","attrs":{"href":"https://github.com/pricefx/example-configuration/tree/main/pricefxSrc/CalculationLogic/Dashboard_Chart_Examples/elements/TableWithInternallLinks.groovy"}}]}]},{"type":"codeBlock","attrs":{"language":"groovy"},"content":[{"text":"ResultMatrix tableWithCustomerDetail(\n List data,\n Map labels\n) {\n def table = api.newMatrix()\n\n def allLabels = labels + [openCustomerDetail: 'Customer Detail']\n\n table.withColumns(allLabels.keySet())\n\n def rows = data.collect { dataRow ->\n // Add a field to the data set\n dataRow + [\n openCustomerDetail: customerDetailLink(table, dataRow.customerId)\n ]\n }\n\n table.withRows(rows)\n\n // Add labels to the columns\n allLabels.each { name, label ->\n table.withColumnTranslation(name, ['': label])\n }\n\n return table\n}\n\nString customerDetailLink(ResultMatrix table, String customerId){\n // If customerId is null, the customer master table screen would open\n if(customerId == null){\n throw new Exception('customerId must be provided')\n }\n return table.linkCell('Customer Detail', 'customersPage', customerId)\n}","type":"text"}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Cell Styling","type":"text"}]},{"type":"paragraph","content":[{"text":"Table cells can be styled, for example, to draw attention to certain rows.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":100.0},"content":[{"type":"media","attrs":{"width":1280,"alt":"styled cells","id":"39a9936d-8de0-40ed-a777-594f5792a64b","collection":"contentId-3830087899","type":"file","height":290}},{"type":"caption","content":[{"text":"Figure 4. A table where the cells in the Status column are colored according to the quote's current status.","type":"text"}]}]},{"type":"paragraph","content":[{"type":"emoji","attrs":{"id":"atlassian-info","text":":info:","shortName":":info:"}},{"text":" ","type":"text"},{"text":"Dashboard Chart Table Quote Status Groovy","type":"text","marks":[{"type":"strong"},{"type":"link","attrs":{"href":"https://github.com/pricefx/example-configuration/tree/main/pricefxSrc/CalculationLogic/Dashboard_Chart_Examples/elements/TableQuoteStatus.groovy"}}]}]},{"type":"codeBlock","attrs":{"language":"groovy"},"content":[{"text":"ResultMatrix quotesTable(\n String title,\n List quotes\n){\n\n def table = api.newMatrix()\n table.withTitle(title)\n\n def labels = [\n // typedId should be hidden, because it is only there to be supplied to the table action handler\n name : 'Name',\n label : 'Label',\n quoteStatus: 'Status',\n viewQuote : 'View',\n ]\n\n def rows = quotes.collect { quote ->\n [\n typedId : quote.typedId,\n name : quote.uniqueName,\n label : quote.label,\n quoteStatus: getQuoteStatusCell(table, quote.quoteStatus),\n viewQuote : link(\"#/qc/quotes/${quote.typedId}\", 'Open')\n ]\n }\n\n def columns = labels.keySet() as List\n table.withColumns(columns)\n table.withRows(rows)\n table.withDisableSorting(false)\n table.withEnableClientFilter(true)\n\n // Add labels, in the backend referred to as \"translations\"\n labels.each { name, label ->\n table.withColumnTranslation(name, ['': label])\n }\n\n return table\n}\n\ndef getQuoteStatusCell(ResultMatrix table, String quoteStatus) {\n def colors = libs.Library_CSS.Color\n switch (quoteStatus) {\n case 'DEAL':\n return table.styledCell(quoteStatus, colors.CONTRAST_TEXT, colors.SUCCESS)\n case 'OFFER':\n return table.styledCell(quoteStatus, colors.CONTRAST_TEXT, colors.WARNING)\n case 'LOST':\n return table.styledCell(quoteStatus, colors.CONTRAST_TEXT, colors.ERROR)\n default:\n return table.styledCell(quoteStatus)\n }\n}","type":"text"}]},{"type":"codeBlock","attrs":{"language":"groovy"},"content":[{"text":"def quotes = quoteUtils.getByYear(year)\n\nreturn quotesTable(\"Quotes $year\", quotes)","type":"text"}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Row Actions","type":"text"}]},{"type":"paragraph","content":[{"text":"End users can be allowed to perform actions on the rows. These actions are strictly limited – they must correspond to a single REST API call.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":100.0},"content":[{"type":"media","attrs":{"width":1127,"alt":"row action success","id":"95deadbd-765c-489f-9032-d28077b2017b","collection":"contentId-3830087899","type":"file","height":431}},{"type":"caption","content":[{"text":"Figure 5. A table of draft quotes. Each row has a button that opens a pop-up with a single option to submit the quotes.","type":"text"}]}]},{"type":"paragraph","content":[{"type":"emoji","attrs":{"id":"atlassian-info","text":":info:","shortName":":info:"}},{"text":" ","type":"text"},{"text":"Dashboard Chart Table Row Actions Groovy","type":"text","marks":[{"type":"strong"},{"type":"link","attrs":{"href":"https://github.com/pricefx/example-configuration/tree/main/pricefxSrc/CalculationLogic/Dashboard_Chart_Examples/elements/TableRowActions.groovy"}}]}]},{"type":"codeBlock","attrs":{"language":"groovy"},"content":[{"text":"ResultMatrix quotesTable(\n String title,\n List quotes\n){\n\n def table = api.newMatrix()\n table.withTitle(title)\n\n def labels = [\n // typedId should be hidden, because it is only there to be supplied to the matrix action handler\n name : 'Name',\n label : 'Label',\n viewQuote : 'View',\n actions : 'Actions',\n ]\n\n def rows = quotes.collect { quote ->\n [\n name : quote.uniqueName,\n label : quote.label,\n viewQuote : link(\"#/qc/quotes/${quote.typedId}\", 'View'),\n actions : table.cells('Actions', submitAction(table, quote)),\n ]\n }\n\n def columns = labels.keySet() as List\n table.withColumns(columns)\n table.withRows(rows)\n table.withDisableSorting(false)\n table.withEnableClientFilter(true)\n\n // Add labels, in the backend referred to as \"translations\"\n labels.each { name, label ->\n table.withColumnTranslation(name, ['': label])\n }\n\n return table\n}\n\nResultMatrix.ResultMatrixBackEndCell submitAction(ResultMatrix table, Map quote){\n return table.backEndAction(\n 'Submit',\n \"/clicmanager.runjob/${quote.typedId}/submit\", // Must have leading forward slash\n null,\n \"Quote ${quote.uniqueName} was successfully submitted\",\n \"Failed to submit ${quote.uniqueName}\"\n )\n}\n\nString link(String href, String children) {\n return \"\"\"${children}\"\"\"\n}","type":"text"}]},{"type":"paragraph","content":[{"type":"emoji","attrs":{"id":"atlassian-info","text":":info:","shortName":":info:"}},{"text":" ","type":"text"},{"text":"Dashboard Chart Examples Table Row Actions","type":"text","marks":[{"type":"strong"},{"type":"link","attrs":{"href":"https://github.com/pricefx/example-configuration/tree/main/pricefxSrc/CalculationLogic/Dashboard_Chart_Examples/elements/TableRowActions.groovy"}}]}]},{"type":"codeBlock","attrs":{"language":"groovy"},"content":[{"text":"def quotes = quoteUtils.getDraftsByYear(year)\n\nreturn quotesTable(\"Quote Drafts $year (Row Action)\", quotes)","type":"text"}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Row Selection Actions","type":"text"}]},{"type":"paragraph","content":[{"text":"End users can be allowed to perform actions on selected rows. When one or more rows are selected, a set of action buttons are made available (at the bottom of the table). When one of these buttons is clicked, a callback logic is invoked by the frontend application. This logic must have the ","type":"text"},{"text":"default","type":"text","marks":[{"type":"em"}]},{"text":" logic nature. An alert will pop up on the screen, indicating whether the execution was successful.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":100.0},"content":[{"type":"media","attrs":{"width":1116,"alt":"selected rows action success","id":"0e6ac4f3-e3e1-487c-9bab-5fd089c2c358","collection":"contentId-3830087899","type":"file","height":739}},{"type":"caption","content":[{"text":"Figure 6. The end users can select a set of rows and perform custom actions. When the callback logic has finished executing, an alert will appear on the screen, indicating whether the callback logic executed successfully.","type":"text"}]}]},{"type":"paragraph","content":[{"type":"emoji","attrs":{"id":"atlassian-info","text":":info:","shortName":":info:"}},{"text":" ","type":"text"},{"text":"Dashboard Chart Table Row Selection Actions","type":"text","marks":[{"type":"strong"},{"type":"link","attrs":{"href":"https://github.com/pricefx/example-configuration/tree/main/pricefxSrc/CalculationLogic/Dashboard_Chart_Examples/elements/TableRowSelectionActions.groovy"}}]}]},{"type":"codeBlock","attrs":{"language":"groovy"},"content":[{"text":"\nResultMatrix quotesTable(\n String title,\n List quotes\n){\n\n def table = api.newMatrix()\n table.withTitle(title)\n\n def labels = [\n // typedId should be hidden, because it is only there to be supplied to the matrix action handler\n name : 'Name',\n label : 'Label',\n viewQuote : 'View',\n ]\n\n def rows = quotes.collect { quote ->\n [\n typedId : quote.typedId,\n name : quote.uniqueName,\n label : quote.label,\n viewQuote : link(\"#/qc/quotes/${quote.typedId}\", 'View')\n ]\n }\n\n def columns = labels.keySet() as List\n table.withColumns(columns)\n table.withRows(rows)\n table.withDisableSorting(false)\n table.withEnableClientFilter(true)\n\n table.rowSelectionBackEndAction('quotes')\n .withLogicName('Handler_SubmitQuotes')\n .withColumns('typedId')\n .withButtonLabel('Submit')\n .withSuccessMessage('Successfully submitted all selected quotes.')\n .withFailureMessage('Failed to submit all selected rows.')\n\n // Add labels, in the backend referred to as \"translations\"\n labels.each { name, label ->\n table.withColumnTranslation(name, ['': label])\n }\n\n return table\n}\n\nString link(String href, String children) {\n return \"\"\"${children}\"\"\"\n}","type":"text"}]},{"type":"paragraph","content":[{"text":"Set up a bound partition with the name 'thisPartition' that points to the same partition you are using, and add the callback logic.","type":"text"}]},{"type":"paragraph","content":[{"type":"emoji","attrs":{"id":"atlassian-info","text":":info:","shortName":":info:"}},{"text":" ","type":"text"},{"text":"Handler Groovy","type":"text","marks":[{"type":"strong"},{"type":"link","attrs":{"href":"https://github.com/pricefx/example-configuration/tree/main/pricefxSrc/CalculationLogic/Handler_SubmitQuotes/elements/Handler.groovy"}}]}]},{"type":"codeBlock","attrs":{"language":"groovy"},"content":[{"text":"// Expects the input to have a property 'quotes'\n// that is a list of maps with one property 'typedId'\ndef typedIds = input.quotes.collect { it.typedId as String }\n\ntypedIds.each { typedId ->\n submitQuote(typedId)\n}\n\nreturn\n\nvoid submitQuote(String typedId){\n api.boundCall(\n 'thisPartition',\n \"clicmanager.runjob/$typedId/submit\",\n '',\n )\n}","type":"text"}]}],"version":1}

Browser not supported