Matrix: possible to customize in SafeCracker?

Question

I'm displaying a Matrix in a Safecracker form. Is there a way to customize the way it is outputted? For example, it seems that I need to have include_jquery="yes" and safecracker_head="yes" in order to make it work. This mucks up the markup as it injects JS in the middle of my page. For the JS, I'd like to have it as an external file so that it can be cached.

The styling of the table also clashes with my design. And a big problem is that the matrix table is not responsive. I'd like to set my own classes (I'm using Twitter Bootstrap) to make it responsive.

I'm happy to do the markup myself. I just need to somehow let Safecracker/Matrix know that the table I create is for a particular matrix field. I'd also need to support those Matrix options like "Delete row".

Is this possible?

Answer 1

This question was already asked several times, I found this tutorial http://themetaq.com/articles/bring-matrix-data-editing-to-the-front-end pretty good. I'm doing this same action right now and I disabled jquery and head on safecracker for better optimization.

Just a tip: when you disable safecracker_head you also disable all assets on other fields, when using predefined dropdown in matrix, there is hardcoded function with all the data that is used for creating new rows, so be sure to enable safecracker_head > copy that inline js data to your file > disable safecracker_head

d

Answer 2

Here's what you'll need to do:

1. Use an inspector to look at the code your browser outputs for the matrix table when you use the simple {field:my_matrix_field}. You'll notice each table cell has a unique name.

2. Format your output to your liking. For each input field, you'll use the name provided by the browser for the corresponding cell. The name should look something like: my_matrix_field[row_id_{row_id}][col_id_xx]. You should replace my_matrix_field with the name of your matrix field, and the xx with the column id of that particular cell (this is where your browser code comes in handy). The row id updates automatically.

3. Here's an example of one of my input fields. It pulls the content already in the field.

<input type="text" name="section_3_timeline[row_id_{row_id}][col_id_42]" value="{date}">

1. Don't forget to add your matrix field tag pair if you plan to loop, or pull existing content in for display. This will also require a {exp:channel:entries} tag.

2. Regarding the other functionality (adding/deleting rows), I personally have not had too much luck with that. This article, and the comments at the bottom may be able to help you more.