Adding Widget Subtitle / Description

This dashboard script allows you to add subtitles/description right under the widget title. To add a subtitle/description add ' - ' after the widget title, followed by the subtitle text. Long text will automatically wrap. To add another line break within the subtitle, add another ' - '. For example:

"Revenue over time - This widget shows revenue over time, this is useful for predicting future revenue - Data is available from 2009 to 2013"

The script will convert the text above into:

"Revenue over time

This widget shows revenue over time, this is useful for predicting future revenue

Data is available from 2009 to 2013"

Note:

There's two versions of the script below. One for View mode, and one for Edit mode (see the comment at the top of each script). Remove the Edit mode script if you don't need to show the full description in the Edit mode.

Limitation:

This doesn't work on PDF export.

//Change widget title height to Auto
dashboard.on('widgetready',function(d) {

	$('widget-header').css('height', 'auto');

});


//Convert widget title into title and description - for VIEW mode
dashboard.on('widgetinitialized', function (dash_ev, dash_se) {
    dash_se.widget.on('ready', function (ev, se) {
        let widgetID = dash_se.widget.oid
        let selectorString = `[widgetid='${widgetID}']`
        let widgetParent = $(selectorString).parent()
        let titleElement = widgetParent.find('.widget-title__holder > widget-title');
        let titleParentElement = titleElement.parent()
        let titleAttribute = titleElement.attr('title');

        str = titleAttribute;

        strArray = str.split(' - ')

		if (strArray.length <= 1) {
			return;
		}

        strNew = '<span style=\"font-size:14px;\">' + strArray[0] + '</span>';

        for (i = 1; i < strArray.length; i++) {
            strNew = strNew + '<p style=\"font-size:10px;word-break:normal;white-space:normal;padding: 11px 0 0 0;line-height: 11px;\">' + strArray[i] + '</p>'
        }

        strHTML = jQuery.parseHTML(strNew);
        
        titleParentElement.empty().append(strHTML);
		
		dash_se.widget.redraw();

    })
});

//Convert widget title into title and description - for EDIT mode
dashboard.on('widgetinitialized', function (dash_ev, dash_se) {
    dash_se.widget.on('ready', function (ev, se) {
        let widgetID = dash_se.widget.oid
        let selectorString = `[widgetid='${widgetID}']`
        let widgetParent = $(selectorString).parent()
        let titleElement = widgetParent.find('.widget-title__holder > .transput-holder > .transput-caption');
        let titleParentElement = titleElement.parent()
        let titleAttribute = titleElement.attr('title');

        str = titleAttribute;

        strArray = str.split(' - ')

		if (strArray.length <= 1) {
			return;
		}

        strNew = '<span style=\"font-size:14px;\">' + strArray[0] + '</span>';

        for (i = 1; i < strArray.length; i++) {
            strNew = strNew + '<p style=\"font-size:10px;word-break:normal;white-space:normal;padding: 11px 0 0 0;line-height: 11px;\">' + strArray[i] + '</p>'
        }

        strHTML = jQuery.parseHTML(strNew);
        
        titleParentElement.empty().append(strHTML);
		
		dash_se.widget.redraw();

    })
});