[ENHANCEMENT] How to set a hyperlink on a shape

[CroniD]

Hi there,

Category

• Enhancement
• Bug
• Question
• Documentation gap/issue

Version

Please specify what version of the library you are using: [3.2.1]

Please specify what version(s) of PowerPoint you are targeting: [2019 & 365]

Expected / Desired Behavior / Question

I'm trying to put a hyperlink on a shape (with and without text), but PowerPoint says the file is damaged in the end. Maybe I'm doing it wrong.

Setting the link directly via the text object works fine, but this is not an option for my use case because of how PowerPoint format the text.

I remember that in previous PowerPoint version one couldn't set a hyperlink directly on a shape, but there was a thing called "actions" or something where it was possible to set a hyperlink. Nevertheless, in 2019 & 365 one can set it directly.

Observed Behavior

PowerPoint recognizes the generated file as a damaged one, but should be valid, because PowerPoint allows hyperlinks on shapes with and without text.

Steps to Reproduce

https://jsfiddle.net/7rkpqv6z/

Again, maybe I'm doing it wrong.

[ReimaFrgos]

Pretty sure this should be converted to an Enhancement request. I don't think hyperlink code has been implemented from a quick scan through the output and the code. It's also not documented for Shapes. Just Images and Text.

You should have a lot of control over the text, are you sure it can't be formatted appropriately?

Alternatively, can you use an image instead of a shape to attach your hyperlink to? If you use a base64 image this can all be done without needing to reference an external image if thats a concern.

[CroniD]

Hi @ReimaFrgos ,

You should have a lot of control over the text, are you sure it can't be formatted appropriately?

As far as I know, MS PowerPoint formats hyperlinks with underline and special colors. Not sure where the colors come from, but they are not the colors that one sets when creating the shape or textbox. Also, setting underline to false doesn't have any effect. I found the tip (in some guide from the internet) that you should set the link to the shape instead to avoid this.

http://www.pptfaq.com/FAQ00546_Control_the_formatting_of_hyperlinked_text.htm

https://support.microsoft.com/en-us/office/remove-the-underline-from-hyperlink-text-28d22daa-7897-4091-9168-d6a12d523874?ui=en-us&rs=en-us&ad=us

Alternatively, can you use an image instead of a shape to attach your hyperlink to?

My use case involves a lot of those shapes, so creating an image on the fly for each is possible, but will increase the file size a lot and makes the code more complex.

Well, using hyperlinks on shapes would be nice, so lets change this issue to an enhancement request then. :)

[ReimaFrgos]

@CroniD There's only one other way I can think of to achieve it, which would be to create a text box where the text is set to 100% transparent, and lay this directly on top of what you want the hyperlink to be on. Can be done directly in PowerPoint, but AFAIK transparency on text isn't supported in PptxGenJS yet though.

[CroniD]

Hi @ReimaFrgos ,

transparency can be set with a complex color object defining an alpha value
But your solution won't work for a different reason: the link would be on the invisible text, but not on the text box surrounding the text.

Best regards

[gitbrent]

This feature is now implemented.

var pptx = new PptxGenJS();
var slide = pptx.addSlide();

slide.addShape(pptx.shapes.RECTANGLE, {
	x: 1,
	y: 1,
	w: "50%",
	h: "50%",
	fill: "c9c9c9",
	hyperlink: { url: "https://github.com/gitbrent/pptxgenjs", tooltip: "Visit Homepage" },
});

pptx.writeFile("PptxGenJS-issue767-" + getTimestamp());

[CroniD]

Hi @gitbrent ,

after testing it in different programs, it works fine for pure shapes. What I noticed is, that addText('a text', { shape: pptx.ShapeType.rect, [...] }) applies the hyperlink to text and the shape:
https://jsfiddle.net/7rkpqv6z/

Maybe, if setting a hyperlink via addText that has a shape set in the options object, it should only be applied on the shape or there should be an option to apply it on shape, text or both. Otherwise, this issue is still not completly solved. :(

Best regards