Cognos Analytics

Cognos Analytics

Connect, learn, and share with thousands of IBM Cognos Analytics users! 

 View Only

  • 1.  Cognos Analytics icons

    Posted Tue June 21, 2022 09:17 AM
    I've been customizing my Cognos Analytics 11.2 home page with the help of Tim Aston's blog post (Customizing the Cognos Analytics 11.2 home page) but I was wondering about the icons that are used on the home page.

    When adding custom quick launch tiles, I also want to add icons to them, but I can't find anywhere a list of icons that are available to use. The existing icons seem to be under a class called 'ba-common-svgIcon' but I couldn't find any information about that. I tried adding my own icons too but that didn't work. Any help? Thanks!

    ------------------------------
    Emily
    ------------------------------

    #CognosAnalyticswithWatson


  • 2.  RE: Cognos Analytics icons

    Posted Tue June 21, 2022 10:04 AM
    Hi Emily,

    The icons are based on IBM Carbon icons.

    In the sample from the blog post, the icon is:
    "icon": "common-collaborate-group",
    If you look in this page, you will see all the available icons:
    https://carbon-elements.netlify.app/icons/examples/preview/

    Well, at this time, I am not able to find in which file you can locate the icon name, such as common-collaborate-group... It might be a "dummy" name created in the javascript file, and you just need to add the same name to the file in image folder for your extension.

    Best regards,

    ------------------------------
    Patrick Neveu
    Positive Thinking Company
    ------------------------------

    Original Message


  • 3.  RE: Cognos Analytics icons

    Posted Tue June 21, 2022 10:36 AM
    You can get the full list of SVG symbols by pasting this into the browser developer console (press F12) and pasting in the following:

    [...document.getElementById('images_ba_portal_common_icons_svg').querySelectorAll('symbol')].map(x=>x.id).join(', ')

    In my 11.2.1 environment I get the following list:
    'add-new_32, admin-administrator_24, admin-my_parameters_icon, admin-pause, admin-play, administrator_24, analytics_32, authoring-database, authoring-lock, authoring-page, authoring-query, authoring-refresh, authoring-run, authoring-unlock, authoring-view, ba_content_nav-activereport_16, ba_content_nav-arrow_down_16, ba_content_nav-arrow_up_16, ba_content_nav-back-previous_16, ba_content_nav-cloud_32, ba_content_nav-custom-folder_24, ba_content_nav-data_16, ba_content_nav-data_model_16, ba_content_nav-folder-overflow_16, ba_content_nav-folder-portal-pages_16, ba_content_nav-folder-portal-pages_24, ba_content_nav-folder_16, ba_content_nav-job_16, ba_content_nav-password-key, ba_content_nav-personal_24, ba_content_nav-powerplayreport_16, ba_content_nav-recent_24, ba_content_nav-reporttemplate_16, ba_content_nav-role_24, ba_content_nav-save_16, ba_content_nav-search_24, ba_content_nav-shared_24, ba_content_nav-social-insights-project_16, ba_content_nav-sort_16, ba_content_nav-template_32, ba_content_nav-text-file_24, ba_content_nav-url_32, ba_content_nav-workspace-16, ba_menu_24, ba_portal-app_24, ba_portal-create-new_24, ba_portal-help_24, ba_portal-home_16, ba_portal-home_24, ba_portal-notifications_24, ba_portal-recent_24, ba_portal-stacked-scrolling--1, ba_portal-user_24, ca-modeller-breaklink, ca-modeller-compass_16, ca-modeller-data-cache-expiry_16, ca-modeller-eye, ca-modeller-fullJoin, ca-modeller-innerJoin, ca-modeller-intent, ca-modeller-join, ca-modeller-leftJoin, ca-modeller-rightJoin, ca-modeller-sort, ca-modeller-split-column_16, ca-modeller-table, ca-modeller-validateGrid, ca_portal-apps_24, ca_portal-home_24, ca_portal-other_24, classic-run, cloud_32, column_heading, common-CA_Avatar_Black_24, common-CA_Avatar_Colour_24, common-CA_Avatar_Colour_64, common-MyContent, common-TreeFolderClosed, common-TreeFolderOpened, common-about_dialog_logo, common-accounts, common-add-folder, common-add-new, common-add, common-add_32, common-add_to_group, common-add_to_role, common-add_user, common-admin, common-agent, common-agentDefinition, common-analysis_32, common-analysis_studio, common-analysis_studio_report, common-app, common-appbar, common-appendFile, common-archive, common-bee, common-calculation, common-calculation_fact, common-calendar, common-catalog, common-center-align, common-checkbox, common-checkbox_checked, common-checkbox_partiallyChecked, common-checkmark, common-chevron_left, common-chevron_right, common-clock-time, common-close-cancel-error, common-close_16, common-close_icon, common-cloud, common-coachmark-inner, common-coachmark-outer, common-cognos_analytics, common-cognoslogo, common-collaborate-group, common-collections, common-comment_24, common-companion-apps-arrow, common-compressed-file, common-configure-manage, common-content, common-contextmenus, common-controller, common-copy, common-copy_16, common-create, common-create_folder, common-create_group, common-create_role, common-create_user, common-csv_icon, common-customcontent, common-cut_16, common-cut_24, common-dashboard, common-dashboard_24, common-dataMovement, common-data_source, common-database-server, common-dataset, common-dataset_number, common-dataset_text, common-debug, common-default_perm, common-deny_perm, common-diagnostic_logging, common-disable_schedule, common-disabled, common-discover, common-document, common-document_export, common-document_import, common-download, common-draggable_32, common-drill_through_definition, common-drillgroup, common-dropdown, common-edit, common-email, common-email_icon, common-embed, common-enable_schedule, common-error, common-error_dialog, common-event-announcement, common-excel_icon, common-exploration, common-explore, common-failed, common-filter-small, common-filter, common-folder-black, common-folder-overflow_24, common-folder-small, common-folder-white, common-folder, common-folder_16, common-format, common-fullscreen, common-global-parameters, common-grant_perm, common-group, common-handle, common-hat_32, common-hierarchy, common-highlight-small, common-highlight, common-home, common-html_icon, common-image, common-import, common-info-moreinfo, common-information, common-information_32, common-insights, common-interactiveReport, common-job, common-justify-align, common-launch, common-left-align, common-left_collapse, common-level, common-licenses, common-link, common-linkdecorator, common-location, common-log, common-manage_24, common-measureDimension, common-media, common-menu-overflow, common-menuoverflow-vertical, common-menuoverflow, common-metrics, common-metricsDataSource, common-metricsExport, common-metricsImport, common-metricsMaintenance, common-metricsNewPackage, common-missing, common-mobile_icon, common-models, common-module, common-multi_tenant, common-mypreferences, common-namedSet, common-named_set, common-namespace, common-namespaceFolder, common-namespace_24, common-navbar, common-nodrop, common-notify_navbar_none, common-notify_read, common-notify_sidebar_new, common-notify_unread, common-open-tab, common-other_apps, common-package, common-pagelet, common-paste_16, common-paste_24, common-pause, common-pdf_icon, common-personal, common-pin, common-planning, common-play, common-policy_32, common-powerPlay8_report, common-powerPlay8_view, common-powerPlayCube, common-powerPlay_designMode, common-powerPlay_report, common-previous, common-print_icon, common-properties, common-query, common-queryItem, common-queryItem_fact, common-queryItem_time, common-queryReport, common-querySubject, common-querySubject_shortcut, common-question-mark, common-redo, common-refresh, common-refreshFile, common-regularDimension, common-remove-delete-grey, common-remove-delete, common-remove-trash, common-remove_schedule, common-report, common-report_32, common-report_view, common-repository-archive, common-required, common-retrieve, common-right-align, common-right_expand, common-role, common-run, common-save, common-saveExternal, common-savedoutput_report, common-savedoutput_reporthistory, common-schedule, common-schema, common-search, common-set_priority, common-settings-manage, common-settings, common-settings_32, common-shape, common-share-rss-feed, common-share, common-share_24, common-shared_folder, common-shortcut, common-signin, common-signout, common-slider-left-grip, common-slider-middle-grip, common-slider-right-grip, common-smarts-conversation_32, common-snapshotableDataModule, common-sort-icon, common-sort, common-story, common-subscribe_icon, common-subtract--alt_32, common-success, common-successful, common-swap, common-syntax-checker_24, common-teamFolders, common-template-select, common-terminate_sessions, common-text-bold, common-text-italic, common-text-size_24, common-text-underline, common-text, common-titan-arrow-down, common-titan-dialog-close, common-titan-model, common-titan_help, common-to-end, common-to-start, common-tools-toolbox, common-tools_32, common-undo, common-unloaded_schema, common-unsupportedformat_icon, common-upload, common-upload_measure, common-url, common-use_credentials, common-user-profile, common-user, common-versions, common-view, common-view_24, common-view_decorator, common-visualization, common-warning-hollow, common-warning, common-webpage, common-workspace, common-xml_icon, dashboard-calculate, dashboard-custom-widgets, dashboard-eventgroup-appbar, dashboard-fullscreen, dashboard-intent_based_authoring, dashboard-pin, dashboard-widget, data-notebook, dismiss_16, error_24, explore-card_list, get-information_16, modeller-TreeFolderClosed, modeller-TreeFolderOpened, modeller-bee_small, modeller-breaklink, modeller-calculation, modeller-calculation_attribute, modeller-calculation_fact, modeller-calculation_identifier, modeller-chevron, modeller-databases, modeller-eye, modeller-files, modeller-intent, modeller-join, modeller-joinAddIcon, modeller-joinCard121Icon, modeller-joinCard12NIcon, modeller-joinCardN21Icon, modeller-joinCardN2NIcon, modeller-joinLinkIcon, modeller-joinRefreshIcon, modeller-joinTypeFullIcon, modeller-joinTypeInnerIcon, modeller-joinTypeLeftIcon, modeller-joinTypeRightIcon, modeller-models, modeller-module, modeller-queryItem, modeller-queryItemNavGroup, modeller-queryItem_fact, modeller-queryItem_identifier, modeller-queryItem_time, modeller-querySubject, modeller-querySubject_shortcut, modeller-remove, modeller-repo, modeller-report, modeller-schema, modeller-snapshot, modeller-table, modeller-validateGrid, presentation-file_32, slot_colorBy, suppress-nulls_16, tree-view_32, upload-measure, visualizations-crosstab, visualizations-dataplayer, visualizations-hierarchy, visualizations-summary, visualizations-table'

    ------------------------------
    Paul Mendelson
    ------------------------------

    Original Message


  • 4.  RE: Cognos Analytics icons

    Posted Tue June 21, 2022 10:40 AM
    Thank you Paul, very useful.

    Best regards,

    ------------------------------
    Patrick Neveu
    Positive Thinking Company
    ------------------------------

    Original Message


  • 5.  RE: Cognos Analytics icons

    Posted Wed June 22, 2022 03:26 AM
    Thanks for the replies, Patrick and Paul! This helped a lot.

    ------------------------------
    Emily
    ------------------------------

    Original Message


  • 6.  RE: Cognos Analytics icons

    Posted 18 days ago

    I had a need to see all the icons so I wrote this script that will open a new page and display all the icons shown from your array of svg's. It makes it easier to view each one and if you click on it then it saves the symbol id to the clipboard. If you view it in the list view you can actually copy and paste the complete svg using the use reference id element if you want. This is helpful if you are doing developing and want to quickly add a cognos svg to your report. 

    function openAllSvgsInNewPage() {
    const symbols = document.getElementById('images_ba_portal_common_icons_svg').querySelectorAll('symbol');
    
    // Create SVG elements for each symbol
    let svgElements = '';
    symbols.forEach(symbol => {
        const symbolContent = symbol.innerHTML;
        const symbolId = symbol.id || 'unnamed-symbol';
        const viewBox = symbol.getAttribute('viewBox') || '0 0 24 24';
        
        svgElements += `
            <div class="icon-container" title="${symbolId}" data-symbol-id="${symbolId}" data-viewbox="${viewBox}">
                <span class="symbol-id">${symbolId}</span>
                <svg viewBox="${viewBox}" xmlns="http://www.w3.org/2000/svg">
                    ${symbolContent}
                </svg>
                <span class="viewbox">${viewBox}</span>
                <input type="number" class="width-input" value="16" min="1" max="999">
                <input type="number" class="height-input" value="16" min="1" max="999">
                <button class="copy-svg-btn">Copy SVG</button>
                <div class="tooltip">${symbolId}</div>
            </div>
        `;
    });
    
    // Create the complete HTML document
    const svgDoc = `
        <!DOCTYPE html>
        <html>
        <head>
            <title>All SVG Icons (${symbols.length} icons)</title>
            <style>
                body { 
                    margin: 0; 
                    padding: 20px 20px 60px 20px; 
                    font-family: Arial, sans-serif; 
                    background: #f5f5f5;
                }
                .header {
                    max-width: 1400px;
                    margin: 0 auto 30px auto;
                    text-align: center;
                }
                .view-toggle {
                    display: inline-flex;
                    background: white;
                    border: 1px solid #ddd;
                    border-radius: 6px;
                    overflow: hidden;
                    margin-top: 10px;
                }
                .view-toggle button {
                    padding: 8px 16px;
                    border: none;
                    background: white;
                    cursor: pointer;
                    transition: background 0.2s;
                    font-size: 14px;
                }
                .view-toggle button.active {
                    background: #4CAF50;
                    color: white;
                }
                .view-toggle button:hover:not(.active) {
                    background: #f0f0f0;
                }
                
                /* Grid View Styles */
                .container.grid-view {
                    display: grid;
                    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
                    gap: 15px;
                    max-width: 1400px;
                    margin: 0 auto;
                    overflow: visible;
                }
                .grid-view .icon-container {
                    position: relative;
                    background: white;
                    border: 1px solid #ddd;
                    border-radius: 8px;
                    padding: 15px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                    transition: all 0.2s ease;
                    aspect-ratio: 1;
                    overflow: visible;
                }
                .grid-view .symbol-id,
                .grid-view .viewbox,
                .grid-view .width-input,
                .grid-view .height-input,
                .grid-view .copy-svg-btn {
                    display: none;
                }
                
                /* List View Wrapper */
                .list-view-wrapper {
                    max-width: 1400px;
                    margin: 0 auto;
                    background: white;
                    border-radius: 8px;
                    overflow: hidden;
                    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
                    display: none;
                }
                .list-view-wrapper.active {
                    display: block;
                }
                
                /* List Header */
                .list-header {
                    display: grid;
                    grid-template-columns: 2fr 60px 120px 80px 80px 120px;
                    gap: 15px;
                    padding: 15px 20px;
                    background: #f8f9fa;
                    font-weight: bold;
                    font-size: 14px;
                    color: #333;
                    border-bottom: 2px solid #dee2e6;
                    position: sticky;
                    top: 0;
                    z-index: 10;
                }
                .list-header span {
                    text-align: center;
                }
                .list-header span:first-child {
                    text-align: left;
                }
                
                /* List View Container */
                .container.list-view {
                    display: block;
                }
                .list-view .icon-container {
                    display: grid;
                    grid-template-columns: 2fr 60px 120px 80px 80px 120px;
                    gap: 15px;
                    align-items: center;
                    padding: 12px 20px;
                    border-bottom: 1px solid #eee;
                    cursor: pointer;
                    transition: background 0.2s ease;
                    position: relative;
                }
                .list-view .icon-container:last-child {
                    border-bottom: none;
                }
                .list-view .symbol-id {
                    font-family: 'Courier New', monospace;
                    font-size: 13px;
                    color: #333;
                    word-break: break-all;
                    min-width: 0;
                    text-align: left;
                }
                .list-view .viewbox {
                    font-family: 'Courier New', monospace;
                    font-size: 12px;
                    color: #666;
                    text-align: center;
                }
                .list-view .width-input,
                .list-view .height-input {
                    width: 60px;
                    padding: 4px 6px;
                    border: 1px solid #ddd;
                    border-radius: 4px;
                    font-size: 12px;
                    text-align: center;
                    justify-self: center;
                }
                .list-view .width-input:focus,
                .list-view .height-input:focus {
                    outline: none;
                    border-color: #4CAF50;
                    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
                }
                .list-view .copy-svg-btn {
                    padding: 6px 12px;
                    background: #007bff;
                    color: white;
                    border: none;
                    border-radius: 4px;
                    font-size: 12px;
                    cursor: pointer;
                    transition: background 0.2s;
                    justify-self: center;
                }
                .list-view .copy-svg-btn:hover {
                    background: #0056b3;
                }
                .list-view .copy-svg-btn:active {
                    transform: translateY(1px);
                }
                .list-view svg {
                    width: 24px;
                    height: 24px;
                    fill: #333;
                    justify-self: center;
                }
                .list-view .tooltip {
                    display: none;
                }
                
                /* Common Styles */
                .icon-container:hover {
                    background: #f0f8ff;
                    z-index: 1001;
                }
                .grid-view .icon-container:hover {
                    border-color: #4CAF50;
                    transform: translateY(-2px);
                    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
                }
                .icon-container:active {
                    transform: translateY(0px);
                    background: #e8f5e8;
                }
                .icon-container.copied {
                    background: #d4edda !important;
                }
                .grid-view .icon-container.copied {
                    border-color: #28a745;
                }
                .grid-view svg {
                    width: 32px;
                    height: 32px;
                    fill: #333;
                }
                .tooltip {
                    position: absolute;
                    bottom: -40px;
                    left: 50%;
                    transform: translateX(-50%);
                    background: #333;
                    color: white;
                    padding: 6px 10px;
                    border-radius: 4px;
                    font-size: 12px;
                    white-space: nowrap;
                    opacity: 0;
                    visibility: hidden;
                    transition: all 0.2s ease;
                    z-index: 1002;
                    pointer-events: none;
                    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
                }
                .tooltip::before {
                    content: '';
                    position: absolute;
                    top: -5px;
                    left: 50%;
                    transform: translateX(-50%);
                    border-left: 5px solid transparent;
                    border-right: 5px solid transparent;
                    border-bottom: 5px solid #333;
                }
                .grid-view .icon-container:hover .tooltip {
                    opacity: 1;
                    visibility: visible;
                }
                h1 {
                    text-align: center;
                    color: #333;
                    margin-bottom: 10px;
                }
                .copy-feedback {
                    position: fixed;
                    top: 20px;
                    right: 20px;
                    background: #28a745;
                    color: white;
                    padding: 10px 15px;
                    border-radius: 4px;
                    font-size: 14px;
                    opacity: 0;
                    transform: translateY(-20px);
                    transition: all 0.3s ease;
                    z-index: 2000;
                }
                .copy-feedback.show {
                    opacity: 1;
                    transform: translateY(0);
                }
            </style>
        </head>
        <body>
            <div class="header">
                <h1>All SVG Icons (${symbols.length} total)</h1>
                <div class="view-toggle">
                    <button id="gridViewBtn" class="active">Grid View</button>
                    <button id="listViewBtn">List View</button>
                </div>
            </div>
            
            <div id="container" class="container grid-view">
                ${svgElements}
            </div>
            
            <div id="listViewWrapper" class="list-view-wrapper">
                <div class="list-header">
                    <span>Symbol ID</span>
                    <span>Icon</span>
                    <span>ViewBox</span>
                    <span>Width</span>
                    <span>Height</span>
                    <span>Copy SVG</span>
                </div>
                <div id="listContainer" class="container list-view">
                    ${svgElements}
                </div>
            </div>
            
            <div id="copyFeedback" class="copy-feedback"></div>
            
            <script>
                function copyToClipboard(text) {
                    navigator.clipboard.writeText(text).then(function() {
                        showCopyFeedback('Copied: ' + text);
                    }).catch(function(err) {
                        // Fallback for older browsers
                        const textArea = document.createElement('textarea');
                        textArea.value = text;
                        document.body.appendChild(textArea);
                        textArea.select();
                        document.execCommand('copy');
                        document.body.removeChild(textArea);
                        showCopyFeedback('Copied: ' + text);
                    });
                }
                
                function showCopyFeedback(message) {
                    const feedback = document.getElementById('copyFeedback');
                    feedback.textContent = message;
                    feedback.classList.add('show');
                    
                    setTimeout(() => {
                        feedback.classList.remove('show');
                    }, 2000);
                }
                
                function toggleView(viewType) {
                    const gridContainer = document.getElementById('container');
                    const listWrapper = document.getElementById('listViewWrapper');
                    const gridBtn = document.getElementById('gridViewBtn');
                    const listBtn = document.getElementById('listViewBtn');
                    
                    if (viewType === 'grid') {
                        gridContainer.style.display = 'grid';
                        listWrapper.classList.remove('active');
                        gridBtn.classList.add('active');
                        listBtn.classList.remove('active');
                    } else {
                        gridContainer.style.display = 'none';
                        listWrapper.classList.add('active');
                        listBtn.classList.add('active');
                        gridBtn.classList.remove('active');
                    }
                }
                
                function copySvgCode(symbolId, width, height) {
                    const svgCode = \`<svg style="width:\${width}px; height:\${height}px;"><use xlink:href="#\${symbolId}"></use></svg>\`;
                    copyToClipboard(svgCode);
                }
                
                // Add event listeners
                document.addEventListener('DOMContentLoaded', function() {
                    const gridContainer = document.getElementById('container');
                    const listContainer = document.getElementById('listContainer');
                    const gridBtn = document.getElementById('gridViewBtn');
                    const listBtn = document.getElementById('listViewBtn');
                    
                    // Setup event listeners for both grid and list containers
                    [gridContainer, listContainer].forEach(container => {
                        const iconContainers = container.querySelectorAll('.icon-container');
                        
                        iconContainers.forEach(iconContainer => {
                            iconContainer.addEventListener('click', function(e) {
                                // Only copy ID if clicking the container itself in grid view and not a button/input
                                if (container.classList.contains('grid-view') && 
                                    !e.target.classList.contains('copy-svg-btn') && 
                                    !e.target.classList.contains('width-input') && 
                                    !e.target.classList.contains('height-input')) {
                                    const symbolId = this.getAttribute('data-symbol-id');
                                    copyToClipboard(symbolId);
                                    
                                    // Visual feedback
                                    this.classList.add('copied');
                                    setTimeout(() => {
                                        this.classList.remove('copied');
                                    }, 1000);
                                }
                            });
                            
                            // Copy SVG button functionality
                            const copySvgBtn = iconContainer.querySelector('.copy-svg-btn');
                            const widthInput = iconContainer.querySelector('.width-input');
                            const heightInput = iconContainer.querySelector('.height-input');
                            
                            copySvgBtn.addEventListener('click', function(e) {
                                e.stopPropagation();
                                const symbolId = iconContainer.getAttribute('data-symbol-id');
                                const width = widthInput.value || '16';
                                const height = heightInput.value || '16';
                                copySvgCode(symbolId, width, height);
                            });
                            
                            // Prevent inputs from triggering container click
                            widthInput.addEventListener('click', function(e) {
                                e.stopPropagation();
                            });
                            heightInput.addEventListener('click', function(e) {
                                e.stopPropagation();
                            });
                        });
                    });
                    
                    // View toggle functionality
                    gridBtn.addEventListener('click', () => toggleView('grid'));
                    listBtn.addEventListener('click', () => toggleView('list'));
                });
            </script>
        </body>
        </html>
    `;
    
    // Open in new window
    const newWindow = window.open('', '_blank');
    newWindow.document.write(svgDoc);
    newWindow.document.close();
}

// Usage - call this function to open all icons
openAllSvgsInNewPage();





    ------------------------------
    Michael Webb
    ------------------------------

    Original Message


  • 7.  RE: Cognos Analytics icons

    Posted 17 days ago

    Hi Michael,

    Very nice, and useful.

    Best regards,



    ------------------------------
    Patrick Neveu
    BSL Consulting
    IBM Champion
    ------------------------------

    Original Message


Related Content