Table of Contents
- Introduction
- Requirements
- Basic Setup
- Step 1: Creating A New Option
- Step 2: Creating A New Admin Template
- In-Depth Explanations & Additions
- Data-Type: Array
- Admin Template: Foreach-Loop
- Admin Template: Styling
- Altering The Entry Field Scheme
Introduction
View attachment 111721
Ever had a look at the 'Options for Choice Fields' when creating a custom user field and thought: 'Man, that option to add additional fields would be exactly whad I'd need for my addon right now...'? This tutorial is meant to help you out of exactly such a situation and maybe comes in handy for other projects too.
Requirements
You should bring some basic knowledge on how to handle various things in the XenForo ACP. This tutorial is not 100% directed towards beginners, but feel free to ask any questions in the discussion, if you need additional help.
Depending on how you're going to use the option, you should either be familiar with handling XenForo option arrays inside your custom php-script or in XenForo templates.
Basic Setup
We'll start of assuming that you already created an addon alongside with an option group for it, which should look somewhat like this:
View attachment 111724
It is likely that you already did to create your addon, but if not: remember to turn on debug mode.
Step 1: Creating A New Option
Hit '+ Add Option' to start creating your new option. For a basic setup, we'll use the following options to generate a basic option for our process.
- Edit Format: Named Template
- Format Paramenters: Choose a unique name here, at best related to your addon. This is the name for the admin template we are going to create later on, so remember it!
- Data Type: array
- Default Value: a:0:{}
- Array Sub-Options: *
Also give your option ID, title and all the other stuff required to create it. Assign it to whereever you want it to appear, then hit 'Save Option'.
Don't worry if you can't see any new option after saving. This comes from the fact, that we're using a template for our option to be displayed, which is not yet in existence and therefor displaying nothing. We're going to change this in the next step.
Step 2: Creating A New Admin Template
Navigate to Development -> Admin Templates and hit '+ Create Admin Template'. Enter the unique name you have entered in "Format Parameters" before and then copy the following basic code into the template for now:
HTML:
<xen:controlunit label="{$preparedOption.title}">
<ul class="FieldChoices">
<xen:foreach loop="$preparedOption.option_value" key="$choice" value="$text">
<xen:if is="{$text}">
<li>
<input type="text" name="{$fieldPrefix}[{$preparedOption.option_id}][]" value="{$text}" class="textCtrl" placeholder="{xen:phrase text}" size="25" />
</li>
</xen:if>
</xen:foreach>
<li>
<input type="text" name="{$fieldPrefix}[{$preparedOption.option_id}][]" class="textCtrl" placeholder="{xen:phrase text}" size="25" />
</li>
</ul>
<input type="button" value="{xen:phrase add_additional_choice}" class="button smallButton FieldAdder" data-source="ul.FieldChoices li" />
<p class="explain">{xen:raw $preparedOption.explain}</p>
{xen:raw $editLink}
</xen:controlunit>
Thanks to
@Hoffi, this template is now potentially reuseable for every option you want to have in that scheme. You only need to create a copy if you plan on things like changing the type of input to a number or something similar. It automatically fetches
You should now be able to head back to your option group and see the new template fully working.
View attachment 111727
In-Depth Explanations & Additions
Data-Type: Array
Shortly spoken this will tell XenForo to store all your fields into a single option in the database and load it as array later on. The default value is just a simple empty array. You'll find all entries in an array without ordered indexes, so you either need to rework your array first or you'll only be able to iterate over all elements at once, which is probably what you want though.
Admin Template: Foreach-Loop (LOC 3-9)
These seven lines of code are responsible for loading your stored options and represent them in the option group. The if-statement will catch all empty fields, which have been previously stored and remove them on the next time you save.
You still have to fetch empty fields in your templates/php code though!
Admin Template: Styling
When you plan to use a lot of options, you may require additional styling. You may want to limit the closing ul-tag in height and make it scrollable or display the entry-fields as inline-block elements to allow multiple fields to appear in a single line. You can either use inline-styling or include a second admin template as you would with a normal XenForo css template. Please note that inline-styling from a button or its enclosing l-tag is not coppied over when hitting the "Add additional choice"-Button.
Altering The Entry Field Scheme
You may find yourself in a situation where you don't need simple text inputs or more than one text input for each option like in the custom field options set. You can simply change the code inside of the li-tag to achieve this, the built-in XenForo script will ensure that you still create an exact copy of that entry field scheme upon hitting the 'Add Additional Choice' button. Remember to keep the empty field below the foreach-loop consistent with these changes though.
![[xFv]](/community/data/avatars/s/90/90390.jpg?1701363589){kind=avatar}
