CiviCRM Community Forums (archive)

Grouping tags on the Tags tab of a contact is a really great improvement. It would be a better UX if there was a similar interface for the Tags portion of the Groups and Tags section of the Contact Edit form.

Well, I'm doing a test migration for a client who has many dozens of tags in their legacy system, so the contrast is very dramatic in favour of the new approach. I don't think it's such an issue for groups. In fact, it might useful to use their hierarchies to create a similar UX for them.

Sorry to resurrect this topic, but this is a feature I am also really interested in.

We have a number of different tag 'groups' divided up by parents. Whilst this is really clear on the contact view pages, most of our groups/tag work goes on in the contact edit pages, as having to save and then go to the groups/tags tab is a lot of UI steps. Our users get quite confused which tags they should be using on the edit page, and a lot of this would be saved by showing their hierarchy.
It would also be really useful to see the tag/group hierarchy on the manage groups/tags screens?

I can't see a feature request issue for this in the JIRA issue tracker. Am I allowed to create one?
I am happy to contribute some coding, I made a bit of a hack already for the tags part of the editing form on our site by modifying the buildQuickForm method in CRM/Contact/Form/Edit/TagsAndGroups.php

Is this the right sort of approach or does it need changing elsewhere?

Yes, in the search options would also be great. We make heavy use of hierarchical tags, so propagating that throughout the UI would be high on my feature request list.
There is the HTML OPTGROUP:
http://www.w3schools.com/tags/tag_optgroup.asp

which allows you to subdivide items in a select box. I think it only supports one level of hierarchy though. We only make use of one level, but I imagine other sites use more. The other option is to simply indent the list items thus:

Tag 1
Tag 2
- Subtag 1
- Subtag 2
- Subtag 3
-- Subsubtag 1
-- Subsubtag 2
- Subtag 4
Tag 3
Tag 4

Unless you have more than 5 or so levels, this does not hugely impact the width of the select box either. I can't think of a use case where you would need a large number of tag levels like that, but I'm sure it exists and is probably and edge case?

I'm pretty familiar with PHP and am willing to do some of the work, but am still getting to grips with the CiviCRM architecture, so if someone could point me to the files I need to modify to update the tags in the search boxes and the edit contact pages, I could have a go and submit it as a patch. At the moment my approach for the contact edit pages was to edit the BuildQuickForm method in CRM/Contact/Form/Edit/TagsAndGroups.php, where it loads the tag list. I changed the code so that the tags are re-ordered to come consecutively after their parents and applied a css class to subtags which I added some left padding to.

Here is the code I used replacing lines 130-139 of CRM/Contact/Form/Edit/TagsAndGroups.php in civicrm 3.0.1:
        if ( $type & CRM_Contact_Form_Edit_TagsandGroups::TAG ) {
            $fName = 'tag';
            if ($fieldName) {
                $fName = $fieldName;
            }
            $form->_tagGroup[$fName] = 1;
            $elements = array( );
            $tag =& CRM_Core_PseudoConstant::tag  ( );

            //new stuff added here
            //--------------------------------------------------------
            //this should really be replaced with a recursive db search to find the full tags
            //heirarchy. This currently fails for more than 1 level deep.

            //get list of parent tag ids
            CRM_Core_PseudoConstant::populate( $tag_parents, 'CRM_Core_DAO_Tag', true, $retrieve = 'parent_id', $filter = 'is_active', $condition = null, $orderby = 'parent_id', $key = 'id' );
            $form->assign('tag_parents', $tag_parents);
            $sorted_parent_list = array();
            //sort array with parents id before all it's children
            $flag = array();
            foreach ($tag_parents as $id => $this_parent) {
                if ($this_parent && $flag[$this_parent] == false) {
                    unset($sorted_parent_list[$this_parent]);
                    $sorted_parent_list[$this_parent] = '';
                    $sorted_parent_list[$id] = $this_parent;
                    $flag[$this_parent] = true;
                } else {
                    $sorted_parent_list[$id] = $this_parent;
                }
            }

            foreach ($sorted_parent_list as $id => $this_parent) {
                if ($this_parent) {
                    $elements[] =& HTML_QuickForm::createElement('checkbox', $id, null, $tag[$id], 'class="subtag"');
                } else {
                    $elements[] =& HTML_QuickForm::createElement('checkbox', $id, null, $tag[$id]);
                }
            }

It's quite hacky and only works for one level deep. I think it should really be replaced with a recursive call to CRM_Core_PseudoConstant::populate to support deeper levels, and then rendering the items in nested divs which can be indented with css,  but I don't quite understand how to do this in quickform yet. Any pointers would be gratefully received.

Any better ideas?


P.S. - I recall we also had this conversation in the comments of a page on the civicrm site as well, but for the life of me can't find it now

Hi,

You can reuse the function that is used on the tab for the tags. It does one fetch only on the db and reorder in PHP and build a 3 level array. you can use that array directly.

Limitation: no more than 3 levels.

Ok, I've made changes in 3 files which supports the 3-level tag hierarchy display:

CRM/Contact/Form/Edit/TagsAndGroups.php
CRM/Contact/Form/Search/Basic.php
CRM/Contact/Form/Search/Criteria.php

This adds the 3-level tag heirarchy to the basic search dropdown, the advanced search tag list, and the contact edit page. It uses Xavier's tree array, and displays the basic search dropdown using text indents and modifies the advanced search and contact edit pages using a class applied to the checkbox indicating the tag level. Some extra CSS is therefore needed for the latter two.
These solutions will work for an array of any depth, so if Xavier's array creating function was ever updated to allow more tag levels, these functions would work for the extra levels. Some extra css would be needed for the advanced search and contact edit screens.
I implemented these in my own installation by copying the core files to my custom php directory and editing them there, so as not to interfere with future upgrades.

To support indented tags on the contact edit screen:
CRM/Contact/Form/Edit/TagsAndGroups.php

change lines 137-140:
           $tag =& CRM_Core_PseudoConstant::tag  ( );
            foreach ($tag as $id => $name) {
                $elements[] =& HTML_QuickForm::createElement('checkbox', $id, null, $name);
            }
to:
           require_once 'CRM/Core/BAO/Tag.php';
            $tags = new CRM_Core_BAO_Tag ();
            $tag_tree = $tags->getTree();

            $form->assign('tag_tree', $tag_tree);
            $tag_level = '0';
            self::render_tag_tree(&$elements, $tag_tree, $level);

also add the following function to the class:
   static function render_tag_tree(&$elements, $tag_tree, $level = '0') {
            $level += 1;
            foreach ($tag_tree as $this_tag_id => $this_tag) {
                $elements[] =& HTML_QuickForm::createElement('checkbox', $this_tag_id, null, $this_tag['name'], 'class="tag level'.$level.'"');
                self::render_tag_tree(&$elements, $this_tag['children'], $level);
            }
    }

To support indented tags on the advanced search criteria screen:
CRM/Contact/Form/Edit/Criteria.php

Change lines 65-67:

           foreach ($form->_tag as $tagID => $tagName) {
                $form->_tagElement =& $form->addElement('checkbox', "tag[$tagID]", null, $tagName);
            }

to this:
           $tag_level = '0';
            self::render_tag_tree(&$form, $tree, $level);

and add this function to the class:
   static function render_tag_tree(&$form, $tag_tree, $level = '0') {
            $level += 1;
            foreach ($tag_tree as $this_tag_id => $this_tag) {
                $form->_tagElement = &$form->addElement('checkbox', "tag[$this_tag_id]", null, $this_tag['name'], 'class="tag level'.$level.'"');
                self::render_tag_tree(&$form, $this_tag['children'], $level);
            }
    }

To support indented tags on the basic search screen:
CRM/Contact/Form/Edit/Basic.php

Change lines 116-117:
           $tag = array('' => ts('- any tag -')) + $this->_tag;
            $this->_tagElement =& $this->addElement('select', 'tag', ts('with'), $tag);

to:

           require_once 'CRM/Core/BAO/Tag.php';
            $tags = new CRM_Core_BAO_Tag ();
            $tag_tree = $tags->getTree();

            $tag_list = array('' => ts('- any tag -'));
            $tag_level = '0';
            self::_render_tag_tree(&$tag_list, $tag_tree, $level);

            $this->_tagElement =& $this->addElement('select', 'tag', ts('with'), $tag_list);

and add this function to the class:
   static function _render_tag_tree(&$tag_list, $tag_tree, $level = '0') {
            $level += 1;
            $indent_string = "";
            for ($i = 2; $i <= $level; $i++) {
                $indent_string .= "--";
            }
            if (strlen($indent_string) > 0) $indent_string .= " ";
            foreach ($tag_tree as $this_tag_id => $this_tag) {
                $tag_list[$this_tag_id] = $indent_string.$this_tag['name'];
                self::_render_tag_tree(&$tag_list, $this_tag['children'], $level);
            }
    }

Add css for the search criteria and edit pages

I also added the following css to the civicrm.css file to actually display the indents.

input.tag.level2 {margin-left: 2em; }
input.tag.level3 {margin-left: 4em; }

Now, this lot probably doesn't conform to the project coding standards so I would welcome any help and suggestions to get it included in the main project, as I think it will be genuinely useful for a lot of people, plus I don't want to be maintaining lots of custom code between upgrades

I would really like to do the same thing for groups, but am having trouble locating the files that render the pages again. Any suggestions? Groups might be a little more difficult because the way they display is also dependent on ACL.
I am learning the Civi architecture slowly!

ok, I will have a closer look at groups on monday.

Do you have a link to Xaviers patch? Is it this you're referring to?
http://issues.civicrm.org/jira/browse/CRM-3840

I'm not sure how he did it, but essentially all I am doing here is adding a css class to the checkboxes on the advanced search form, so I'm not sure how it could break anything. Will do some more testing.

I think we have had different approaches and goals. It looks like he is trying to update the tag edit page, whereas I am just trying to update the interface that my contact editors see? Sorry, I am still getting to grips with the project and don't quite understand how everything fits together yet!