Petit topic pour partager l’utilisation de MIGX avec la possibilité de créer plusieurs sorte de bloc.
je m’explique :
MIGX permet d’ajouter des éléments multiples avec une seul TV. avec la possibilité de choisir le type d’élément à ajouter via une liste déroulante.
ici je souhaite avoir la possibilité pour mon client de choisir le type de bloc à ajouter dans une partie de sa page,
soit un bloc avec
soit un bloc avec
Donc nous allons commencer par créer la TV appelée "MultiBloc"
choisir MIGX
Onglets du formulaire:
[
{"formname":"BlocType_1", "formtabs":
[
{"caption":"titre + photo + lien", "fields": [
{"field":"Titre_blocType_1","caption":"Titre"},
{"field":"photo_blocType_1","caption":"Photo","inputTV":"image"},
{"field":"lien_blocType_1","caption":"Lien","inputTV":"url"}
]}
]
},
{"formname":"BlocType_2", "formtabs":
[
{"caption":"titre + paragraphe + lien", "fields": [
{"field":"Titre_blocType_2","caption":"Titre"},
{"field":"paragraphe_blocType_2","caption":"Paragraphe","inputTV":"richtext"},
{"field":"lien_blocType_2","caption":"Lien","inputTV":"url"}
]}
]
}
]
Colonnes de la grille :
[{
"header": "Type de bloc"
,"width": "30"
,"sortable": "true"
,"dataIndex": "MIGX_formname"
},{
"header": "Titre"
,"width": "160"
,"sortable": "false"
,"dataIndex": "Titre_blocType_1"
},{
"header": "Titre"
,"width": "160"
,"sortable": "false"
,"dataIndex": "Titre_blocType_2"
}]
on relie cette TV avec un template
dans ce template on appelle le snippet "getImageList " :
[[!getImageList? &tpl=`@FIELD:MIGX_formname`&tvname=MultiBloc`]]
"@FIELD:MIGX_formname" fait référence à dataIndex dans le JSON "Colonnes de la grille"
il faut créer les 2 chunks et leur donner le nom des différents "formname" renseigner dans le JSON "Onglets du formulaire"
donc pour ici :
chunk 1 : BlocType_1
<div>
<div>[[+Titre_blocType_1]]</div>
<div><img src="[[+photo_blocType_1]]" alt="" /></div>
<div><a href="[[+lien_blocType_1]]">Continuer</a></div>
</div>
<div class="clear"></div>
et 1 chunk BlocType_2
<div>
<div>[[+Titre_blocType_2]]</div>
<div><p>[[+paragraphe_blocType_2]]</p></div>
<div><a href="[[+lien_blocType_2]]">Continuer</div>
</div>
<div class="clear"></div>
je trouve cet EXTRA vraiment top top, super pratique.
j’espère que ça pourra vous être utile
Laurent
☆ A M B ☆
