2 Replies Latest reply on Sep 20, 2012 2:16 AM by Andras Fejer

    Multifield Assitance

    Jayatl Level 1

      Hello,

       

      I'm trying to implement a multifield dialog that allows the author to enter Text and an URL that I would wrap with a standard <a> tag.  Tried to follow the Using ExtJS example found here http://dev.day.com/docs/en/cq/current/developing/widgets.html; however the Using ExtJS Widgets (v01) package form the package share does not load the multifield component correctly (clicking Add Item doesn't do anything) in 5.5 Update 1.

       

      I can figure out how to iterate through the multifield; where I'm a little fuzzy is

       

      1. How do I define 2 or more fields in the multifield so that the Author can enter a string and and URL (using pathfield xtype)?
      2. How to I reference each fields individually in my for loop?  I can see how to do so when there's only one item per multifield entry, not sure how to do this with 2 or more items (array???)
      3. Which ExtJS files do I actually have to include in my components clientlibs folder, all of them or something else (multifield.js isn't part of that training package)?

       

      Thanks for any assistance/demos you can point me to.

        • 1. Re: Multifield Assitance
          smurfsky101 Level 1

          Ok -- to start, it seems as if your CQ instance is not able to find the custom widget (xtype of ejstcustom). I would recommend testing by appending the query string '?debug=console' to your CQ page that contains the Custom Widgets component, and look for a 'failed to load resource'. Most likely this is because the CQ page is unable to find the JS / CSS libraries required -- in the category of 'cq.extjstraining'. I would recommend inserting a conditional block in your CQ template's jsp that checks to see if the WCMMode is active - and will then include the clientlib. For testing just add this line in your template's jsp

           

          <cq:includeCLientLib categories="cq.extjstraining" />

           

          I've found that the requirement to implement a multifield with say (textfield,pathfield,pathfield) is a pretty common requirement, there are many ways to do this - a simple way would be to create a custom extJS based widget that has the xtypes manually defined - a more complicated way would be to create an extensible 'multifield multifield' widget. I'll not go into the second option here (lotta JS code)

           

          Ok - in the 'using exJS' widgets example - the constructor has 3 different components in it

          1) hiddenfield (cq.ext.form.textfield)

          2) allowField (cq.ext.form.combobo

          3) otherField (cq.ext.form.textfield)

           

          I would recommend inserting dummy data in those fields once you get the page set up, and looking where it stores the properties in /content/bla - for that respective page. You can manipulate the extJS based widget to store the propertiees either directly on that resource path, or create children for each item you save.

          i.e.

           

          /content/app/page/jcr:content/mainpar/customwidgets/asdfasd

           

          Unfortunately, the OOTB multifield component only supports saving the results of these objects into a String[] property on the component resource path itself. If you want to get fancy and instead have them saved as indexed child nodes you will have to do some more extjs magic. In the example provided, they use '/' as a split operator for each property on the string array, and then cast them / update the fields. (see the setValue(), getRawValue(), and processRecord() functions in CustomWidget.js

           

          Hope this was helpful!

          • 2. Re: Multifield Assitance
            Andras Fejer Level 1

            smurfsky101 wrote:

             

            Unfortunately, the OOTB multifield component only supports saving the results of these objects into a String[] property on the component resource path itself. If you want to get fancy and instead have them saved as indexed child nodes you will have to do some more extjs magic.

            Hello smurfsky101,

             

            I have some trouble finding out how to change the CustomWidget.js to save my values to indexed child nodes as you mentioned. Could you please tell me how it works or can you at least point me to some code where the values are saved in child nodes?

             

            Thanks in advance.