Improvise OOTB button component

[goyalkritika]

My requirement is to modify the OOTB button component so that I can put in an asset link as well in the 'link' field.

How can I achieve this?

OOTB link field resourceType is 

granite/ui/components/coral/foundation/include.

I tried changing it to 

granite/ui/components/coral/foundation/form/pathfield. This enabled the path to add asset but the link is not getting saved in the dialog. How to resolve this issue.

[AsifChowdhury]

Hello @goyalkritika,

If you want to extend the OOTB Button component with your custom feature you can extend the OOTB button component with your own custom button component using 

sling:resourceSuperType="core/wcm/components/button/v2/button"

Then you can modify your custom button component to your requirements.

You can add a pathfield in your custom button component

<buttonLink
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
   fieldLabel="Button Link Path"
   name="./buttonLink"
   rootPath="/content/dam"/>

It will open a window on content/dam.

When you will select one file it will be available in your component dialog properties.

Thanks

[goyalkritika]

@AsifChowdhury the functionality that I'm looking for is that on click of the button, I should be able to download the asset. How can I achieve this?

[AsifChowdhury]

@goyalkritika You just have to copy the asset content dam path link and paste it into the OOTB button component link field (do not need to modify to pathfield) and submit. You should be able to download it.

[goyalkritika]

@AsifChowdhury OOTB button component link field is a path selector. It opens up at /content with DAM not present in the list. How can I then put the asset path in the field?

[AsifChowdhury]

@goyalkritika It seems you haven't even tried it by yourself.

First browse the file in your DAM

Copy the path of your file (e.g. "/content/dam/xyz.xyz")

Paste it into your Button dialog link field

it will download the file when you click on the button.

[goyalkritika]

@AsifChowdhury business people are going to author the pages once we handover the project to them. And this will not be acceptable that we head over to dam folder and copy the asset path and then put it in the link field. The author should be able to select the asset from the link field selector itself.

[AsifChowdhury · Accepted solution]

@goyalkritika In that case, you need to build your custom Button Component with "pathfield" or you can extend the OOTB Button component in your custom component and give this custom feature in your component.

[AsifChowdhury]

@goyalkritika or you can introduce a new component named "Download" which will have this download feature with pathfield

[salamswapnil]

@goyalkritika 

I am assuming you are overriding the link field here.

Have you set name property on the new pathfield that you have overriden? Sometimes field values are not saved because of missing name property on field.

[goyalkritika]

@salamswapnil adding the name field did not work.

[salamswapnil]

@goyalkritika can you please provide the content.xml of your button component?

[ManviSharma]

Hi,

Modifying an OOTB component can be a bit tricky and can cause issues in the future if not done properly. I would recommend creating a new custom button component that extends the OOTB button component and includes the required modifications.

To add an asset link to the 'link' field, you can create a custom dialog for the button component with a pathfield widget that allows users to select an asset. Then, in the component's logic, you can retrieve the path of the selected asset and add it to the link field's value.

Here are the general steps to create a custom button component:

1. Create a new folder with the name of your component under /apps.

2. Create a new cq:clientLibraryFolder node under your component folder to store your client-side scripts and styles.

3. Create a new dialog for your button component under the /apps folder using the Granite UI components. Add a pathfield widget to the dialog to allow users to select an asset.

4. Create a new component node under /apps that extends the OOTB button component by setting the 'sling:resourceSuperType' property to the OOTB button component's resource type.

5. Create a new .content.xml node for your component that defines the properties and nodes for your component. This should include the pathfield property for the link field.

6. Override the logic for the button component to retrieve the path of the selected asset and add it to the link field's value.

Once you have created your custom button component, you can use it instead of the OOTB button component in your pages.

I hope this helps! Let me know if you have any further questions.