Conditional fields - Olga Riabodzei

Conditional fields
How we ported the module to Drupal 8
Olga Rabodzei
orabodzei@adyax.com
2017

What this
module can do?
Conditional Fields allows you to
manage sets of dependencies
between fields.
It’s a user interface to the States
API.
2

What else this module can do?
4

What is "condition"?
● Filled
The dependee has at least one non-empty value
● Touched
The dependee has received focus at least once.
● Focused
The dependee is currently focused.
● Checked
The dependee is a checkbox and is checked.
● Empty
The dependee has an empty value.
● Untouched
The dependee has never received focus.
● Unfocused
The dependee is currently not focused.
● Unchecked
The dependee is a checkbox and is not checked.
This is the condition that dependee should meet to trigger the dependency.
Available options:
● Value: The dependee has a certain value or set of values
6

Values input mode
● Widget
Use the actual form widget to insert the desired values.
This is a quick but limited way to set up simple dependencies.
● Regular expression
Use a text field to insert a regular expression.
● All these values (AND)
Use a text area to insert a list of values.
● Any of these values (OR)
● Only one of these values (XOR)
● None of these values (NOT)
8

Problem 1 - Where
store a condition?
9

Dependency
configuration
All configuration of CF is stored
in entity_form_display like
third_party_settings for the field
field_music_other:
weight: 2
settings:
size: 60
placeholder: ''
third_party_settings:
conditional_fields:
28206ab7-29a2-4d26-a3e6-f24703a04cec:
dependee: field_music
settings:
state: visible
condition: value
grouping: AND
values_set: 1
value: ''
values: { }
value_form:
-
value: other
effect: show
effect_options: { }
selector: ''
entity_type: node
bundle: article
type: string_textfield
region: content
10

Problem 2 -
understand Drupal 7
magic
11

General rules of applying conditions
12
Current state based on Drupal 7
● hook_element_info_alter()
● conditional_fields_element_after_build()
● conditional_fields_attach_dependency()
ToDo for Drupal 8
● Simplify and refactor this.
● Create a separate controller.

Problem 3 - widget
input mode
13

In the Field API
Each field has a type, which determines what kind of data (integer, string, date, etc.) the
field can hold, which settings it provides, and so on.
The Field Types API also defines two kinds of pluggable handlers: widgets and formatters.
Widgets - in edit forms.
Formatters - in displayed entities.
14

Problem 4 - time on
checking
17

Small example
protected function setUp() {
parent::setUp();
$this->fieldSelector = '[name="field_' .
$this->fieldName . '[0][value]"]';
$fieldStorageDefinition = [
'field_name' => 'field_' . $this->fieldName,
'entity_type' => 'node',
'type' => 'text',
'cardinality' => 1,
];
$fieldStorage =
FieldStorageConfig::create($fieldStorageDefinition)
;
$fieldStorage->save();
FieldConfig::create([
'field_name' => 'field_' . $this->fieldName,
'entity_type' => 'node',
'bundle' => 'article',
])->save();
EntityFormDisplay::load('node.article.default')
->setComponent('field_' . $this->fieldName,
['type' => 'text_textfield'])
->save();
}
Create in setUp() function all
that You need for a test: user,
content types, fields and etc.
19

Small example
protected function waitUntilVisible(
$selector,
$timeout = 1000,
$message = '')
{
$condition = "jQuery('{$selector}').is(':visible');";
$this->assertJsCondition($condition, $timeout, $message);
}
protected function waitUntilHidden(
$selector,
$timeout = 1000,
$message = '')
{
$condition = "jQuery('{$selector}').is(':hidden');";
$this->assertJsCondition($condition, $timeout, $message);
}
protected function changeField($selector, $value = '')
{
$script =
"jQuery('{$selector}').val('{$value}').trigger('keyup').trigger('change'
);"
$this->getSession()->executeScript($script);
}
Some useful small functions
20

Tests need and small example
public function testVisibleValueWidget() {
$this->baseTestSteps();
// Visit a ConditionalFields configuration page for Content bundles.
$this->createCondition('body', 'field_' . $this->fieldName, 'visible', 'value');
// Set up conditions.
$text = $this->getRandomGenerator()->word(8);
$data = [
'[name="condition"]' => 'value',
'[name="values_set"]' => 1,
$this->fieldSelector => $text,
'[name="grouping"]' => 'AND',
'[name="state"]' => 'visible',
'[name="effect"]' => 'show',
];
foreach ($data as $selector => $value) {
$this->changeField($selector, $value);
}
$this->getSession()->wait(1000, '!jQuery.active');
$this->getSession()
->executeScript("jQuery('#conditional-field-edit-form').submit();");
$this->assertSession()->statusCodeEquals(200);
// Check if that configuration is saved.
$this->drupalGet('admin/structure/types/manage/article/conditionals');
$this->assertSession()
->pageTextContains('body ' . 'field_' . $this->fieldName . ' visible
value');
// Visit Article Add form to check that conditions are applied.
$this->drupalGet('node/add/article');
$this->assertSession()->statusCodeEquals(200);
// Check that the field Body is not visible.
$this->waitUntilHidden('.field--name-body', 0, 'Article Body field is
visible');
$this->changeField($this->fieldSelector, $text);
$this->waitUntilVisible('.field--name-body', 50, 'Article Body field is
not visible');
// Change a select value set to hide the body again.
$this->changeField($this->fieldSelector, $text . 'a');
$this->waitUntilHidden('.field--name-body', 50, 'Article Body field is
visible');
}
Remember - just reproduce your steps like a user!
21

Plans and further development
● Bug fixing :)
● More refactoring.
● Finish all tests.
● Create new handler plugins if they are needed.
● Create a submodule for applying conditions on entity view display.
● Apply conditions depending on user roles.
● Investigate possibility to extend with “Dynamic dependent fields”.
22

Conditional fields - Olga Riabodzei

Recommended

More Related Content

What's hot (20)

Similar to Conditional fields - Olga Riabodzei (20)

More from DrupalCamp Kyiv (20)

Recently uploaded (20)

Conditional fields - Olga Riabodzei