Customizing the Sisense User Interface with Interactive Buttons and Icons

[JeremyFriedel]

Customizing the Sisense User Interface with Interactive Buttons and Icons

Sisense plugins and scripts enable extensive customization of the Sisense user interface, allowing developers to add interactive elements such as buttons and icons to enhance functionality and user experience. A common use case of plugins involves adding clickable icons or buttons that trigger specific plugin features or open custom UI elements. This article outlines the process for adding these interactive elements using a practical example.

Icon Example

Key Steps for Adding Clickable Buttons

Follow this general flow to successfully add a custom clickable buttons or icon into the Sisense UI:

1. Choose the UI placement: Determine the exact area of the Sisense UI where the button or icon will appear.
2. Identify the target parent container: Find the appropriate parent element in the DOM that will contain the new button.
3. Prevent duplication: Implement checks to avoid adding duplicate buttons, if Sisense dashboard or prism event used fires more than once.
4. Create the HTML button element: Construct the button programmatically and apply necessary styling, adding either button text or icon image.
5. Attach Click Listener: Use JavaScript event listeners to define the button or icon interactive behavior.

Practical Example: Adding a Button to the Filter Header

Below is a clear and reusable example demonstrating the process of adding a clickable button to the filters header in a Sisense dashboard. This can easily be adapted for different parts of the dashboard or various plugin functionalities.

function addCustomButton() {
    // Step 1: Locate the UI container (in this example, the header to the right hand filter panel)
    const filtersContainer = document.querySelector('.filters-headline');

    // Step 2: Avoid duplicate button addition
    if (filtersContainer && !filtersContainer.querySelector('.custom-btn')) {
        // Identify placement context, in this example next to the spacer element to the right of the filters label
        const spacerElement = filtersContainer.querySelector('.spacer');

        if (spacerElement) {
            // Step 3: Create the button with appropriate classes
            const customButton = document.createElement('button');
            customButton.classList.add('btn', 'btn--icon', 'btn--dark', 'btn--on-grey', 'custom-btn');

            // Insert an SVG icon (example provided)
            customButton.innerHTML = `
                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0,0,256,256">
                    <g fill="#5b6372" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
                        <g transform="scale(8,8)">
                            <path d="M9,4c-1.64453,0 -3,1.35547 -3,3v18c0,1.64453 1.35547,3 3,3h17v-24zM9,6h3v11.41406l4,-4l4,4v-11.41406h4v16h-15c-0.35156,0 -0.68359,0.07422 -1,0.1875v-15.1875c0,-0.56641 0.43359,-1 1,-1zM14,6h4v6.58594l-2,-2l-2,2zM9,24h15v2h-15c-0.56641,0 -1,-0.43359 -1,-1c0,-0.56641 0.43359,-1 1,-1z"></path>
                        </g>
                    </g>
                </svg>
            `; = `
                <!-- Your SVG icon here -->
            `;

            // Step 4: Define button functionality
            customButton.addEventListener('click', function () {
                // Replace with your plugin's custom action
                yourPlugin.action();
            });

            // Insert button into UI
            spacerElement.insertAdjacentElement('afterend', customButton);
        }
    }
}

// Add button upon dashboard load
prism.on("dashboardloaded", function (e, args) {
    args.dashboard.on("widgetinitialized", addCustomButton);
});

By following these principles and adapting the provided example, you can effectively enrich the Sisense interface, tailoring the UI to specific custom workflows and interactions.