Custom error notification image

[OleksiiDemianyk]

Custom error notification image

This article explains how to develop the plugin to replace the default error image. Of course, in ideal world there are no errors, but who does live in the ideal one?

As a result of this article’s implementation, we will accomplish the following:

To accomplish this we will develop a new plugin. For more details about plugin development please check this article:

https://community.sisense.com/t5/knowledge-base/plugin-dev-tutorial/ta-p/9087

To create a new plugin we will need to do the following:

1. Use file manager to navigate to the folder ‘plugins’;
2. In the folder ‘plugins’ create a new folder and name it ‘updateErrorLogo’;
3. Open the newly created folder and create two files:
1. main.6.js;
2. plugin.json.
4. Open the file ‘plugin.json’ and paste there the following content:

{
    "name": "updateErrorLogo",
    "source": [
        "main.6.js"
    ],
    "lastUpdate": "2025-01-10T22:36:03.764Z",
    "folderName": "updateErrorLogo",
    "isEnabled": true,
    "version": "1.0.0",
    "skipCompilation": true,
    "pluginInfraVersion": 2
}

5. Open the file `main.6.js’ and paste there the following code:

 

//Import your image. Value of the variable newErrorSvg is internal URL to the image
import newErrorSvg from './newErrorSvg.svg';

//Subscription at the loading directive slfQueryErrorBrand
mod.directive('slfQueryErrorBrand', [
    () => {
        return {
            restrict: 'C',
            link: async($scope, lmnt, attrs) => {
                $(lmnt).hide(); //Hiding default logo
                await fetch(newErrorSvg).then((response) => { //Load SVG
                    return response.text().then(svgContent => { //Convert response into text
                        lmnt[0].innerHTML = svgContent; //Replace default content with our custom one
                    });
                }).catch((error) => {
                    console.error('Error loading SVG:', error);
                }).finally(() => {
                    $(lmnt).show(); //Show logo
                });
            }
        };
    }
]);

6. Place an image with the name ‘newErrorSvg.svg’ you want to be shown instead of the default.

Now, after the plugins rebuild you will see your new image instead of the default one. Enjoy your customized error image.