Expand my Community achievements bar.

SOLVED

Improvise OOTB button component

Avatar

Level 5

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

goyalkritika_0-1681892769388.png

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.
1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@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.

View solution in original post

12 Replies

Avatar

Community Advisor

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"/>

 

AsifChowdhury_0-1681896988581.png

It will open a window on content/dam.

AsifChowdhury_1-1681896410964.png

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

AsifChowdhury_2-1681896574108.png

Thanks

Avatar

Level 5

@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?

Avatar

Community Advisor

@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.

Avatar

Level 5

@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?

Avatar

Community Advisor

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

First browse the file in your DAM

AsifChowdhury_0-1681967439661.png

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

AsifChowdhury_1-1681967550453.png

Paste it into your Button dialog link field

AsifChowdhury_2-1681967695726.png

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

Avatar

Level 5

@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.

Avatar

Correct answer by
Community Advisor

@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.

Avatar

Community Advisor

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

Avatar

Level 6

@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.

 

 

Avatar

Employee Advisor

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.