Drupal 7 Using ctools' modal frames and field collection forms to create a better user experience

We want to use ctools' modal frames and field collection forms to create a better user experience.

As we know, ctools comes with a lot of useful apis and tools to use in our own modules. One of them is the modal frames.

The field collection module which is a lesser known module but non the less very useful allows you to have multiple collections of fields to be added to an entity. For example in our example we have a curriculum vitae and we want to add multiple experiences to it. An experience consist out of several fields: company, from to date, function and description. So the field collection groups them.

To add new expierences we can edit the node or we can use the field collection modules links which go to a seperate page to fill in a seperate form.

What we want to do is make this form appear in a ctools modal frame so we can have easy in place editing which provides a superior user experience.

The example can be used to display any form in a ctools modal frame.

How to?
Install ctools and field collection
Create a node type curriculum and add all the fields. Use the field collection module to add new collections here admin/structure/field-collections. You ll notice it is also an entity so add fields like you add fields to other entities like nodes. Now you can add the collections you made as a field onto your node type cv. Now you should be able to see the links when creating a node.

Next we are going to take over these links. We ll create a hook menu in our custom module to create our proper links. We just prefix and suffix the existing paths because we still need the parameters

Now lets create the main function which will take the arguments and create the proper add, edit or delete form to administer our field collections items in a ctools modal frame. (read the comments in code for more explaination)

<?php/** * Modal callback */function glue_modal_operator_callback($field_name, $nid, $operator, $id = 0, $js = FALSE) {//We need a function to load an argument to use in our form state for a file in the field collection which is not loaded in this contextmodule_load_include('pages.inc', 'field_collection');

if (!$entity) { return MENU_NOT_FOUND; } // Ensure the given entity is of a bundle that has an instance of the field. list($id, $rev_id, $bundle) = entity_extract_ids($entity_type, $entity);$instance = field_info_instance($entity_type, $field_name, $bundle);

$field_collection_item = entity_create('field_collection_item', array('field_name' => $field_name)); // Do not link the field-collection item with the host entity at this point, // as during the form-workflow we have multiple field-collection item entity // instances, which we don't want link all with the host. // That way the link is going to be created when the item is saved.$field_collection_item->setHostEntity($entity_type, $entity, LANGUAGE_NONE, FALSE);

// Make sure the current user has access to create a field collection item. if (!field_collection_item_access('create', $field_collection_item)) { return MENU_ACCESS_DENIED; } return $field_collection_item;}?>

The only thing we need to do now is take over the links on the page. For this to happen we will alter the render array. The hook to do this is hook_field_attach_view_alter().

It will be by adding the ctools-use-modal class that our modal functionality will be triggered.

You should be able to allow validating and after submission thanks to the ctools_modal_form_wrapper function. After submission the modal frame should close and the page should show the changes that where inserted by the ajax_command_html().

For more on how to theme the modal frame and to do much with them more see ctools_ajax_sample.module which comes with ctools.

Comments

Drupal 7 Using ctools' modal frames and field collection forms to create a better user experience

Drupal 7 Using ctools' modal frames and field collection forms to create a better user experience

Drupal 7 Using ctools' modal frames and field collection forms to create a better user experience

Submitted by raviteja (not verified) on Tue, 2015-03-03 13:19

helloAnton i have used userprofile in my appllication to build the site, and i haved used the feild collection in that using render function. Now i need to open in edit in place on only. can u please jestfy.