How to create an ACP option with unlimited entries [Deleted]

[Lukas W.]

katsulynx submitted a new resource:

How to create an ACP option with unlimited entries - A stylish alternative to a simple textbox, stored in an array

Table of Contents

1. Introduction
2. Requirements
3. Basic Setup
4. Step 1: Creating A New Option
5. Step 2: Creating A New Admin Template
6. In-Depth Explanations & Additions
   1. Data-Type: Array
   2. Admin Template: Foreach-Loop
   3. Admin Template: Styling
   4. Altering The Entry Field Scheme

Introduction

View attachment 111721

Ever had a look...

Read more about this resource...

 

[Hoffi]

A good solution, but can improve the template with the following:

Simple Change OPTIONID to this:

{$preparedOption.option_id}

and instead of option[OPTIONID] better use

{$fieldPrefix}[{$preparedOption.option_id}]

Than add at the start

<xen:controlunit label="{$preparedOption.title}">

to use the original Name of the option.

and at least bette delete this:

<xen:if is="{$debugMode}">
<a href="admin.php?options/edit-option/OPTIONID" class="optionEditLink inputSupplementary Tooltip" data-offsetx="5" data-offsety="-8" data-tipclass="flipped"><span class="editText">{xen:phrase text}</span></a>
</xen:if>

and replace it with this:

{xen:raw $editLink}

to let the controller display the Icon.

Than, add this before closing the option.

<p class="explain">{xen:raw $preparedOption.explain}</p>

So, that we get thie Template at the end:

<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>

Now, you can use this Template without changes for every returning Option, if you use this multiple times.

 

[Lukas W.]

I've worked your improvements into the guide after testing them. Thanks for sharing!

 

[Cyb3r]

Hello @katsulynx, I have been trying all day long to make more text fields without no luck.

I'm trying to add 5 text fields (id, title, img, user, group), can you please give an example on how to make this work?

Thanks in advance!

 

[mcatze]

The default value should called a:0:{} ..

 

[Lukas W.]

This resource has been removed and is no longer available for download.

 

[Lukas W.]

Guide's here if you need it:

Spoiler

Table of Contents

1. Introduction
2. Requirements
3. Basic Setup
4. Step 1: Creating A New Option
5. Step 2: Creating A New Admin Template
6. In-Depth Explanations & Additions
   1. Data-Type: Array
   2. Admin Template: Foreach-Loop
   3. Admin Template: Styling
   4. 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:

<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.