Filter values not displayed correctly since v2.5.6

Closed
Jacob asked 4 days ago

Hi, 

We are migrating our Flexmonster component from 2.5.0 to latest version.

It's working rather well except a very annoying behavior change introduced by v2.5.6 (see join fidle).

In this fiddle https://jsfiddle.net/NicolasJACOB/p6d3fryc/1/, if you change flexmonster version to 2.5.6 the display of "Ref Expert" filter value changes (<script src="https://cdn.jsdelivr.net/npm/flexmonster@2.5.5/flexmonster.js"></script>)

In 2.5.5: it displays only the label whereas in 2.5.6 it display the anchor <a href=...

 

 

 I tried to use property to build the anchor element in  customizeCellFunction like describe in the exemple, but if I do so, I did't find how to have the link in details table (ref Expert columns: 

My customizeCellFunction is the following (see below), but when handling the cell of the table, i have very few information and I cannot recreate the link. Do you have an idea (note: example where adding cell data to an url template is not suitable for our use case : I need at least 2 parameters (an Id, and a root path).

Best regard and thanks in advance for your help

function customizeCellFunction(
cell: Flexmonster.CellBuilder,
data: Flexmonster.CellData
) {
const h = data.hierarchy?.uniqueName;

if (!h) {
return;
}
const properties = data.member?.properties as
| Record<string, string>
| undefined;
const url = properties?.[`${h}.url`];
const label = properties?.[`${h}.label];
if (url && label) {
cell.text = <a href="${url}" target="_blank" style="color: #039be5; z-index: 100; position: absolute;">${label}</a>`;
return;
}
}

2 answers

Public
Maksym Diachenko Maksym Diachenko Flexmonster 2 days ago

Hello, Jacob,

Thank you for reaching out to us and sharing these details.

Starting from version 2.5.6, data containing HTML syntax is rendered as plain text and displayed “as is,” rather than being parsed by the browser as markup. This change was implemented to increase protection against potential XSS attacks.

As you already found out, the current approach for adding links into cells is by building the anchor element, as is shown in this example: https://jsfiddle.net/flexmonster/q1gtwj48/

In your current implementation, the properties are not passed because the associated hierarchy is in the report filters. Thus, they are not counted as adjacent members and are not added to the data.member object. As a workaround, we recommend the following options:

  • Adding an external map, with unique member captions matching their respective properties that are used to create a link.
  • Using the "id" type instead of "property". Unlike properties, fields with the "id" type are tied to the whole record instead of a specific hierarchy. As a result, they will always be added to the recordId property of the cell object used in customizeCell. Many properties can be added to id by having object inside the data, as is shown in this example: https://jsfiddle.net/flexmonster/60wv9rgk/

Please let us know if our answer helped you.

Best regards,
Maksym

Public
Jacob 20 hours ago

Thank a lot Maksym, it works perfectly (recordId trick). 

Best

Nicolas

This question is now closed