How can I customize the User Dashboard (Frontend)

Question

I am working on 4.7 on Wordpress 4.6 and I trying to customize the User Dashboard in the Frontend shown for the request myURL.com/civicrm/?page=CiviCRM&q=civicrm%2Fuser&reset=1.

First I looked at the hook civicrm_dashboard and civicrm_summary, but those are used for different pages. It seems I can hook into that page with the hook civicrm_pageRun filtering for the page "CRM_Contact_Page_View_UserDashBoard".

1. How can I add content or modify content on the page object?
2. Where can I find documentation of the page object?
3. How would I change the HTML Table on the UserDasboard to DIVs to have separate tabs for Contributions, Events, Memberships, etc. ?

Answer 1

If you only want to customize the layout, you can override the Smarty template file. This is usually not recommended in CiviCRM, because it complicates upgrades and maintenance, but this specific template is fairly safe (most templates have too much logic/code in them and change often). You can also include custom JavaScript in templates (between 'literal' tags). It's not very elegant but it works.

The official docs page about customizing templates is surprisingly complicated, but covers the basics: under Administration > System Settings > Paths, set a path for custom smarty templates. Then copy the original "tpl" in there. You can also create a custom extension (ex: for all customizations of a site). You will probably need to at some point, for other types of customizations as described below.

It is also possible to modify the contents of the dashboard, such as to include custom sections. I often add links to "My profile" or "My certifications", things like that.

This can be done using the pageRun hook and then matching the CRM_Contact_Page_View_UserDashBoard page name.

For example:

function myext_civicrm_pageRun(&$page) {
  $pageName = get_class($page);

  if ($pageName == 'CRM_Contact_Page_View_UserDashBoard') {
    CRM_Myext_Utils_DashboardLinks::addLinks($page);
  }
}

and the class:

class Myext_Utils_DasboardLinks {

  public static function addLinks(&page) {
      $links = [
        [
          'title' => E::ts('Modify your username, password or e-mail address'),
          'url' => ($uid ? url("user/$uid/edit", ['query' => ['destination' => "user/$uid"]]) : ''),
          'icon' => 'fa-user-circle',
        ],
        [
          'title' => E::ts('Update your profile (contact information) and communication preferences'),
          'url' =>CRM_Utils_System::urll("civicrm/profile-update", ['cid' => $dashboard_contact_id]),
          'icon' => 'fa-address-card',
        ];
    ];

    self::addElement([
      'class' => 'crm-dashboard-updates',
      'sectionTitle' => E::ts('Updates'),
      'templatePath' => 'CRM/Myext/Contact/Page/View/UserDashBoard/MyLinks.tpl',
      'links' => $links,
    ]);
  }

  /**
   *
   */
  public static function addElement($element) {
    $smarty = CRM_Core_Smarty::singleton();
    $dashboardElements = $smarty->_tpl_vars['dashboardElements'];
    $dashboardElements[] = $element;
    $smarty->assign('dashboardElements', $dashboardElements);
  }

The above is a bad copy-paste of old custom code. You will have to adapt for your requirements.

Finally, there is the issue of re-ordering dashboard items, without rewriting the entire template or custom code. The reorder dashboard extension might help.