How to manipulate report HTML: a user example

| 07.10.2024

In this article, we will present an example on how to combine two of the least-known report templates in Ansys Dynamic Reporting to allow the user to manipulate the HTML of the report. Let us assume we have two generic files in the database. If we try to visualize them in a report, they will appear as such:

Image 1

Let us assume now that the user wants to visualize this in the report as a table, where the first column is the file name and the second is a link that can be used to download the file. First, let’s look at the HTML for the current report. Note how it is structured in the following way:

<a href="/item/api_payload/5f9f57d7-28a7-11ef-b4cb-743af4bc475f?filename=Nominal.ftres">Download</a>

It is therefore clear that we need access to the GUID corresponding to the file items. We can get those by querying the SQL database.

Create a new template or type “SQL query”. Set the Sqlite filename to point to the db.sqlite3 file inside the ADR database. Set the query to be:

SELECT  
name,  
substr(guid, 1, 8) || '-' ||  
substr(guid, 9, 4) || '-' ||  
substr(guid, 13, 4) || '-' ||  
substr(guid, 17, 4) || '-' ||  
substr(guid, 21, 12) AS formatted_guid 
FROM data_item;

Make sure the Generated items is set to “Replace” and not the default “Append”. Now, if you run this template, you will get:

Image 2

We therefore are able to get the items name and guid inside a table. We can set the table column labels with the template property:

labels_column: [Filename, Download link]

Now, this is a good first step, but how do we go from the file GUID to a link to download it? Fortunately, starting from ADR 24R2 we have a new template type that allows us to manipulate the HTML of a report. Create as a child template a new template of type: User-defined layout. When creating such a template, the block from the HMTL header is injected into the HTML of the report, and can be used to modify the report page.

Set the HTML to be:

<script> 
const a = document.querySelectorAll("table"); 

const targetTable = a[0]; 

for (var i = 1; i < targetTable.rows.length; i++) {  
targetTable.rows[i].cells[1].innerHTML = "<a href='/item/payload/" +
targetTable.rows[i].cells[1].innerHTML + "?formatted=1'>" +
targetTable.rows[i].cells[0].innerHTML + "</a>"; 
} 

</script>

This will find the table in the webpage DOM, and modify the elements in the second column to be downloadable links, similar to what we saw in the original rendering of the report.

The end result is the following:

Image 3

If new files are added to the database, the table will automatically update, creating a new entry.

All of these steps can be repeated via the python API with the following calls:

import ansys.dynamicreporting.core as adr 
adr_service = adr.Service() 
# Assumind you have a currently running ADR service on port 8000: 
adr_service.connect(url="http://127.0.0.1:8000") 
server = adr_service.serverobj 

# Generate the SQL query template 
template_2 = server.create_template(name="SQL_query", parent=None, report_type="Generator:sqlqueries") 
template_2.params = '{"sqldb": "D:\\\\tmp\\\\link_db\\\\db.sqlite3", "generate_merge": "replace",
    "sqlquery": "SELECT \\n    name, \\n    substr(guid, 1, 8) || \'-\' || \\n    substr(guid, 9, 4) || \'-\' || \\n    substr(guid, 13, 4) || \'-\' || \\n    substr(guid, 17, 4) || \'-\' || \\n    
    substr(guid, 21, 12) AS formatted_guid\\nFROM data_item;",
    "properties": {"labels_column": "[Filename,Download link]"},
    "HTML": "<script>\\nconst a = document.querySelectorAll(\\"table\\");\\n\\nconst targetTable = a[0];\\n\\nfor (var i = 1; i < targetTable.rows.length; i++) { \\ntargetTable.rows[i].cells[1].innerHTML = \\"<a href=\'/item/payload/\\" + targetTable.rows[i].cells[1].innerHTML + \\"?formatted=1\'>\\" + targetTable.rows[i].cells[0].innerHTML + \\"</a>\\";\\n}\\n\\n</script>"}' 
server.put_objects(template_2) 

# Generate the User Defined template as a child of the previous one 
template_3 = server.create_template(name="User Defined", parent=template_2, report_type="Layout:userdefined") 
template_3.params = '{"HTML": "<script>\\nconst a = document.querySelectorAll(\\"table\\");\\n\\nconst targetTable = a[0];\\n\\nfor (var i = 1; i < targetTable.rows.length; i++) { \\ntargetTable.rows[i].cells[1].innerHTML = \\"<a href=\'/item/payload/\\" + targetTable.rows[i].cells[1].innerHTML + \\"?formatted=1\'>\\" + targetTable.rows[i].cells[0].innerHTML + \\"</a>\\";\\n}\\n\\n</script>"}' 
server.put_objects(template_3) 
server.put_objects(template_2)

For more information on how to use Ansys Dynamic Reporting to generate flexible and powerful reports, please visit:

Connect with Ansys