How to create a grid field with Shared Form View?

The docs for making a Grid field are here:

https://docs.expressionengine.com/latest/development/services/table.html#using-as-a-grid-input

Does that help? Basically, you’ll render the field markup and then put it into the shared form view as a custom HTML field.

The docs for making a Grid field are here: https://docs.expressionengine.com/latest/development/services/table.html#using-as-a-grid-input Does that help? Basically, you’ll render the field markup and then put it into the shared form view as a custom HTML field.

I tried that but was unable to get it to work. Can you please provide a bit more guidance on this? Perhaps some example code of the steps to create the grid table content to put in there? Thanks!

Sure thing, is the main problem getting the Grid into the shared form view? If so, here’s how we’re doing the Grid input on the Upload Directories creation page:

array(
    'title' => 'constrain_or_crop',
    'desc' => 'constrain_or_crop_desc',
    'wide' => TRUE,
    'grid' => TRUE,
    'fields' => array(
        'image_manipulations' => array(
            'type' => 'html',
            'content' => ee()->load->view('_shared/table', $grid->viewData(), TRUE)
        )
    )
)

Where $grid is your GridInput object. Does this explain what you needed? If not, which part specifically would you like more examples of? You can also dive into the Upload.php controller to see how that image manipulations Grid input works.

Sure thing, is the main problem getting the Grid into the shared form view? If so, here’s how we’re doing the Grid input on the Upload Directories creation page:

array(
    'title' => 'constrain_or_crop',
    'desc' => 'constrain_or_crop_desc',
    'wide' => TRUE,
    'grid' => TRUE,
    'fields' => array(
        'image_manipulations' => array(
            'type' => 'html',
            'content' => ee()->load->view('_shared/table', $grid->viewData(), TRUE)
        )
    )
)

Where $grid is your GridInput object. Does this explain what you needed? If not, which part specifically would you like more examples of? You can also dive into the Upload.php controller to see how that image manipulations Grid input works.

Thank you, that is one part I was unsure about. I’m also not certain I’m creating the grid properly.

I am making a grid for a fieldset (row?) that has two images and a rich text field. I’m uncertain how to properly set the columns so they have the actual field inputs in there. And do I load the assets?

Is it possible for you to provide sample code showing creating a grid that fulfills something like:

1. Has image1, image2 and richtext1 fields (in the example it has “form_input”, “form_dropdown” - what are these functions? And how do I create the proper input fields to put in here?)
2. Has the button for adding another row
3. If no results, sets the no results (I saw two different ways mentioned in the docs and was unsure which to use)
4. Also, for the “setBlankRow” what would I put for an image column? How do I include the proper code/view so it’ll put a browse button that changes to the image/edit/remove html when they select one?

Also very important: how do I get the sub-fields and their data from the Grid field? I queried the Model Service to get a ChannelEntry (and ChannelField), but when I look at the grid field, I don’t see anywhere that has the sub-fields or their data. How do I get that?

Thank you very much for the help!

Ok let me see if I can help.

I’m uncertain how to properly set the columns so they have the actual field inputs in there.

The Grid columns currently expect HTML markup of the fields. So like in the docs link I sent you, where we’re constructing the columns array has an example of this. We’re just calling the form helper there to get markup for various kinds of fields.

And do I load the assets?

Which assets? But yes you should likely load whatever assets you need.

Has image1, image2 and richtext1 fields (in the example it has “form_input”, “form_dropdown” - what are these functions? And how do I create the proper input fields to put in here?)

The form_input() and form_dropdown() functions are from the Form helper.

The file field is a little more tricky, we don’t really have a way to easily insert one of these on its own, but in 3.1 we should have better documentation and better API for the file picker, sorry about that. But for now, you may have to reverse engineer some of the other file fields you see.

As for the rich text field, I think I’ve shown you before how to instantiate a rich text field, it would be the same for Grid. Just add a textarea, could even use the form_textarea() method if you want, then instantiate it with the code I showed you. That’ll work for rich text editors already displayed, for ones that display when you add a new row, you’ll need to do something like listen for clicks on that add button, wait for the new element to appear, then bind the RTE code to it. Something like:

$("textarea in new grid row")
    .addClass("WysiHat-field")
    .wysihat({
        buttons: ["bold","italic","blockquote","unordered_list","ordered_list","link","image",["headings"],["view_source"]]
    });

Has the button for adding another row

The button should be there automatically, based on the min and max rows you set.

If no results, sets the no results (I saw two different ways mentioned in the docs and was unsure which to use)

There is only one way to set no results text for a Grid mentioned in the docs:

$grid->setNoResultsText('no_manipulations', 'add_manipulation');

Also, for the “setBlankRow” what would I put for an image column? How do I include the proper code/view so it’ll put a browse button that changes to the image/edit/remove html when they select one?

Again, nothing too easy for this at the moment. I’d try looking at the file field for now and see if you can adapt it for your needs until we have something better for you.

Also very important: how do I get the sub-fields and their data from the Grid field? I queried the Model Service to get a ChannelEntry (and ChannelField), but when I look at the grid field, I don’t see anywhere that has the sub-fields or their data. How do I get that?

Not sure what you mean. Are you creating a Grid-like fieldtype for a Channel entry? Or are you creating a Grid input for some other form? If the latter, then you shouldn’t need anything from ChanneEntry. The data can be stored and loaded however you like. For example, our image manipulations Grid, we just query image manipulations directly and then load that into the Grid. Then when the save, we take the data from the Grid input field and save it into the image manipulations table.

Thank you, I’ve gotten a lot further than before now.

The file field is a little more tricky, we don’t really have a way to easily insert one of these on its own, but in 3.1 we should have better documentation and better API for the file picker, sorry about that. But for now, you may have to reverse engineer some of the other file fields you see.

This is what I’ve been doing, but creating it via ee( “View” )->make( “ee:_shared/form/field” )->render() BUT with workaround code I added in there to make that work (the current field.php doesn’t have the code to make this work. I can bug submit the code I added to it if you want).

when you add a new row, you’ll need to do something like listen for clicks on that add button, wait for the new element to appear, then bind the RTE code to it. Something like:

$("textarea in new grid row")
    .addClass("WysiHat-field")
    .wysihat({
        buttons: ["bold","italic","blockquote","unordered_list","ordered_list","link","image",["headings"],["view_source"]]
    });

I’ll try this out and let you know if I can get it to work.

If no results, sets the no results (I saw two different ways mentioned in the docs and was unsure which to use)

There is only one way to set no results text for a Grid mentioned in the docs:

$grid->setNoResultsText('no_manipulations', 'add_manipulation');

That’s not quite right. If I do that, I get the error (when there’s no data):

Undefined variable: no_results
ee/EllisLab/ExpressionEngine/View/_shared/table, line 98

That’s only fixable if I also add:

$myTableViewVars[ "no_results" ] = array( "text" => "No Data" );

However, this then is missing the add new row button and to add that, it expects me to provide “action_text” and “action_link”. What should “action_link” be?

Also very important: how do I get the sub-fields and their data from the Grid field? I queried the Model Service to get a ChannelEntry (and ChannelField), but when I look at the grid field, I don’t see anywhere that has the sub-fields or their data. How do I get that?

Not sure what you mean.

I mean I did a query for a ChannelField to get the field info and a ChannelEntry to get the field’s data, but I can’t find the fields in my Grid in the returned ChannelField (the grid field is “post_images”, and it’s row fields are “post_image”, “post_caption”). And in the ChannelEntry, I can’t seem to find the data for the rows anywhere.

Thanks again for helping me!

That’s not quite right. If I do that, I get the error (when there’s no data):…

It’s right on our end, that’s exactly the code we’re using in the Uploads controller for image manipulations, so I’m not sure what about your implementation would be causing that error. You’re calling setNoResultsText on your GridInput object, correct?

What should “action_link” be?

You shouldn’t need an action link, the action button shouldn’t link anywhere in this case, the action button adds a new row. If you call setNoResultsText on your GridInput object, you shouldn’t be seeing errors about that being missing.

I mean I did a query for a ChannelField to get the field info and a ChannelEntry to get the field’s data, but I can’t find the fields in my Grid in the returned ChannelField (the grid field is “post_images”, and it’s row fields are “post_image”, “post_caption”). And in the ChannelEntry, I can’t seem to find the data for the rows anywhere.

Ok, so this is for a channel field you’ve created, not the one you’re working on here, right? If so, the field data isn’t accessible via the ChannelField object yet, there are no models for Grid yet. Creating models for Grid would have triggered a significant rewrite of Grid that we didn’t have time to do for 3.0, but it’s something we definitely want to do. For now, you’ll have to manually query the Grid data table to get the data you need, based on the field ID and entry ID you get from the other models. Hope this helps.

That’s not quite right. If I do that, I get the error (when there’s no data):…

It’s right on our end, that’s exactly the code we’re using in the Uploads controller for image manipulations, so I’m not sure what about your implementation would be causing that error. You’re calling setNoResultsText on your GridInput object, correct?

Yes, my code is:

//$grid is created by ee( "CP/GridInput" )
$grid->setNoResultsText( "No results", "Add a row" );

I think it might be this bug: https://support.ellislab.com/bugs/detail/21438/cp-table-view-doesnt-properly-pull-properties-out-of-grid-and-shows-as-no-d

Ok, so this is for a channel field you’ve created, not the one you’re working on here, right? If so, the field data isn’t accessible via the ChannelField object yet, there are no models for Grid yet. Creating models for Grid would have triggered a significant rewrite of Grid that we didn’t have time to do for 3.0, but it’s something we definitely want to do. For now, you’ll have to manually query the Grid data table to get the data you need, based on the field ID and entry ID you get from the other models. Hope this helps.

OK, so I assume you mean “$db->query( “SELECT…” );” right?

Thanks again!

Hmm I’m not sure what to tell you about the no results text. Like I said, it’s working on our end, there must be something else going on in your implementation.

Yes, any of the active record methods should work to query the data, except use ee()->db instead of $this->db.