Create subform field to handle repeatable content

101 views
Skip to first unread message

Mike Hermary

unread,
Aug 1, 2020, 7:24:43 PM8/1/20
to Joomla! General Development
Hello,

I am looking to create a subform field that works like the matrix field found in the Craft CMS.

This subform field would need to include the ability to add an editor block, an image upload block using JCE's file browser, and a file upload block that also uses JCE's file manager. These fields would need the ability to be added multiple times and have the ability to re-order them. I have attached a screenshot link showing how the subform layout should look and function within an article. Matrix form layout example.

I have reviewed the repeatable field code and have a good understanding of how it works, but need some guidance on how to implement the functionality detailed above.

Could someone share some tips or tutorials on how to get started developing a subform field like this.

Any help is greatly appreciated.

Cheers,

Randy Carey

unread,
Aug 2, 2020, 10:53:52 AM8/2/20
to Joomla! General Development
I think the problem you face is that the JCE editor integrates its file upload feature, so it is not easy to isolate that feature into a stand-alone Joomla type field.  Subforms do allow you to add a 'file' type field - a type that allows you to select a file and upload it.   (I have built a subform with this field type as a way for the client to add and reorder images.)  The challenge with the 'File' field type is that upon submission, it is your responsibility to supply the code that will copy the uploaded file to the directory where you want.  Also note, I pair the 'file' type field with a 'media' type field so that together they serve as a single field - as the first is used to declare which file to upload and the second is used to record which file/image is currently loaded for this field pair.

Of course, a subform allows you to add an editor to each set of fields - and the field declaration can set the attributes to request JCE as the preferred editor.

If you are concerned about the form having its own layout that suits your intended purpose, be assured that you can create your own template for how each subform record view is laid out - you do not have to use one of the Joomla-supplied subform layouts.

In short, I think you can accomplish what you seek -- as long as you handle file uploads with the Joomla field type for such, instead of trying to use JCE's file upload feature.

Mike Hermary

unread,
Aug 2, 2020, 2:29:59 PM8/2/20
to Joomla! General Development
Thanks for the reply and info.

I think files (PDFs, etc.) would be fine to use the Joomla-based uploader, but for images I find the built-in uploader quite basic. It would be nice to have access to options like renaming of files, adding captions, and resizing. That is why I would like to use JCE. Core Joomla for media management in version 3 is very basic.

Do you have an example of how your field setup works for your client? Does it work similar to how my mockup example shows each field type being added individually with the option to re-order and delete them independently as well?

Cheers,

Randy Carey

unread,
Aug 2, 2020, 11:36:48 PM8/2/20
to Joomla! General Development
I as well like the JCE media manager better, but I don't know of a straight-forward way to extract it so that it can be used as its own field type.

In general terms... I set up a subform that used an XML file to define a record of two fields (first a FILE field, the second a media field).  the subform field references this XML file so that it allow the user to create X many image records.  The user creates as many records as wanted and can drag-and-stop to order them.  For each record displayed on the edit form, the user can upload an image using the "file" field.  When the component saves the item (the item that contains the subform field), the save function includes code that checks each subform record to see if a file was uploaded, and if so, that 'save' code includes the logic for copying the file to a particular directory where all the uploaded images will live.  That is a summary of how it works.

I'm not sure I completely understand what you are expecting from the layout in your screen mock-up.  It looks like each of the three buttons at top are supposed to add items below the button row.  That is not how subforms were build to work.  But if you want multiple/sortable records for each subform type - you can do that.  You can have a subform field for each text-block, file-block, and image-block.  That is no problem.  A component's item can contain multiple subform fields.  However, a subform field cannot contain a subform field.

Mike Hermary

unread,
Aug 5, 2020, 1:04:39 PM8/5/20
to Joomla! General Development
Thanks for the explanation. I will work with the subform XML files and see what I can come up with.

I have included another screenshot showing how the Craft CMS handles adding and reordering custom fields using their Matrix field. Is this possible using subform fields in Joomla?

Cheers,

Reply all
Reply to author
Forward
0 new messages