4

I have a high number of 'outcomes' for a client in the format of 3 fields for each outcome as below:

'outcome words', date identified, date met

Problem is that custom fields are formatted as one below the other as:

  • 'outcome words'
  • date identified
  • date met

Which means that the screen will be very deep causing the user to scroll down a lot. What would be involved in re-formatting the screen so that these fields are all side by side?

  • 1
    Does the multi-record, 'Tab with table' work for this problem? – Aidan Nov 28 '16 at 12:07
  • These custom fields are 'per case' so unfortunately this idea won't work as only custom fields for contacts can be mult-record. But nice idea! – Andy Clark Nov 28 '16 at 15:50
  • 1
    Which CMS? If Drupal have you considered webform-civicrm? Webform Layout, or 'grid' could help – petednz - fuzion Nov 28 '16 at 21:00
  • It's Drupal. Thanks, I will look at webform and see if that will work - but these custom field sets are for a case so hard to see how a webform will help. – Andy Clark Nov 28 '16 at 21:03
  • 2
    The case custom fields are formatted as a series of one row tables. You could add some jquery to move them around – Aidan Nov 28 '16 at 21:09
4

The case custom fields are formatted as a series of one row tables. You could add some jQuery to move them around.

For example:

CRM.$(function($) {
  $('#Outcomes table:nth-of-type(3n+1)').each(function (index) {
    // Combine 3 rows into 1      
    for (var i = 0; i <= 1; i++) {
      $(this).find('td:last').after($(this).next().find('td'));
      $(this).next().remove();
    }
    // Merge tables
    if (index > 0) {
      $(this).prev().find('tr:last').after($(this).find('tr'));
      $(this).remove();
    }
  });
  // Remove labels if not wanted
  $('#Outcomes td.label').remove();
});

You can add it to your page in various ways, but I'd create a tiny extension and drop it in there. See also wiki.civicrm.org/confluence/display/CRMDOC/Javascript+Reference

Without jQuery:

enter image description here

With jQuery:

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.