ProcessWire - Dynamic Backend Fields: Unterschied zwischen den Versionen

Aus Wikizone
Wechseln zu: Navigation, Suche
Zeile 39: Zeile 39:
  
 
Beispiele:
 
Beispiele:
  categories.count>0, categories.count<3
+
  categories.count>0, categories.count<3 // one or two categories selected
  categories.count=0
+
  categories.count=0 // no categorie selected
 
  first_name!='', last_name=''
 
  first_name!='', last_name=''
 
  categories=1234, categories.count=1 // Nützlich bei Page Reference
 
  categories=1234, categories.count=1 // Nützlich bei Page Reference
 
  checkbox=1
 
  checkbox=1
 
  checkbox=0
 
  checkbox=0
 +
=== Limitations ===
 +
OR geht nur im Selektor:
  
 
== Populate Multiple Select Field depending on Single Select Field ==
 
== Populate Multiple Select Field depending on Single Select Field ==

Version vom 15. Dezember 2019, 18:28 Uhr

How To populate or show fields in backend depending on selection of other fields ?

Field Dependencies in ProcessWire

https://processwire.com/docs/fields/dependencies/

Show If und Required If

Show if Dependency

Zeige ein Feld nur dann im Backend an, wenn eine Bedingung erfüllt ist.

Wo stellt man Show if ein ?

1. Auf Feldebene

In den Feldeinstellungen (auch innerhalb eines Templates) unter Visibility / Sichtbarkeit.

2. Über die API auf einem beliebigen Inputfield Objekt oder Module

$inputfield->showIf = "field=value";

3. Über Module (z.B. im Formbuilder)

Require if

Benötigt wenn - funktioniert ähnlich wie show if. Option im Backend bei den Feldeinstellungen wenn man Required bei einem Feld anhakt.

API Zugriff auf require if

$inputfield->required = 1; // must be set
$inputfield->requiredIf = "field=value";

Selectors

Selector string format

field=value

"field" is the name of the field you want to check, "=" is the operator you want to use for comparison, and "value" is the value you want to compare.

  • multiple conditions by separating each field=value condition with a comma, i.e.
fullname!=, items>5

Allowed operators

=   equal
!=  not equal
>   greater than
<   less than
>=  greater than or equal
<=  less than or equal
%=  contains phrase
*=  contains phrase (same as above) 

Beispiele:

categories.count>0, categories.count<3 // one or two categories selected
categories.count=0 // no categorie selected
first_name!=, last_name=
categories=1234, categories.count=1 // Nützlich bei Page Reference
checkbox=1
checkbox=0

Limitations

OR geht nur im Selektor:

Populate Multiple Select Field depending on Single Select Field

var initChildSelect = function() {

    // THE "PARENT" FIELD
    var thisID         = $(this).attr('id');
    var repeaterID     = thisID.split('_repeater')[1]; // if in repeater?
    var optID         = parseInt($(this).val()); // the selected option


    // THE "CHILD/DEPENDENT" FIELD
    childWorksSelect = $('select[name^="part_select_repeater'+repeaterID+'"]');
    var allOptions = $(childWorksSelect.children()).clone();
    var validOptions = allOptions.filter(function(){
        return $(this).data('parent') == optID;
    });
    childWorksSelect.html(validOptions);

    var options = {};
    if(!optID) {
        var options = {'placeholder': 'No Work Selected'}
    }

    if(optID && !validOptions.length) {
        var options = {'placeholder': 'No Parts For The Selected Work'}
    }

    childWorksSelect.selectize(options);

    // DEAL WITH CHANGES TO THE PARENT FIELD
    $(this).change(function() {
        var optID = parseInt($(this).val());
        var newOptions = allOptions.filter(function(){
            return $(this).data('parent') == optID;
        });
        childWorksSelect[0].selectize.destroy();

        // Re-init the select
        childWorksSelect = $('select[name^="part_select_repeater'+repeaterID+'"]');
         childWorksSelect.html(newOptions);

         var options = {};

        if(!optID) {
            var options = {'placeholder': 'No Work Selected'}
        }
         if(optID && !newOptions.length) {
             var options = {'placeholder': 'No Parts For The Selected Work'}
         }

        childWorksSelect.selectize(options);
        childWorksSelect[0].selectize.open();
    });

}

$(function(){
    $('select[name^="work_select_single"]').each(initChildSelect);

    $(document).on('reloaded opened repeateradd wiretabclick', '.InputfieldPage', function() {
        $(this).find('select[name^="work_select_single"]').each(initChildSelect);
    });

});