Tabbed Options

Tabbed Options

DragonByte Tech

Well-known member
#1

[xFv]

Previously Cylent1
#2
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:

DragonByte Tech

Well-known member
#3
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
 

[xFv]

Previously Cylent1
#4
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?
 

[xFv]

Previously Cylent1
#6
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?
 

Jaxel

Well-known member
#8
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.
 

DragonByte Tech

Well-known member
#9
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

Well-known member
#11
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...
 

DragonByte Tech

Well-known member
#12
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
 

lms

Well-known member
#15
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.png 146.png 147.png
Work fine for me.

Salud2
 
Last edited:

Jaxel

Well-known member
#20
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