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

Créer son template

Chaque template est composé de 5 vues différentes : adminlist,form,item,list et module.

Les fichiers d'un template pourront donner lieu à la création de plusieurs templates dans NAPContent. En effet, cela permet d'utiliser des paramètres différents pour certains templates ou bien tout simplement de charger des champs différents, tout en gardant une structure de fichier identique commune pour l'affichage.

 Lors de la création de votre template il n'est pas forcément nécessaire de créer l'affichage pour l'ensemble de ses vues, vous pouvez donc créer uniquement les vues qui nous intéresse.

Il est important de bien respecter le nom des fichiers correspond à la vue et de toujours mettre en place le fichier xml associé à son fichier php.

Prenons exemple avec la vue item.

Structure du fichier XML

 Fichier item.xml permettant de gérer les différentes positions et les paramètres.

<?xml version="1.0" encoding="utf-8"?>
<form>
    <fields name="params">
        <fieldset name="params">
            <field name="allowurlitem" label="COM_NAPC_PARAMS_ALLOW_TPL_URL" description="COM_NAPC_PARAMS_ALLOW_TPL_URL_DESC" type="list" default="0">
                <option value="0">JNO</option>
                <option value="1">JYES</option>
            </field>
        </fieldset>
    </fields>
    <fields name="position">
        <fieldset name="position">
            <field name="top" type="napctplpos" label="Top" multiple="true"/>
            <field name="content" type="napctplpos" label="Content" multiple="true"/>
            <field name="bottom" type="napctplpos" label="Bottom" multiple="true"/>
            <field name="render" type="napctplpos" label="Render" multiple="true"/>
        </fieldset>
    </fields>
    <fieldset name="details">
        <field type="text" name="id" filter="unset" label="JGLOBAL_FIELD_ID_LABEL" readonly="true"/>
        <field type="text" name="name" filter="unset" label="COM_NAPC_NAME" readonly="true"/>
        <field type="text" name="pathfile" filter="unset" label="COM_NAPC_PATHFILE" readonly="true"/>
    </fieldset>
</form>

Tout d'abord les paramètres du template sont définis dans l'entrée XML <fieldset name="params">, vous pouvez créer autant de paramètres que vous le souhaitez en utilisant une structure standard de Joomla!

Dans l'exemple ci-dessus, le paramètre "allowurlitem" est défini afin de savoir si ce template peut être utilisé via un paramètre d'URL "naptpl" (cela permet de forcer un template pour une vue spécifique). 

Vous pouvez définir vos propres paramètres qui pourront agir avec le fichier php du template. Pour utiliser un paramètre dans un fichier de template, il suffit d'écrire la ligne suivante :

$this->params->get('param_name');

Une deuxième section nommé <fieldset name="position"> permet de définir les différentes positions de template. Une position est une zone dans laquelle il est possible d'affecter une liste de champ afin de générer leur affichage.  Il est possible de trier cette liste de champ et dans modifier l'affichage par défaut.  

Vous pouvez à tout moment créer ou modifier des positions existantes (attente si vous supprimez ou renommez une position, vous supprimerez également l'association avec l'ensemble des champs affectés. 

Pour ajouter une nouvelle position, voici le format à respecter :

<field name="position_name" type="napctplpos" label="Position's name" multiple="true"/>

Le "name" représente le nom technique pour exploiter la position dans le template alors que le "label" est juste présent pour identifier la position lors de l'affectation des champs.

La dernière section dans le fichier XML <fieldset name="details"> ne doit pas être modifiée, elle est utilisée pour le bon fonctionnement du composant et elle doit être présente dans n'importe quel fichier de configuration XML d'un template.

Template affichage Item

Structure du fichier XML

La structure est basée sur le modèle de base défini sur cette page.

Fichier du template

Fichier item.php représentant le template HTML de la vue item. 

<?php
defined('_JEXEC') or die;
/** @var NapcItem $this */
?>
<div id="napc-item">
    <?=  $this->item->events['onContentBeforeDisplay'] ?>
    <?php if (@$this->tpl['top']): ?>
        <div id="napc-item-top">
            <?php foreach ($this->tpl['top'] as $field) : ?>
                <?= $this->renderField($field, $field->layout); ?>
            <?php endforeach; ?>
        </div>
    <?php endif; ?>
    <?=  $this->item->events['onContentAfterTitle'] ?>
    <?php if (@$this->tpl['content']): ?>
        <div id="napc-item-content">
            <?php foreach ($this->tpl['content'] as $field) : ?>
                <?= $this->renderField($field, $field->layout); ?>
            <?php endforeach; ?>
        </div>
    <?php endif; ?>
    <?php if (@$this->tpl['bottom']): ?>
        <div id="napc-item-bottom">
            <?php foreach ($this->tpl['bottom'] as $field) : ?>
                <?= $this->renderField($field, $field->layout); ?>
            <?php endforeach; ?>
        </div>
    <?php endif; ?>
    <?=  $this->item->events['onContentAfterDisplay'] ?>
</div>

 Vous pouvez inclure tout le code HTML que vous souhaitez dans lequel se greffera vos différents champs de l'item. 

Pour afficher une liste de champs inclus dans une position, il faut respecter le format suivant :

Pour une vue item ou form : 

// vérifie si la position existe bien et si elle contient des champs
<?php if (@$this->tpl['position_name']): ?>
// Parcours de la liste des champs affectés à la position
        <?php foreach ($this->tpl['top'] as $field) : ?>
// affichage du champ
            <?= $this->renderField($field, $field->layout); ?>
        <?php endforeach; ?>
<?php endif; ?>

  Afin d'afficher certains rendus d'événements propres à Joomla, il est possible d'utiliser la propriété "events" d'un item. Les événements supportés sont : onContentPrepare, onContentAfterTitle, onContentBeforeDisplay, onContentAfterDisplay. 

<?=  $this->item->events['onContentAfterTitle'] ?>

Template affichage List/Module/Adminlist

Structure du fichier XML

La structure est basée sur le modèle de base défini sur cette page.

Il est également possible pour les vues adminlist et list de rajouter une position technique permettant d'ajouter des filtres ou de pré filtrer les affichages.

Il suffit d'ajouter la position avec le nom réservé "filters"

<field name="filters" type="napctplpos" label="Filters" multiple="true"/>

Pour la vue liste uniquement il y a également une position qui permet d'utiliser l'affichage de certains champ qui ne sont pas rattaché à un item mais à une liste d'item. Un affichage global pour l'ensemble des items. Il faut rajouter une position avec un préfixe réservé "fieldlist"

<field name="fieldlist-global" type="napctplpos" label="Globlal" multiple="true"/>

Fichier du template

Template de la vue list.php 

<?php
defined('_JEXEC') or die;
/** @var NapcList $this */
$items = $this->getItems();?>
<h2><?= $this->getCatTitle() ?></h2>
<p><?= $this->getCatDesc() ?></p>
<?php if (count($this->filters)): ?>
    <form action="<?= JUri::getInstance()->toString(); ?>" method="post" name="adminForm" id="adminForm">
        <?php foreach ($this->filters as &$filter) : ?>
            <?= $this->renderFilter($filter, $filter->layout); ?>
        <?php endforeach; ?>
        <button type="submit" class="btn" id="napc-filter-submit"><?= JText::_('COM_NAPC_FILTER'); ?></button>
        <button type="reset" class="btn" id="napc-filter-reset"><?= JText::_('COM_NAPC_CLEAR'); ?></button>
    </form>
<?php endif;
if (@$this->tpllist['fieldlist-global'] && count($this->tpllist['fieldlist-global'])): ?>
    <?php foreach ($this->tpllist['fieldlist-global'] as $field) : ?>
        <?= $this->renderFieldList($field, $field->layout); ?>
    <?php endforeach; ?>
<?php endif;
if (count($items)):
    if (@$this->tpl['columns'] && count($this->tpl['columns'])): ?>
        <table class="table table-striped" id="articleList">
            <thead>
            <tr>
                <?php foreach ($this->tpl['columns'] as $field) : ?>
                    <th>
                        <?= JText::_($field->label); ?>
                    </th>
                <?php endforeach; ?>
            </tr>
            </thead>
            <tbody>
            <?php
            foreach ($items as $i => $item): ?>
                <tr class="row<?= $i % 2; ?>">
                    <?php foreach ($this->tpl['columns'] as $field) : ?>
                        <td <?= @$this->filters[$field->name]->value ? 'class="active-filter"' : '' ?>>
                            <?= $this->renderField($item, $field, $field->layout); ?>
                        </td>
                    <?php endforeach; ?>
                </tr>
            <?php endforeach; ?>
            </tbody>
            <?php if ($this->getPagination()->pagesTotal > 1):?>
            <tfoot>
            <tr>
                <td colspan="99" style="text-align: center">
                    <?php
                    $pagination = $this->getPagination()->getData();
                    echo '<nav class="text-center"><ul class="pagination pagination-lg">';
                    if ($pagination->start->link) {
                        echo '<li><a href="' . $pagination->start->link . '" title="' . $pagination->start->text . '">' . $pagination->start->text . '</i></a></li>';
                    } else {
                        echo '<li class="disabled"><span title="' . $pagination->start->text . '">' . $pagination->start->text . '</span></li>';
                    }
                    if ($pagination->previous->link) {
                        echo '<li><a href="' . $pagination->previous->link . '" title="' . $pagination->previous->text . '">' . $pagination->previous->text . '</a></li>';
                    } else {
                        echo '<li class="disabled"><span title="' . $pagination->previous->text . '">' . $pagination->previous->text . '</span></li>';
                    }
                    foreach ($pagination->pages as $page) {
                        echo '<li class="' . ($page->active ? 'active' : '') . '">';
                        if ($page->active) {
                            echo '<span>' . $page->text . '</span>';
                        } else {
                            echo '<a href="' . $page->link . '"><span>' . $page->text . '</span></a>';
                        }
                        echo '</li>';
                    }
                    if ($pagination->next->link) {
                        echo '<li><a href="' . $pagination->next->link . '" title="' . $pagination->next->text . '">' . $pagination->next->text . '</a></li>';
                    } else {
                        echo '<li class="disabled"><span title="' . $pagination->next->text . '">' . $pagination->next->text . '</span></li>';
                    }
                    if ($pagination->end->link) {
                        echo '<li><a href="' . $pagination->end->link . '" title="' . $pagination->end->text . '">' . $pagination->end->text . '</a></li>';
                    } else {
                        echo '<li class="disabled"><span title="' . $pagination->end->text . '">' . $pagination->end->text . '</span></li>';
                    }
                    echo '</ul></nav>';
                    ?>
                </td>
            </tr>
            </tfoot>
            <?php endif; ?>
        </table>
    <?php endif; ?>
<?php else: ?>
    <div class="alert alert-warning">
        <h4 class="alert-heading"><?= JText::_('COM_NAPC_NOITEMS'); ?></h4>
    </div>
<?php endif;

 Pour afficher les informations de la catégorie en version traduite, vous pouvez utiliser le code suivant :

<h2><?= $this->getCatTitle() ?></h2>
<p><?= $this->getCatDesc() ?></p>

Pour afficher les filtres utiliser le code suivant :

<?php if (count($this->filters)): ?>
    <form action="<?= JUri::getInstance()->toString(); ?>" method="post" name="adminForm" id="adminForm">
        <?php foreach ($this->filters as &$filter) : ?>
            <?= $this->renderFilter($filter, $filter->layout); ?>
        <?php endforeach; ?>
        <button type="submit" class="btn" id="napc-filter-submit"><?= JText::_('COM_NAPC_FILTER'); ?></button>
        <button type="reset" class="btn" id="napc-filter-reset"><?= JText::_('COM_NAPC_CLEAR'); ?></button>
    </form>
<?php endif;

Pour afficher un champ d'une position globale, utiliser le code suivant :

if (@$this->tpllist['fieldlist-global'] && count($this->tpllist['fieldlist-global'])): ?>
    <?php foreach ($this->tpllist['fieldlist-global'] as $field) : ?>
        <?= $this->renderFieldList($field, $field->layout); ?>
    <?php endforeach; ?>
<?php endif;

Pour récupérer les items de la liste et les parcourir :

$items = $this->getItems();
if (count($items)):
    <?php foreach ($items as $i => $item): ?>
     // affichage des champs des items
    <?php endforeach; ?>
<?php else: ?>
    <?= JText::_('COM_NAPC_NOITEMS'); ?>
<?php endif;

Pour afficher les champs des positions de chaque item

<?php if (@$this->tpl['position_name']): ?>
    <?php foreach ($this->tpl['position_name'] as $field) : ?>
        <?= $this->renderField($item, $field, $field->layout); ?>
    <?php endforeach; ?>
<?php endif; ?>

 Gestion de la pagination :

<?= $this->pagination->getListFooter(); ?>

Template affichage Form

 Structure du fichier XML

La structure est basée sur le modèle de base défini sur cette page.

Il existe deux paramètres techniques supplémentaires qui peuvent mettre en place afin de gérer l'intéraction avec la saisie en frontend. 

<field type="text" default="" name="return" label="Return URL"/>
<field type="text" default="" name="return_message" label="Return Message"/>

 Le paramètre return permet de définir l'URL de redirection après validation du formulaire.

Le paramètre return_message permet d'afficher un message après la validation du formulaire. 

Fichier du template

Le fichier form.php représetant le template HTML d'un formulaire de saisie. 

<?php
defined('_JEXEC') or die;
/** @var NapcItem $this */
JHtml::_('jquery.framework');
JHtml::_('script', 'system/html5fallback.js', false, true);
JHtml::_('behavior.formvalidation');
JHtml::_('behavior.keepalive');
JHtml::_('formbehavior.chosen', 'select:not(.select2,.chzn-disable)');
JHtml::_('bootstrap.popover');
JHtml::_('bootstrap.tooltip');
?>
<script type="text/javascript">
    Joomla.submitbutton = function (task) {
        if (task == 'form.cancel' || document.formvalidator.isValid(document.id('item-form'))) {
            Joomla.submitform(task, document.getElementById('item-form'));
        }
    }
</script>
<form action="<?= JRoute::_($this->id ? NapcHelperRoute::getEditItem($this->id,true):NapcHelperRoute::getaddItem($this->type,$this->cat,true)); ?>" method="post" name="adminForm" id="item-form" class="form-validate" enctype="multipart/form-data">
    <?php if (@$this->tpl['fields']): ?>
        <div class="form-inline form-inline-header">
            <?php foreach ($this->tpl['fields'] as $field) : ?>
                <?= $this->renderField($field, $field->layout); ?>
            <?php endforeach; ?>
        </div>
    <?php endif; ?>
    <?php if (@$this->tpl['hidden']): ?>
        <div class="hidden-desktop hidden-tablet hidden-phone">
            <?php foreach ($this->tpl['hidden'] as $field) : ?>
                <?= $this->renderField($field, $field->layout); ?>
            <?php endforeach; ?>
        </div>
    <?php endif; ?>
    <?= JHtml::_('form.token'); ?>
    <input type="hidden" name="task" value=""/>
    <?php if ($returnURL = $this->params->get('return')):?>
        <input type="hidden" name="return" value="<?= NapcHelper::base64url_encode($returnURL) ?>"/>
    <?php endif;?>
    <?php if ($returnMessage = $this->params->get('return_message')):?>
        <input type="hidden" name="returnMessage" value="<?= NapcHelper::base64url_encode($returnMessage) ?>"/>
    <?php endif;?>
    <button type="button" class="btn btn-large btn-success pull-right" onclick="Joomla.submitbutton('form.save')"><?= JText::_('COM_NAPC_SAVE')?></button>
    <button type="button" class="btn btn-danger pull-left" onclick="Joomla.submitbutton('form.cancel')"><?= JText::_('COM_NAPC_CANCEL')?></button>
    <div class="clearfix"></div>
</form>

 Il est impératif d'ajouter le script permettant la soumission du formulaire : 

<script type="text/javascript">
    Joomla.submitbutton = function (task) {
        if (task == 'form.cancel' || document.formvalidator.isValid(document.id('item-form'))) {
            Joomla.submitform(task, document.getElementById('item-form'));
        }
    }
</script>

 Structure HTML du formulaire : 

<form action="<?= JRoute::_('index.php?option=com_napc&id=' . (int)$this->id); ?>" method="post"
      name="adminForm" id="item-form" class="form-validate" enctype="multipart/form-data">
// affichage des champs
        <?= JHtml::_('form.token'); ?>
        <input type="hidden" name="task" value=""/>
</form>

Affichage des champs d'une position 

 

<?php if (@$this->tpl['position_name']): ?>
        <?php foreach ($this->tpl['position_name'] as $field) : ?>
            <?= $this->renderField($field, $field->layout); ?>
        <?php endforeach; ?>
<?php endif; ?>

Template de Champ

Introduction

Les champs peuvent être affichés de manières différentes en fonction de la vue ou la position à laquelle ils sont affectés :

  • item : Affichage du champ dans une vue item
  • list : Affichage du champ dans une vue liste d'item
  • module : Affichage du champ dans un module
  • adminlist : Affichage du champ dans la liste des items en administration
  • form : Affichage du champ dans une vue de formulaire
  • filter : Affichage du champ en tant que filtre
  • fieldlist : Affichage du champ dans une vue liste en tant que champ global pour l'ensemble des items de la liste.

Chaque champ peut posséder plusieurs layouts de différentes vues. 

Pour créer une nouvelle layout il faut créer un fichier xml associé à un fichier php. Les deux doivent porter le même nom, il n'y pas de contrainte concernant le nom hormis qu'il est recommandé de les saisir en minuscule, sans espace et sans caractères spécifiques. 

Structure du fichier XML

Exemple de la structure xml d'une layout de champ. 

<?xml version="1.0" encoding="utf-8"?>
<layout type="item,list,module,adminlist">
    <form>
        <fieldset name="params">
        </fieldset>
    </form>
</layout>

 Avant tout chaque layout doit indiquer avec qu'elle rendu elle est disponible, pour cela il faut ajouter l'attribut "type" à la clé "layout" et lui indiquer la liste des rendus avec lesquels le layout est compatible.

Valeurs possibles : item, list, module, adminlist, form, filter et fieldlist.

Vous pouvez ensuite ajouter tous les paramètres que vous souhaitez pour gérer l'affichage de votre champ. Les paramètres seront ensuite accesible dans la layout de cette manière : 

$field->params->get('param_name);

 Certains paramètres sont standards et peuvent avoir un impact sur l'utilisation du champ :

Dans la vue formulaire :

  • use_translator : permet de définir si la traduction Google est activée ou non
  • napclayouts : permet de choisir un layout pour l'affichage du champ. 2 sont disponibles par défaut : bootstrap 2 et bootstrap 3. En savoir plus.

Dans les filtres :

  • filter_format : Sélectionne le format d'affichage du filtre. En savoir plus.

Fichier de template

Exemple avec le rendu du champ texte pour l'affichage 

<?php
/** @var NapcItem $item */
/** @var NapcObjFieldTpl $field */
defined('_JEXEC') or die;
if ($field->value):
    $value = $field->value;
    echo NapcHelper::renderLayout('default', compact('item', 'field', 'value'));
endif;

 Par défaut les champs utilisent un layout "default" pour afficher leur valeur. Cela évite d'avoir des structures répétitives. 

Cela n'est pas obligatoire cependant, il aurait été tout à fait possible dans la layout du champ d'inclure le HTML final. exemple :  

<?php
defined('_JEXEC') or die; 
/** @var NapcItem $item */
/** @var NapcObjFieldTpl $field */
?>
<div class="napc-<?= $field->field_type ?> napc-field-<?= $field->name?>">
  <?php
    if ($field->params->get('display_label') && JFactory::getApplication()->isSite())
        echo '<label class="pull-left">' . $field->label . ': </label>';
    echo $field-value;
    ?>
</div>

 Exemple avec le rendu du champ texte pour la saisie : 

<?php
defined('_JEXEC') or die;
/** @var NapcItem $item */
/** @var NapcObjFieldTpl $field */
ob_start(); ?>
    <input type="text" name="<?= $field->fieldname ?>" id="<?= $field->fieldid ?>" value="<?= htmlentities($field->value) ?>"
           class="form-control <?= $field->params->get('plgtext-form-size', 'input-medium'); ?>" <?= $field->params->get('required', '0') ? 'required="true"' : ''; ?>
        <?= $field->params->get('plgtext-form-placeholder', '') ? 'placeHolder="' . JText::_($field->params->get('plgtext-form-placeholder', '')) . '"' : ''; ?>
        <?= $item->getUntranslatableAttribs($field); ?> />
<?= $item->getTranslateButton($field, $field->fieldid, @$item->original->fields[$field->name]->value); ?>
<?php
$content = ob_get_clean();
echo NapcHelper::renderLayout('form.' . $field->params->get('layout-file', 'bootstrap2'), compact('items', 'field', 'content')); 

Template spécifique pour le champ Relation

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.