CiviCRM Community Forums (archive)

Update-

1. Migration of form elements: Most of the form elements are now rendered in Bootstrap. Consequently, pages like Profile, Contributions etc. are also displayed in Bootstrap.
To Do: Buttons need to be Bootstrapped. Pages have some inconsistencies.

2. CiviCRM Administration: Home page is converted to Bootstrap. Few pages in CiviCRM > Search have also been moved. Tables now scale responsively to screen size.
To Do: Should complete migration of all pages

3. Option to enable/disable bootstrap.css: Added this to Administer > System Settings > Resource URLs as a Yes/No option.

Process I followed:

1. Added  this to civicrm/CRM/Admin/Form/Setting/Url.php  to generate element via QuickForm
  $this->addYesNo('enable_bootstrap_css', ts('Use Bootstrap CSS'));  2. Added the below code in templates/CRM/Admin/Form/Setting/Url.tpl for the form to be rendered.
    <tr class="crm-url-form-block-enable_bootstrap_css">
        <td class="label">
            {$form.enable_bootstrap_css.label} {help id='id-bootstrap_help'}
        </td>
        <td>
            {$form.enable_bootstrap_css.html}
     <p class="description font-red">{ts}{$enable_bootstrap_css_description}{/ts}</p>
        </td>
    </tr>

3.  Added a condition as below to set variable in civicrm/CRM/Upgrade/Incremental/php/FourFive.php  Using SmartyDebug in browser, I can see that the variable is set to 1
if ($config->enable_bootstrap_css === 1 && strpos($config->userFramework, 'Drupal') === 0) {
      CRM_Core_BAO_Setting::updateSettingsFromMetaData();
      CRM_Core_BAO_Setting::setItem('1', CRM_Core_BAO_Setting::SYSTEM_PREFERENCES_NAME, 'enable_bootstrap_css');
    }
4. I have added the below code to addCoreStyles() function to include bootstrap.css file in civicrm/CRM/Core/Resources.php
if (CRM_Core_BAO_Setting::getItem(CRM_Core_BAO_Setting::SYSTEM_PREFERENCES_NAME,'enable_bootstrap_css'))
      {
       $this->addstyleFile('bootstrap', 'css/bootstrap.css', -99, $region);
    }
5. Finally, I have updated the civicrm/settingsCore.setting.php file to include the new variable.
'enable_bootstrap_css' => array(
    'group_name' => 'CiviCRM Preferences',
    'group' => 'core',
    'name' => 'enable_bootstrap_css',
    'type' => 'Boolean',
    'quick_form_type' => 'YesNo',
    'default' => '0',
    'add' => '4.5',
    'title' => 'Use Bootstrap CSS',
    'is_domain' => 1,
    'is_contact' => 0,
    'description' => 'Enables Bootsrap CSS files',
    'help_text' => 'This is a work in progress. It might break default CSS. Check documentation at wiki.civicrm.org/confluence/display/BootstrapUI for more details',
  ),

However, the variable value does not change to 0 when No option is selected.
"default" => '0' is assigned but the variable value is 1 and always stays 1.
Working on this right now.

This is great progress - I think to get the new setting to take place you need to either do an upgrade from 4.4 to 4.5 or else do a new installation of 4.5 so that the setting gets added/retained in database. Xavier - do you have any other suggestions on this or does it sound like we are on the right track?

Teja, do you have civi installed from git? Either upgrade or new install would work (or at least potentially highlight different issues

but indeed, targeting 4.5 is the best option.

(https://www.drupal.org/project/bootstrap). At the very least, this needs to be included in the documentation for this project if we are going to be dependent on it to give us the main container element.

indeed, would be great there is an option "the CMS theme is already using bootstrap", IMO it doesn't matter if there is a UI setting, could be done from within the civicrm.settings.php as well.

It sounds like it's getting there! Have you planned some alpha/beta testing? Is there already a public site we could have a look at somewhere?

X+

Hi,

I have few issues.
1. I am trying to get the back end option of Enabling Bootstrap CSS function. As Xavier and Emily suggested, I have re-installed CiviCRM 4.5 Beta 2. But here was no no result. The same problem is being faced again.

2. Changing the templates of CiviCRM to Bootstrap: Firstly I am doing Advance Search, as the total page consist of tables, converting them into bootstrap without replacing tables with divs is really becoming a tough task and in few cases its impossible.

For that Emily has suggested to add bootstrap custom tables with no border using custom css.
My css file consist of:
@import "less/bootstrap.less";
.table-borderless td,
.table-borderless th {
     border: 0;
 }
and in my templates/CRM/Contact/Form/Search/Criteria/Basic.tpl I added
<table class="table table-borderless form-layout">
But I am not able to remove borders for the tables.

Should we re-think about replacing tables with divs?

Hi Xavier,

I am trying to include a radio button option to enable/disable Bootstrap CSS based on which we can load/not load bootstrap.css

I have explained every step what I did to get the option in my previous post and after your suggestion  I re-installed it but when I set Enable Bootstrap CSS to yes, the css which was made for Bootstrap is not loading. What ever option you select, It always sets the original CiviCRM CSS. I am not understanding where the problem is?

I don't recall the detail of what to change to save a new setting

To add settings to settings forms you need to define them in the settings folder & on the form - e.g

https://github.com/civicrm/civicrm-core/blob/8f0551201883036cac63d720149953c007d4f10d/CRM/Admin/Form/Setting/Debugging.php#L42
https://github.com/civicrm/civicrm-core/blob/8f0551201883036cac63d720149953c007d4f10d/settings/Developer.setting.php#L39

Teja,

It will be a lot more helpful to Eileen and Xavier if you can provide code snippets. For example, you have added enable_bootstrap_css setting to the following area of CRM / Admin / Form / Setting / Url.php:

/**
* This class generates form components for Site Url
*
*/
class CRM_Admin_Form_Setting_Url extends CRM_Admin_Form_Setting {
  protected $_settings = array(
    'cvv_backoffice_required' => CRM_Core_BAO_Setting::CONTRIBUTE_PREFERENCES_NAME,
    'disable_core_css' => CRM_Core_BAO_Setting::SYSTEM_PREFERENCES_NAME,
    'enable_bootstrap_css' => CRM_Core_BAO_Setting::SYSTEM_PREFERENCES_NAME,
  );
  /**
* Function to build the form
*
* @return void
* @access public
*/
  public function buildQuickForm() {
    CRM_Utils_System::setTitle(ts('Settings - Resource URLs'));
    $settingFields = civicrm_api('setting', 'getfields', array(
      'version' => 3
    ));

    $this->addElement('text', 'userFrameworkResourceURL', ts('CiviCRM Resource URL'));
    $this->addElement('text', 'imageUploadURL', ts('Image Upload URL'));
    $this->addElement('text', 'customCSSURL', ts('Custom css URL'));
    $this->addYesNo('enable_bootstrap_css', ts('Use Bootstrap CSS'));
    $this->addElement('text', 'extensionsURL', ts('Extension Resource URL'));
    $this->addYesNo('enableSSL', ts('Force Secure URLs (SSL)'));
    $this->addYesNo('verifySSL', ts('Verify SSL Certs'));
    // FIXME: verifySSL should use $_settings instead of manually adding fields
    $this->assign('verifySSL_description', $settingFields['values']['verifySSL']['description']);

    $this->addFormRule(array('CRM_Admin_Form_Setting_Url', 'formRule'));

    parent::buildQuickForm();
  }
This piece looks good to me, and Eileen's example also suggests that this part of your code is on track.

Where you are struggling is with how to actually get the setting in the database. You are using disable_core_css as your working example because that is similar to what you need to do. Using Grep, you found that this setting is added in to Civi 4.4 in CRM/Upgrade/Incremental/php/FourFour.php within this function:
  /**
* @param $rev
*/
  function upgrade_4_4_1($rev) {
    $config = CRM_Core_Config::singleton();
    // CRM-13327 upgrade handling for the newly added name badges
    $ogID = CRM_Core_DAO::getFieldValue('CRM_Core_DAO_OptionGroup', 'name_badge', 'id', 'name');
    $nameBadges = array_flip(array_values(CRM_Core_BAO_OptionValue::getOptionValuesAssocArrayFromName('name_badge')));
    unset($nameBadges['Avery 5395']);
    if (!empty($nameBadges)) {
      $dimension = '{"paper-size":"a4","orientation":"portrait","font-name":"times","font-size":6,"font-style":"","NX":2,"NY":4,"metric":"mm","lMargin":6,"tMargin":19,"SpaceX":0,"SpaceY":0,"width":100,"height":65,"lPadding":0,"tPadding":0}';
      $query = "UPDATE civicrm_option_value
SET value = '{$dimension}'
WHERE option_group_id = %1 AND name = 'Fattorini Name Badge 100x65'";

      CRM_Core_DAO::executeQuery($query, array(1 => array($ogID, 'Integer')));
    }
    else {
      $dimensions = array(
        1 => '{"paper-size":"a4","orientation":"landscape","font-name":"times","font-size":6,"font-style":"","NX":2,"NY":1,"metric":"mm","lMargin":25,"tMargin":27,"SpaceX":0,"SpaceY":35,"width":106,"height":150,"lPadding":5,"tPadding":5}',
        2 => '{"paper-size":"a4","orientation":"portrait","font-name":"times","font-size":6,"font-style":"","NX":2,"NY":4,"metric":"mm","lMargin":6,"tMargin":19,"SpaceX":0,"SpaceY":0,"width":100,"height":65,"lPadding":0,"tPadding":0}',
        3 => '{"paper-size":"a4","orientation":"portrait","font-name":"times","font-size":6,"font-style":"","NX":2,"NY":2,"metric":"mm","lMargin":10,"tMargin":28,"SpaceX":0,"SpaceY":0,"width":96,"height":121,"lPadding":5,"tPadding":5}',
      );
      $insertStatements = array(
        1 => "($ogID, %1, '{$dimensions[1]}', %1, NULL, 0, NULL, 2, NULL, 0, 0, 1, NULL, NULL)",
        2 => "($ogID, %2, '{$dimensions[2]}', %2, NULL, 0, NULL, 3, NULL, 0, 0, 1, NULL, NULL)",
        3 => "($ogID, %3, '{$dimensions[3]}', %3, NULL, 0, NULL, 4, NULL, 0, 0, 1, NULL, NULL)",
      );

      $queryParams = array(
        1 => array('A6 Badge Portrait 150x106', 'String'),
        2 => array('Fattorini Name Badge 100x65', 'String'),
        3 => array('Hanging Badge 3-3/4" x 4-3"/4', 'String'),
      );

      foreach ($insertStatements as $values) {
        $query = 'INSERT INTO civicrm_option_value (`option_group_id`, `label`, `value`, `name`, `grouping`, `filter`, `is_default`, `weight`, `description`, `is_optgroup`, `is_reserved`, `is_active`, `component_id`, `visibility_id`) VALUES' . $values;
        CRM_Core_DAO::executeQuery($query, $queryParams);
      }
    }

    // CRM-12578 - Prior to this version a CSS file under drupal would disable core css
    if (!empty($config->customCSSURL) && strpos($config->userFramework, 'Drupal') === 0) {
      // The new setting doesn't exist yet - need to create it first
      CRM_Core_BAO_Setting::updateSettingsFromMetaData();
      CRM_Core_BAO_Setting::setItem('1', CRM_Core_BAO_Setting::SYSTEM_PREFERENCES_NAME, 'disable_core_css');
    }

    // CRM-13701 - Fix $config->timeInputFormat
    $sql = "
SELECT time_format
FROM civicrm_preferences_date
WHERE time_format IS NOT NULL
AND time_format <> ''
LIMIT 1
";
    $timeInputFormat = CRM_Core_DAO::singleValueQuery($sql);
    if ($timeInputFormat && $timeInputFormat != $config->timeInputFormat) {
      $params = array('timeInputFormat' => $timeInputFormat);
      CRM_Core_BAO_ConfigSetting::add($params);
    }

    // CRM-13698 - add 'Available' and 'No-show' activity statuses
    $insertStatus = array();
    $nsinc = $avinc = $inc = 0;
    if (!CRM_Core_OptionGroup::getValue('activity_status', 'Available', 'name')) {
      $insertStatus[] = "(%1, 'Available', %2, 'Available', NULL, 0, NULL, %3, 0, 0, 1, NULL, NULL)";
      $avinc = $inc = 1;
    }
    if (!CRM_Core_OptionGroup::getValue('activity_status', 'No_show', 'name')) {
      $insertStatus[] = "(%1, 'No-show', %4, 'No_show', NULL, 0, NULL, %5, 0, 0, 1, NULL, NULL)";
      $nsinc = $inc + 1;
    }
    if (!empty($insertStatus)) {
      $acOptionGroupID = CRM_Core_DAO::getFieldValue('CRM_Core_DAO_OptionGroup', 'activity_status', 'id', 'name');
      $maxVal = CRM_Core_DAO::singleValueQuery("SELECT MAX(ROUND(op.value)) FROM civicrm_option_value op WHERE op.option_group_id = $acOptionGroupID");
      $maxWeight = CRM_Core_DAO::singleValueQuery("SELECT MAX(weight) FROM civicrm_option_value WHERE option_group_id = $acOptionGroupID");

      $p[1] = array($acOptionGroupID, 'Integer');
      if ($avinc) {
        $p[2] = array($avinc+$maxVal, 'Integer');
        $p[3] = array($avinc+$maxWeight, 'Integer');
      }
      if ($nsinc) {
        $p[4] = array($nsinc+$maxVal, 'Integer');
        $p[5] = array($nsinc+$maxWeight, 'Integer');
      }
      $insertStatus = implode(',', $insertStatus);

      $sql = "
INSERT INTO
civicrm_option_value (`option_group_id`, label, `value`, `name`, `grouping`, `filter`, `is_default`, `weight`, `is_optgroup`, `is_reserved`, `is_active`, `component_id`, `visibility_id`)
VALUES {$insertStatus}";
      CRM_Core_DAO::executeQuery($sql, $p);
    }

    $this->addTask(ts('Upgrade DB to %1: SQL', array(1 => '4.4.1')), 'task_4_4_x_runSql', $rev);
    $this->addTask('Patch word-replacement schema', 'wordReplacements_patch', $rev);
  }
So you have been trying to add a similar function to FourFive.php - however, it seems you are just copying and pasting an IF statement into the bottom of the FourFive.php file:
if ($config->enable_bootstrap_css === 1 && strpos($config->userFramework, 'Drupal') === 1) {
      CRM_Core_BAO_Setting::updateSettingsFromMetaData();
      CRM_Core_BAO_Setting::setItem('1', CRM_Core_BAO_Setting::SYSTEM_PREFERENCES_NAME, 'enable_bootstrap_css');
    }
This is where your problem is.

Notice that the disable_core_css setting is added within an overall function of function upgrade_4_4_1($rev) { - I anticipate you need to use a similar/appropriate function structure within the 4.5 incremental file - since you are just copying and pasting an if statement, my best guess is that it is not getting run in the revision upgrade/installation. You will need to utilize the correct release that you are going to add this to, then mimic the portion of the FourFour.php that is relevant - do not just copy and paste, you need to read through the function and pick it apart to gather the pieces that you need, and ensure you understand what the entire function is doing so that you can replicate it for your needs in 4.5.

Eileen - do you have any other suggestions as to what is wrong on this? As you see above he has also added to civicrm/settings/Core.setting.php
'enable_bootstrap_css' => array(
    'group_name' => 'CiviCRM Preferences',
    'group' => 'core',
    'name' => 'enable_bootstrap_css',
    'type' => 'Boolean',
    'quick_form_type' => 'YesNo',
    'default' => '0',
    'add' => '4.5',
    'title' => 'Use Bootstrap CSS',
    'is_domain' => 1,
    'is_contact' => 0,
    'description' => 'Enables Bootsrap CSS files',
    'help_text' => 'This is a work in progress. It might break default CSS. Check documentation at wiki.civicrm.org/confluence/display/BootstrapUI for more details',
  ),
Plus putting the setting in CRM/Admin/Form/Setting/Url.php (similar to your example, he is adding this to the resources area):
/**
* This class generates form components for Site Url
*
*/
class CRM_Admin_Form_Setting_Url extends CRM_Admin_Form_Setting {
  protected $_settings = array(
    'cvv_backoffice_required' => CRM_Core_BAO_Setting::CONTRIBUTE_PREFERENCES_NAME,
    'disable_core_css' => CRM_Core_BAO_Setting::SYSTEM_PREFERENCES_NAME,
    'enable_bootstrap_css' => CRM_Core_BAO_Setting::SYSTEM_PREFERENCES_NAME,
  );
  /**
* Function to build the form
*
* @return void
* @access public
*/
  public function buildQuickForm() {
    CRM_Utils_System::setTitle(ts('Settings - Resource URLs'));
    $settingFields = civicrm_api('setting', 'getfields', array(
      'version' => 3
    ));

    $this->addElement('text', 'userFrameworkResourceURL', ts('CiviCRM Resource URL'));
    $this->addElement('text', 'imageUploadURL', ts('Image Upload URL'));
    $this->addElement('text', 'customCSSURL', ts('Custom css URL'));
    $this->addYesNo('enable_bootstrap_css', ts('Use Bootstrap CSS'));
    $this->addElement('text', 'extensionsURL', ts('Extension Resource URL'));
    $this->addYesNo('enableSSL', ts('Force Secure URLs (SSL)'));
    $this->addYesNo('verifySSL', ts('Verify SSL Certs'));
    // FIXME: verifySSL should use $_settings instead of manually adding fields
    $this->assign('verifySSL_description', $settingFields['values']['verifySSL']['description']);

    $this->addFormRule(array('CRM_Admin_Form_Setting_Url', 'formRule'));

    parent::buildQuickForm();
  }
When this combo did not retain the value upon save (it shows up fine, it just doesn't save), I believe that is when we started down the database route - that is good if it's not necessary...do you have any other pointers as to why it might not save though?

I am at the extent of my knowledge related to the settings stuff so if you guys have ideas it would be greatly appreciated!

Has anyone checked and see how these changes affect the other two CMS'es - Joomla and WP.

and what needs to be done for it to co-exist with those two also

lobo