Details
-
Type:
Improvement
-
Status: Open
-
Priority:
Trivial
-
Resolution: Unresolved
-
Affects Version/s: 4.7.18
-
Fix Version/s: 4.7.23
-
Component/s: Core CiviCRM
-
Labels:
-
Versioning Impact:Patch (backwards-compatible bug fixes)
-
Documentation Required?:Developer Doc
-
Funding Source:Needs Funding
-
Verified?:No
Description
Current best practice for creating new Smarty templates - especially forms - says that we should use less hard-coded layout in the .tpl file, and instead use what civix calls "Automatic Layout", loading the elements from the $elementName array. However, this doesn't allow us to add inline help icons.
This PR proposes a new method{{CRM_Core_Form->addHelp()}}, which would provide a simple way to programmatically add inline help icons.
If this is accepted, I would submit a second PR to civix so that the technique is demonstrated in the sample form that's created with civix generate:form. Below would be the new sample buildQuickForm and the new sample .tpl file.
My guess is that this could use some discussion - e.g. is CRM_Core_Form the best place for this? I'm hoping that this PR kickstarts that discussion.
New sample buildQuickForm:
public function buildQuickForm() { // add form elements $this->add( 'select', // field type 'favorite_color', // field name 'Favorite Color', // field label $this->getColorOptions(), // list of options TRUE // is required ); + $this->addHelp('favorite_color', 'id-favorite_color', '/optional/path/to.hlp/'); $this->addButtons(array( array( 'type' => 'submit', 'name' => ts('Submit'), 'isDefault' => TRUE, ), ));
Template change:
{* HEADER *}
<div class="crm-submit-buttons">
{include file="CRM/common/formButtons.tpl" location="top"}
</div>
{* FIELD EXAMPLE: OPTION 1 (AUTOMATIC LAYOUT) *}
{foreach from=$elementNames item=elementName}
<div class="crm-section">
- <div class="label">{$form.$elementName.label}</div>
+ <div class="label">{$form.$elementName.label} {if $elementName|array_key_exists:$help}{help id=$help.$elementName.id file=$help.$elementName.hlpFile}{/if}</div>
<div class="content">{$form.$elementName.html}</div>
<div class="clear"></div>
</div>
{/foreach}
{* FIELD EXAMPLE: OPTION 2 (MANUAL LAYOUT)
<div>
<span>{$form.favorite_color.label}</span>
<span>{$form.favorite_color.html}</span>
</div>
{* FOOTER *}
<div class="crm-submit-buttons">
{include file="CRM/common/formButtons.tpl" location="bottom"}
</div>