Improvise OOTB button component | Community
Skip to main content
G
goyalkritika
Level 4
April 19, 2023
Solved

Improvise OOTB button component

  • April 19, 2023
  • 3 replies
  • 2115 views

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.
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by AsifChowdhury

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


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

3 replies

AsifChowdhury
Community Advisor
AsifChowdhuryCommunity Advisor
Community Advisor
April 19, 2023

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

    G
    goyalkritikaAuthor
    Level 4
    April 19, 2023

    @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
      Community Advisor
      AsifChowdhuryCommunity Advisor
      Community Advisor
      April 19, 2023

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

        S
        Community Advisor
        salamswapnilCommunity Advisor
        Community Advisor
        April 19, 2023

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

         

         

          G
          goyalkritikaAuthor
          Level 4
          April 19, 2023

          @salamswapnil adding the name field did not work.

            S
            Community Advisor
            salamswapnilCommunity Advisor
            Community Advisor
            April 19, 2023

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

              ManviSharma
              Adobe Employee
              ManviSharmaAdobe Employee
              Adobe Employee
              April 22, 2023

              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.

                Terms & ConditionsAccessibility statement

                Loading footer...