ProcessWire - Dynamic Backend Fields: Unterschied zwischen den Versionen
Aus Wikizone
| 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);
});
});