NAPC Demo  

Essayez gratuitement NAPContent sur notre site demo !

Devenez membre

 et bénéficiez de toutes nos solutions!

Devenez membre

Découvrez les sites

qui utilisent NAPContent !

Voir
plus

Template spécifique pour le champ Groupfields

Le plugin de groupe de champ a un fonctionnement spécifique. Ces données dépendent directement de la structure de son layout de vue formulaire. 

Voici un exemple avec la saisie d'un bloc d'adresse : 

<?php
defined('_JEXEC') or die;
/** @var NapcItem $item */
/** @var NapcObjFieldTpl $field */
JHtml::_('jquery.ui', ['core', 'sortable']);
JHtml::script('com_napc/fieldgroupfields/fieldgroupfields.js', false, true);
$untranslate = $item->getUntranslatableAttribs($field);
ob_start();?>
    <div class="napc-groupfields-zone<?= $field->params->get('default_value', '0') ? ' napc-groupfields-default-value' : ''; ?>" data-fieldname="<?= $field->fieldname ?>">
        <?php if (!$item->getUntranslatableAttribs($field)): ?>
            <button type="button" class="btn btn-success napc-groupfields-add"><i class="fa fa-plus-circle icon-new"></i></button>
        <?php endif; ?>
        <?php
        if (is_array($field->value) && count($field->value)){
            foreach($field->value as $index => $groupVal): ?>
                <div class="napc-groupfields-el">
                    <input type="text" <?= $untranslate ?> <?= $field->params->get('required', '0') ? 'required' : ''; ?> name="<?= $field->fieldname.'['.$index.'][address]' ?>"  class="input-large" value="<?= htmlentities(@$groupVal['address']) ?>" placeHolder="<?= JText::_('PLG_NAPC_FIELD_GROUPFIELDS_ADDRESS') ?>" /><br/>
                    <input type="text" <?= $untranslate ?> name="<?= $field->fieldname.'['.$index.'][zip]' ?>" class="input-mini" value="<?= htmlentities(@$groupVal['zip']) ?>"  placeHolder="<?= JText::_('PLG_NAPC_FIELD_GROUPFIELDS_ZIP') ?>" />
                    <input type="text" <?= $untranslate ?> name="<?= $field->fieldname.'['.$index.'][city]' ?>" class="input-small" value="<?= @htmlentities($groupVal['city']) ?>"  placeHolder="<?= JText::_('PLG_NAPC_FIELD_GROUPFIELDS_CITY') ?>" />
                    <?php if (!$item->getUntranslatableAttribs($field)): ?>
                        <a href="#" class="napc-groupfields-sort" style="cursor: move"  tabindex="-1"><i class="fa fa-thrash icon-move"></i></a>
                        <button type="button" class="btn btn-mini btn-danger napc-groupfields-del" tabindex="-1"><i class="fa fa-thrash icon-remove"></i></button>
                    <?php endif; ?>
                </div>
                <?php
            endforeach;
        }
        ?>
        <div class="napc-groupfields-tpl" style="display: none">
            <div class="napc-groupfields-el">
                <input type="text" <?= $untranslate ?> <?= $field->params->get('required', '0') ? 'required' : ''; ?> class="input-large" data-name="address" placeHolder="<?= JText::_('PLG_NAPC_FIELD_GROUPFIELDS_ADDRESS') ?>" /><br/>
                <input type="text" <?= $untranslate ?> class="input-mini" data-name="zip" placeHolder="<?= JText::_('PLG_NAPC_FIELD_GROUPFIELDS_ZIP') ?>" />
                <input type="text" <?= $untranslate ?> class="input-small" data-name="city" placeHolder="<?= JText::_('PLG_NAPC_FIELD_GROUPFIELDS_CITY') ?>" />
                <?php if (!$item->getUntranslatableAttribs($field)): ?>
                    <a href="#" class="napc-groupfields-sort" style="cursor: move"  tabindex="-1"><i class="fa fa-arrows-alt icon-move"></i></a>
                    <button type="button" class="btn btn-mini btn-danger napc-groupfields-del" tabindex="-1"><i class="fa fa-thrash icon-remove"></i></button>
                <?php endif; ?>
            </div>
        </div>
    </div>
<?php // pour les champs multiples il faut prévoir le cas où il n'y a pas de valeur et donc afficher un champ fictif ?>
    <input name="<?= $field->fieldname; ?>[]" type="hidden"/>
<?php
$content = ob_get_clean();
echo NapcHelper::renderLayout('form.'.$field->params->get('layout-file','bootstrap2'),compact('items','field','content'));

 Il est tout d'abord impératif de charger le javascript permettant d'ajouter les blocs dynamiquement.

Structure de l'élément parent : 

<div class="napc-groupfields-zone<?= $field->params->get('default_value', '0') ? ' napc-groupfields-default-value' : ''; ?>" data-fieldname="<?= $field->fieldname ?>">

 L'élément doit posséder la classe "napc-groupfields-zone" , il est également possible de lui affecter la classe "napc-groupfields-default-value" qui permet à l'utilisateur de ne pas cliquer sur le bouton ajout pour créer son premier groupe de valeur. Le bloc doit également contenir l'attribut "data-fieldname" avec le nom du champ.

Le bouton d'ajout d'un groupe de valeur 

<button type="button" class="btn btn-success napc-groupfields-add"><i class="fa fa-plus-circle icon-new"></i></button>

 Le bouton associé à la classe "napc-groupfields-add" permet d'ajouter un groupe de valeur selon le template établit. 

Affichage des valeurs saisies : 

foreach($field->value as $index => $groupVal): ?>
<div class="napc-groupfields-el">
    <input type="text" name="<?= $field->fieldname.'['.$index.'][text]' ?>" <?= $untranslate; ?> <?= $field->params->get('required', '0') ? 'required' : ''; ?> value="<?= htmlentities(@$groupVal['text']) ?>" />
    <?php if (!$untranslate): ?>
        <a href="#" class="napc-groupfields-sort" style="cursor: move"  tabindex="-1"><i class="fa fa-arrows-alt icon-move"></i></a>
        <button type="button" class="btn btn-mini btn-danger napc-groupfields-del" tabindex="-1"><i class="fa fa-trash icon-remove"></i></button>
    <?php endif; ?>
</div>
<?php
endforeach;

 Liste l'ensemble des valeurs déjà saisies. Chaque groupe doit contenir un parent avec la classe "napc-groupfields-el". Chaque zone de saisie doit avec un nom qui est  structuré de la manière suivante : "nom du champ[index][nom de la valeur]".

L'élément avec la classe "napc-groupfields-sort" permet de réordonner le groupe de valeur.

L'élément avec la classe "napc-groupfields-del" permet de supprimer le groupe de valeur.

Il faut ensuite reprendre la structure pour créer un template permettant de créer de nouvelles valeurs. Le template avoir un parent avec la classe "napc-groupfields-tpl" qui est lui même un enfant de "napc-groupfields-zone" 

<div class="napc-groupfields-tpl" style="display: none">
    <div class="napc-groupfields-el">
        <input type="text" <?= $untranslate; ?> <?= $field->params->get('required', '0') ? 'required' : ''; ?> data-name="text" />
        <?php if (!$untranslate): ?>
            <a href="#" class="napc-groupfields-sort" style="cursor: move"  tabindex="-1"><i class="fa fa-arrows-alt icon-move"></i></a>
            <button type="button" class="btn btn-mini btn-danger napc-groupfields-del" tabindex="-1"><i class="fa fa-trash icon-remove"></i></button>
        <?php endif; ?>
    </div>
</div>

 Le template est structuré de la même manière que l'affichage des valeurs présentait un peu plus haut à deux exceptions près :

  • Il n'est pas nécessaire d'affecter un nom aux zones de saisie
  • Il est nécessaire d'ajouter au zone de saisies l'attribut "data-name" qui reprend en valeur le la valeur du groupe.

Enfin il est très important en fin de template d'ajouter un champ "hidden" qui permet de bien valider le champ si aucune information n'ai saisi.  

<input name="<?= $field->fieldname; ?>[]" type="hidden"/> 
×
Ce site utilise des cookies pour vous offrir le meilleur service. En continuant, vous acceptez de recevoir les cookies sur ce site.