1. Chào mừng Khách tham gia cộng đồng Android Việt Nam

topbigslide

How to create an ACP option with unlimited entries 1.0.0

A stylish alternative to a simple textbox, stored in an array

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

    [​IMG]

    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:
    [​IMG]

    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:{}
    • 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="{xen:phrase Unique_Option_Name}:">
        <
    ul class="FieldChoices">
            <
    xen:foreach loop="$xenOptions.OPTIONID" key="$choicevalue="$text">
            <
    xen:if is="{$text}">
                <
    li>
                    <
    input type="text" name="options[OPTIONID][]" value="{$text}class="textCtrl" placeholder="{xen:phrase text}" size="25" />
                </
    li>
            </
    xen:if>
            </
    xen:foreach>
            <
    li>
                <
    input type="text" name="options[OPTIONID][]" class="textCtrl" placeholder="{xen:phrase TESPortal_almanach_article_name}" size="25" />
            </
    li>
        </
    ul>
        <
    input type="button" value="{xen:phrase add_additional_choice}" class="button smallButton FieldAdder" data-source="ul.FieldChoices li" />
    <
    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>
    </
    xen:controlunit>
    It is important that you replace all four occurences of OPTIONID with the unique ID you've chosen for your option. You may also want to change the phrase for the option in the first line of the code.

    You should now be able to head back to your option group and see the new template fully working. If some weird error on the top of the page appears, you likely have entered the wrong optionId in the template. Head back and correct it.

    [​IMG]

    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.

    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.

Bạn đang xem Zing.vn Mobile trên màn hình máy tính hoặc thiết bị trình chiếu mà giao diện này không hỗ trợ.

Chuyển về giao diện đầy đủ