Tabbed Options

Tabbed Options

DragonByte Tech

Well-known member
Thank You for posting this here!

I am stuck at the making a event code listener part.
I named the php file to MacroRender.php.
This is my namespace: xFv\Test\Listener.
and this is what I have in the code event listener and the php file: xFv\Test\Listener\MacroRenderas namespaces.

Also stuck at the admin template part it throws a red box error
saying it cant find my template while the admin template is made already with what you listed.
What is the Value formatting parameter you use for the template?
 
Last edited:
That's not the correct namespace, feel free to have a look at all other XenForo 2 files for the correct way of using name spaces and class names.


Fillip
 
That's not the correct namespace, feel free to have a look at all other XenForo 2 files for the correct way of using name spaces and class names.


Fillip
The "Listener" is not in my namespace, its just the folder the php file sits in.
this is my file structure leading to the php file, src\addons\xFv\Test\Listener\MacroRender.
where MacroRender is the php filename right?
How is this not right?
 
I am confused with this...
Do I make multiple option groups and use those for the tabs?
Or do I create multiple options in 1 group for the tabs?
 
I have it figured out.
Thanks for this guide, it helped me learn a little.
 
Last edited:
There is an issue with this... If you click "save" on the form, and one of your options fails a validation check for whatever reason (for instance, if you have max=50 and the user inputs 51).

Normally, XF will return an easy helper notice:
Please enter a valid value. The nearest valid value is 50.

However, with the tabbed options, if said failed validation check is not on the currently focused tab, there will be a javascript error, no save will execute, and there is no notification to the user.
An invalid form control with name='options[MyNS_MyOption]' is not focusable.
 
There is an issue with this... If you click "save" on the form, and one of your options fails a validation check for whatever reason (for instance, if you have max=50 and the user inputs 51).

Normally, XF will return an easy helper notice:


However, with the tabbed options, if said failed validation check is not on the currently focused tab, there will be a javascript error, no save will execute, and there is no notification to the user.
Not really much I can do about that I don’t think, sorry.


Fillip
 
DragonByte Tech updated Tabbed Options with a new update entry:

Tabbed Options 2: Separator Boogaloo

Alternative macro HTML in order to create full-width separators instead of tabs.

Code:
<xf:macro name="option_form_block" arg-group="" arg-options="!" arg-containerBeforeHtml="">
    <xf:if is="$options is not empty">
        <xf:form action="{{ link('options/update') }}" ajax="true" class="block">
            {$containerBeforeHtml|raw}
            <div class="block-container">
                <h3 class="block-formSectionHeader">
                    {{ phrase('general_options') }}...

Read the rest of this update entry...
 
Unfortunately, that makes this modification sort of unusable. If it can't gracefully degrade... it's not useful. Sucks, I really liked it.
Have a look at the new code I added, it should work with validators while still giving you the option of separating content in a better way :)


Fillip
 
If you want have full-width separators collapsibles, you can use:
Rich (BB code):
<xf:macro name="option_form_block" arg-group="" arg-options="!" arg-containerBeforeHtml="">
    <xf:if is="$options is not empty">
        <xf:form action="{{ link('options/update') }}" ajax="true" class="block">
            {$containerBeforeHtml|raw}
            <div class="block-container p-content" id="content">

                <xf:set var="$i" value="1" />
                <xf:set var="$frase" value="{{ phrase('general_options') }}" />
                <xf:set var="$divEnd">

                    </div>

                </xf:set>
                <xf:set var="$optionGroup" value="your-namespace-addon" />
                <xf:set var="$cabecera">
                    <h3 class="block-formSectionHeader">
                        <span class="collapseTrigger collapseTrigger--block" data-xf-click="toggle" data-target="< :up:next">
                            <span class="block-formSectionHeader-aligner">{$frase}</span>
                        </span>
                    </h3>
                    <div class="block-body block-body--collapsible is-active" data-general-options="1" id="optGroup-{$optionGroup}-1" style="">
                </xf:set>
                  
                 <xf:foreach loop="$options" value="$option">
                     <xf:if is="$option.Relations.your_namespace_addon.display_order < 100">
                         <xf:if is="$i == 1">
                             {$cabecera}
                             <xf:set var="$frase" value="{{ phrase('Your_Namespace_more_options_2') }}" />
                             <xf:set var="$i" value="2" />
                        </xf:if>
                          
                       <xf:elseif is="$option.Relations.your_namespace_addon.display_order >= 100 AND $option.Relations.your_namespace_addon.display_order < 200" />
                        <xf:if is="$i == 2">
                            {$divEnd}
                            {$cabecera}
                            <xf:set var="$frase" value="{{ phrase('Your_Namespace_more_options_3') }}" />
                             <xf:set var="$i" value="3" />
                        </xf:if>
                    <xf:elseif is="$option.Relations.your_namespace_addon.display_order >= 200 AND $option.Relations.your_namespace_addon.display_order < 300" />
                        <xf:if is="$i == 3">
                            {$divEnd}
                            {$cabecera}
                            <xf:set var="$frase" value="{{ phrase('Your_Namespace_more_options_4') }}" />
                             <xf:set var="$i" value="4" />
                        </xf:if>
                    <xf:elseif is="$option.Relations.your_namespace_addon.display_order >= 300 AND $option.Relations.your_namespace_addon.display_order < 400" />
                        <xf:if is="$i == 4">
                            {$divEnd}
                            {$cabecera}
                            <xf:set var="$frase" value="{{ phrase('Your_Namespace_more_options_5') }}" />
                             <xf:set var="$i" value="5" />
                        </xf:if>
                    <xf:elseif is="$option.Relations.your_namespace_addon.display_order >= 400 AND $option.Relations.your_namespace_addon.display_order < 500" />
                        <xf:if is="$i == 5">
                            {$divEnd}
                            {$cabecera}
                            <xf:set var="$frase" value="{{ phrase('Your_Namespace_more_options_6') }}" />
                             <xf:set var="$i" value="6" />
                        </xf:if>
                    <xf:elseif is="$option.Relations.your_namespace_addon.display_order >= 500 AND $option.Relations.your_namespace_addon.display_order < 600" />
                        <xf:if is="$i == 6">
                            {$divEnd}
                            {$cabecera}
                            <xf:set var="$frase" value="{{ phrase('Your_Namespace_more_options_7') }}" />
                             <xf:set var="$i" value="7" />
                        </xf:if>
                    <xf:elseif is="$option.Relations.your_namespace_addon.display_order >= 600 AND $option.Relations.your_namespace_addon.display_order < 700" />
                        <xf:if is="$i == 7">
                            {$divEnd}
                            {$cabecera}
                            <xf:set var="$frase" value="{{ phrase('Your_Namespace_more_options_8') }}" />
                             <xf:set var="$i" value="8" />
                        </xf:if>
                    <xf:elseif is="$option.Relations.your_namespace_addon.display_order >= 700 AND $option.Relations.your_namespace_addon.display_order < 800" />
                        <xf:if is="$i == 8">
                            {$divEnd}
                            {$cabecera}
                            <xf:set var="$frase" value="{{ phrase('Your_Namespace_more_options_9') }}" />
                             <xf:set var="$i" value="9" />
                        </xf:if>
                    <xf:elseif is="$option.Relations.your_namespace_addon.display_order >= 800 AND $option.Relations.your_namespace_addon.display_order < 900" />
                        <xf:if is="$i == 9">
                            {$divEnd}
                            {$cabecera}
                            <xf:set var="$frase" value="{{ phrase('Your_Namespace_more_options_10') }}" />
                             <xf:set var="$i" value="10" />
                        </xf:if>
                    <xf:elseif is="$option.Relations.your_namespace_addon.display_order >= 900 AND $option.Relations.your_namespace_addon.display_order < 1000" />
                        <xf:if is="$i == 10">
                            {$divEnd}
                            {$cabecera}
                            <xf:set var="$frase" value="{{ phrase('Your_Namespace_more_options_11') }}" />
                             <xf:set var="$i" value="11" />
                        </xf:if>
                    <xf:elseif is="$option.Relations.your_namespace_addon.display_order >= 1000 AND $option.Relations.your_namespace_addon.display_order < 1100" />
                        <xf:if is="$i == 11">
                            {$divEnd}
                            {$cabecera}
                            <xf:set var="$frase" value="{{ phrase('Your_Namespace_more_options_12') }}" />
                             <xf:set var="$i" value="12" />
                        </xf:if>
                    <xf:else />
                        <xf:if is="$i == 12">
                            {$divEnd}
                            {$cabecera}
                            <xf:set var="$frase" value="{{ phrase('Your_Namespace_more_options_13') }}" />
                             <xf:set var="$i" value="13" />
                        </xf:if>
                    </xf:if>
                    <xf:set var="$id" value="optGroup-{$optionGroup}-{$i}" />
                    <xf:set var="$cabecera">
                        <h3 class="block-formSectionHeader">
                            <span class="collapseTrigger collapseTrigger--block" data-xf-click="toggle" data-target="< :up:next">
                                <span class="block-formSectionHeader-aligner">{$frase}</span>
                            </span>
                        </h3>
                        <div class="block-body block-body--collapsible is-active" data-general-options="" id="{$id}" style="">
                    </xf:set>
                    <xf:macro template="option_macros" name="option_row" arg-group="{$group}" arg-option="{$option}" />

                </xf:foreach>
                {$divEnd}
                <xf:submitrow sticky="true" icon="save" />
            </div>
        </xf:form>
    </xf:if>
</xf:macro>
Ifr you want that all full-width separators shown as collapsed, remove both " is-active". If you want that only show opened the first full-width separator, remove only the second " is-active".
Change the bolded Your_Namespace into phrases by your namespace and change the bolder your_namespace_addon by your option group id.
If you define only to 499, only shown the general options tab and four more.If you define to 2000, shown all the 14 tabs with all the options configured, those greater than 1100 in the last tab.
145.webp146.webp147.webp
Work fine for me.

Salud2
 
Last edited:
Any way to use these changes and still use the default form-row-separators every 100 orders?
 
No. I am using the first option to have tabbed sections...

However, within those tabbed sections, I still want to use the default form-row-separators. Can this be done?
 
Top Bottom