Custom error notification image

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:

ALT Text: A comparison table with two columns titled "Original" and "Custom." Each column contains the same message about an error querying a data model, mentioning a specific dimension related to healthcare. The "Original" message features a yellow warning icon, while the "Custom" message has a red explosion icon. Both messages prompt the user to "Try again."

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. In the attachment, you can find the completed plugin.