cancel
Showing results for 
Search instead for 
Did you mean: 

Creating a hyperlink in widget title; having it show in editing and viewer mode

Astroraf
10 - ETL
10 - ETL

I am using this script to create a hyperlink in a widget title but the hyperlink only shows in editing mode and not in the viewer mode. Trying to see what I can do to have this show in viewer mode as well. 

widget.on('refreshed', () => {

                const titleElement = element.parent().find('.transput-holder');                            if (!titleElement) return;                                                                titleElement.empty(); 
                titleElement.append('<a href="https://website.com" target="_blank" >MSI Info</a>'); 
                if (!widget.dashboard.editing) {
                titleElement.parent().show(); } 
})

 This is what I see in editing mode and viewer mode:

Screen Shot 2024-07-02 at 14.02.06.pngScreen Shot 2024-07-02 at 14.02.14.png

@DRay @harikm007 

 

1 ACCEPTED SOLUTION

TriAnthony
Community Team Member
Community Team Member

Hi @Astroraf,

In Viewer mode, the element for the widget title is widget-title, under the div class widget-title__holder. You can find below the updated the script to add the hyperlink in Viewer mode as well as Edit mode.

Note that I removed the if(!titleElement) return; line, because even if a title is not provided for the widget, these elements still exist. Moreover, even if the elements don't exist, this check will still return an object (empty, but is not null/falsy). To check if an element exists, you can do use this instead: if(titleElement.length === 0)

 

widget.on('ready', () => {

	const titleElementEditMode = element.parent().find('.transput-holder');
	const titleElementViewMode = element.parent().find('.widget-title__holder > widget-title');
	
	titleElementEditMode.empty();
	titleElementViewMode.empty();

	titleElementEditMode.append('<a href="https://website.com" target="_blank" >MSI Info</a>'); 
	titleElementViewMode.append('<a href="https://website.com" target="_blank" >MSI Info</a>'); 

})

 

Tri Anthony Situmorang

View solution in original post

1 REPLY 1

TriAnthony
Community Team Member
Community Team Member

Hi @Astroraf,

In Viewer mode, the element for the widget title is widget-title, under the div class widget-title__holder. You can find below the updated the script to add the hyperlink in Viewer mode as well as Edit mode.

Note that I removed the if(!titleElement) return; line, because even if a title is not provided for the widget, these elements still exist. Moreover, even if the elements don't exist, this check will still return an object (empty, but is not null/falsy). To check if an element exists, you can do use this instead: if(titleElement.length === 0)

 

widget.on('ready', () => {

	const titleElementEditMode = element.parent().find('.transput-holder');
	const titleElementViewMode = element.parent().find('.widget-title__holder > widget-title');
	
	titleElementEditMode.empty();
	titleElementViewMode.empty();

	titleElementEditMode.append('<a href="https://website.com" target="_blank" >MSI Info</a>'); 
	titleElementViewMode.append('<a href="https://website.com" target="_blank" >MSI Info</a>'); 

})

 

Tri Anthony Situmorang