5 Replies Latest reply on May 13, 2013 1:47 PM by KirthivasanGanesan

    Customizing a Multifield Component


      I am looking for a way to edit the multifield component which currently allows you to (+,-) pathfields (page references). Is there a way to change the pathfield option so it becomes a paragraphreference option (add elements from another page)?

      To be able to reference multiple paragraph content from other pages and re-order then on another section of your site would be most valuable rather than just being able to reference another page within the site structure. Can anyone help with this?

        • 1. Re: Customizing a Multifield Component
          rush_pawan Level 4



          You can achieve this by extending the existing multifield widget located at "/libs/cq/ui/widgets/source/widgets/form/MultiField.js"


          What you have to do

          # override it with different name(say MultiField_Reference.js ), make entry of into js file inside "/libs/cq/ui/widgets/js.txt"

          # now modify the new ( MultiField_Reference.js ) js file for followoing

               - replace "CQ.Ext.reg("multifield", CQ.form.MultiField);" to your new name lets say "CQ.Ext.reg("multifield_reference", CQ.form.MultiField);"

                  the same name will be referred as xtype while using in component design

               - replace "this.field = CQ.Util.build(fieldConfig, true);" with "this.field= new CQ.form.ParagraphReference(fieldConfig,true);" inside mehtods "constructDrapDropConfig and constructButtonConfig"


          I hope after doing that you will see the paragraph reference feature in your multifield.




          • 2. Re: Customizing a Multifield Component
            rspudnik Level 1

            Hi rush_pawan,


            Thanks for your reply; however, I do not wish to override the current multifield xtype as that is used in other locations on the site. I want to build a component that uses the multifield option that can select paragraphreftences rather than just pages.


            Hope this makes it more clear?




            • 3. Re: Customizing a Multifield Component
              rush_pawan Level 4

              Sure. And above will help to do same. you can extend multifield locally for your component purpose with different name and original will work as is.

              • 4. Re: Customizing a Multifield Component

                You do not have to override multifield xtype

                You can use any other xtype in fieldConfig


                If you want to include an xtype, that doesn't exist, you have to implement it first




                CQ.Ext.ux.yourwidget= CQ.Ext.extend(CQ.form.CompositeField, {

                //do your stuff




                , CQ.Ext.ux.yourwidget);


                Multifield expects a getValue and setValue method to work

                • 5. Re: Customizing a Multifield Component



                  I am trying o create a smartfile field in my multifield component so that the user can drag and drop images from the dam. Here is my code but nothing is displayed in the field. just showing blank space. any idea how to add a smartimage component in a Multifield here is my code


                  I want to implement the same in my Custom widget which contains smartimage. But it is not showing up. Here is my Custom widget code for the smartfile but iam not getting Drag and drop jus it is showing up blank. Any idea how can I incorporate the smartfile in my Custom widget.


                  // Picture URL

                                          this.add(new CQ.Ext.form.Label( {

                                              cls : "customwidget-label",

                                              text : ""


                                          this.bannerImageURL = new CQ.form.SmartFile( {

                                              cls : "customwidget-1",

                                              fieldLabel : "Picture Link: ",


                                              allowBlank : false,

                                              anchor: '75%',

                                              maxLength : 100,

                                              cropParameter :"./image/imageCrop",

                                              ddGroups : "media",

                                              fileNameParameter : "./image/fileName",

                                              fileReferenceParameter : "./image/fileReference",

                                              mapParameter :"./image/imageMap",

                                              rotateParameter : "./image/imageRotate",

                                              name : "./image/file",

                                              requestSuffix : "/image.img.png",

                                              sizeLimit : "100",

                                              autoUploadDelay : "1",

                                              listeners : {

                                                  change : {

                                                      scope : this,

                                                      fn : this.updateHidden



                                                  dialogclose : {

                                                      scope : this,

                                                      fn : this.updateHidden







                  Once again thanks for helping me to resolve the issue. The above is another requirement. Any ideas?