How to customize cell icon

Hello, Edrees!

Thank you for contacting us.

Kindly note that you can change the filter icon using CSS, as the icons in Flexmonster are added using the bundled icon font. To change the icon, you need to modify the content and font-family CSS properties using the necessary selector. e.g.:

#pivot-container .fm-filter-header .fm-filter-icon::before {
  font-family: /*your icon font here*/ !important;
  content: "\f000" !important;
}

We have prepared a JSFIddle example using the Font Awesome icon font for reference: https://jsfiddle.net/flexmonster/apuedxLw/.

Please let us know if the suggested approach works well for you.

Best regards,
Solomiia

Hello, Edrees!

Thank you for your swift response.

We suggest the following approach to localize the custom Toolbar tab within the Flexmonster report: https://jsfiddle.net/flexmonster/q2rgvLhq/.
Here is the JSFiddle example of how to combine both URL localization and a partial one for the custom tab: https://jsfiddle.net/flexmonster/xkp0m7d4/.

Hope it helps. Please let us know if there are any further qiestions.

Kind regards,
Solomiia

Hello, Edrees!

Kindly note that you may need to use bracket notation to access the updateLabels method in typescript.
We suggest the following approach based on our sample JSFiddle:

1) Get the Toolbar prototype:

const prototype = (this.pivot.flexmonster.toolbar as any)['__proto__'];

2) Inside the customizeToolbar handler, override the updateLabels function for current Toolbar instance:

toolbar['updateLabels'] = function (labels: any) {
      prototype['updateLabels'].call(this, labels);
      this.setText(
        document.querySelector("#fm-tab-custom > a > span"), //your tab selector here
        this.Labels['customTab'], //your tab key here
      )
}

3) So, the resulting sample function looks as follows:

customizeToolbar(toolbar: any) {
    let tabs = toolbar.getTabs()
    toolbar.getTabs = function () {
      tabs.unshift({
        id: "fm-tab-custom", //custom tab id
        title: this['Labels']['customTab'], //custom tab label key
        handler: () => { },
        icon: "",
      })
      return tabs
    }
    const prototype = (this.pivot.flexmonster.toolbar as any)['__proto__'];
    toolbar['updateLabels'] = function (labels: any) {
      prototype['updateLabels'].call(this, labels);
      this.setText(
        document.querySelector("#fm-tab-custom > a > span"), //tab selector here
        this.Labels['customTab'], //custom tab label key here
      )
    }
  }

Please note that the realization of your customizeToolbar function may differ from the one provided in the sample.
We also recommend adding a key-value pair for the custom tab label directly into the .json file with localization, if possible.

Regarding the question about changing localization at runtime, please check out the approach shown in our localization demo: https://www.flexmonster.com/demos/js/localization/. In this approach, you change the URL to the localization file in the report object and then use setReport() API call to update the labels.

Please let us know if the suggested approach works well for you.

Kind regards,
Solomiia

Hello, Edrees!

Thank you for getting back to us.

We are glad to hear that you have found the workaround that works for your case. You are welcome to use it as soon as it works well for you.

Please note that the approach we have suggested in the previous letter works well when tested on our side. We've meant that you combine the approach that overrides updateLabels function in the prototype, and the one that changes localization using setReport() to achieve the desired custom tab update on the run. You can further debug it on your side if necessary.

Hope you will find our answer helpful.

Best regards,
Solomiia

Hello, Edrees!

Thank you for your quick reply.

Please note that in JSFiddle we can only create an example in plain JavaScript. We have prepared a sample Angular project instead: https://flexmonster.s3.us-east-1.amazonaws.com/realsoft-advanced-application/FLEXMONSTER-2024-REALSOFT-ADVANCED-APPLICATION-SAMPLE-NOV15.zip.
To run the project, unzip the file and then run the following command in the project's folder:

npm i & ng serve --open

Please let us know if the sample was helpful.
Looking forward to hearing your feedback.

Kind regards,
Solomiia

Hello, Edrees!

Thank you for your feedback.

We are happy to hear the suggested approach works well for you.

Feel free to contact us if any other questions arise.

Kind regards,
Solomiia