} transforms
+ */
+ constructor(transforms) {
+ this.#transforms = transforms;
+ }
+
+ /**
+ * @param {string} componentId
+ * @return {void}
+ */
+ init(componentId) {
+ const search = `#${componentId}`;
+ const component = document.querySelector(search);
+ if (this.#instances[componentId] !== undefined) {
+ throw new Error(`Container with id '${componentId}' has already been registered.`);
+ }
+ this.#instances[componentId] = new Container(this.#transforms, component);
+ }
+
+ /**
+ * @param {string} componentId
+ * @return {Container}
+ */
+ get(componentId) {
+ return this.#instances[componentId];
+ }
+
+ getAll() {
+ return this.#instances;
+ }
+
+ first() {
+ return this.#instances[Object.keys(this.#instances).shift()];
+ }
+}
diff --git a/components/ILIAS/UI/resources/js/Input/Container/src/container.js b/components/ILIAS/UI/resources/js/Input/Container/src/container.js
new file mode 100644
index 000000000000..5168978ffb7d
--- /dev/null
+++ b/components/ILIAS/UI/resources/js/Input/Container/src/container.js
@@ -0,0 +1,45 @@
+/**
+ * This file is part of ILIAS, a powerful learning management system
+ * published by ILIAS open source e-Learning e.V.
+ *
+ * ILIAS is licensed with the GPL-3.0,
+ * see https://www.gnu.org/licenses/gpl-3.0.en.html
+ * You should have received a copy of said license along with the
+ * source code, too.
+ *
+ * If this is not the case or you just want to try ILIAS, you'll find
+ * us at:
+ * https://www.ilias.de
+ * https://github.com/ILIAS-eLearning
+ */
+
+import $ from 'jquery';
+
+import SwitchableGroupTransforms from './transforms/switchablegroup.transform';
+import OptionalGroupTransforms from './transforms/optionalgroup.transform';
+import RadioTransforms from './transforms/radio.transform';
+import PasswordTransforms from './transforms/password.transform';
+import DurationTransforms from './transforms/duration.transform';
+import LinkTransforms from './transforms/link.transform';
+import SelectTransforms from './transforms/select.transform';
+import MultiSelectTransforms from './transforms/multiselect.transform';
+
+import filter from './filter.main';
+import ContainerFactory from './container.factory';
+
+const transforms = {
+ 'switchable-group-field-input': new SwitchableGroupTransforms(),
+ 'optional-roup-field-input': new OptionalGroupTransforms(),
+ 'radio-field-input': new RadioTransforms(),
+ 'multiSelect-field-input': new MultiSelectTransforms(),
+ 'password-field-input': new PasswordTransforms(),
+ 'duration-field-input': new DurationTransforms(),
+ 'link-field-input': new LinkTransforms(),
+ 'select-field-input': new SelectTransforms(),
+};
+
+il = il || {};
+il.UI = il.UI || {};
+il.UI.filter = filter($);
+il.UI.Input = il.UI.Input || {};
+il.UI.Input.Container = new ContainerFactory(transforms);
diff --git a/components/ILIAS/UI/resources/js/Input/Container/src/formnode.class.js b/components/ILIAS/UI/resources/js/Input/Container/src/formnode.class.js
new file mode 100644
index 000000000000..8c5305d07100
--- /dev/null
+++ b/components/ILIAS/UI/resources/js/Input/Container/src/formnode.class.js
@@ -0,0 +1,178 @@
+/**
+ * This file is part of ILIAS, a powerful learning management system
+ * published by ILIAS open source e-Learning e.V.
+ *
+ * ILIAS is licensed with the GPL-3.0,
+ * see https://www.gnu.org/licenses/gpl-3.0.en.html
+ * You should have received a copy of said license along with the
+ * source code, too.
+ *
+ * If this is not the case or you just want to try ILIAS, you'll find
+ * us at:
+ * https://www.ilias.de
+ * https://github.com/ILIAS-eLearning
+ */
+
+export default class FormNode {
+ /**
+ * @type {string}
+ */
+ #type;
+
+ /**
+ * @type {string}
+ */
+ #name;
+
+ /**
+ * @type {string}
+ */
+ #label;
+
+ /**
+ * @type {FormNode[]}
+ */
+ #children;
+
+ /**
+ * @type {HTMLElement[]}
+ */
+ #htmlFields;
+
+ #transforms;
+
+ /**
+ * @param {string} type
+ * @param {string} name
+ * @param {string} label
+ * @return {void}
+ */
+ constructor(type, name, label) {
+ this.#type = type;
+ this.#name = name;
+ this.#label = label;
+
+ this.#children = [];
+ this.#htmlFields = [];
+ }
+
+ /**
+ * @return {string}
+ */
+ getName() {
+ return this.#name.split('/').pop();
+ }
+
+ /**
+ * @return {string}
+ */
+ getFullName() {
+ return this.#name;
+ }
+
+ /**
+ * @return {string}
+ */
+ getLabel() {
+ return this.#label;
+ }
+
+ /**
+ * @return {string}
+ */
+ getType() {
+ return this.#type;
+ }
+
+ /**
+ * @param {FormNode} node
+ * @return {void}
+ */
+ addChildNode(node) {
+ this.#children.push(node);
+ }
+
+ /**
+ * @return {FormNode[]}
+ */
+ getAllChildren() {
+ return this.#children;
+ }
+
+ /**
+ * @param {string} name
+ * @return {FormNode|null}
+ */
+ getChildByName(name) {
+ const filtered = Array.from(this.#children)
+ .filter(
+ (child) => child.getName() === name,
+ );
+ if (filtered.length === 0) {
+ return null;
+ }
+ return filtered.shift();
+ }
+
+ /**
+ * @param {HTMLElement} htmlField
+ * @return {void}
+ */
+ addHtmlField(htmlField) {
+ this.#htmlFields.push(htmlField);
+ }
+
+ /**
+ * @return {HTMLElement[]}
+ */
+ getHtmlFields() {
+ return this.#htmlFields;
+ }
+
+ /**
+ * @return {Array}
+ */
+ getValues() {
+ const values = [];
+
+ this.#htmlFields.forEach(
+ (htmlField) => {
+ if (htmlField.type === 'checkbox' || htmlField.type === 'radio') {
+ if (htmlField.checked) {
+ values.push(htmlField.value);
+ }
+ } else {
+ values.push(htmlField.value);
+ }
+ },
+ );
+ return values;
+ }
+
+ /**
+ * @param {Class} transforms
+ */
+ setTransforms(transforms) {
+ this.#transforms = transforms;
+ }
+
+ /**
+ * @return {FormNode[]}
+ */
+ getChildren() {
+ if (this.#transforms && this.#transforms.childrenTransform) {
+ return this.#transforms.childrenTransform(this);
+ }
+ return this.getAllChildren();
+ }
+
+ /**
+ * @return {Array}
+ */
+ getValuesRepresentation() {
+ if (this.#transforms && this.#transforms.valueTransform) {
+ return this.#transforms.valueTransform(this);
+ }
+ return this.getValues();
+ }
+}
diff --git a/components/ILIAS/UI/resources/js/Input/Container/src/transforms/duration.transform.js b/components/ILIAS/UI/resources/js/Input/Container/src/transforms/duration.transform.js
new file mode 100644
index 000000000000..1f55134c485b
--- /dev/null
+++ b/components/ILIAS/UI/resources/js/Input/Container/src/transforms/duration.transform.js
@@ -0,0 +1,36 @@
+/**
+ * This file is part of ILIAS, a powerful learning management system
+ * published by ILIAS open source e-Learning e.V.
+ *
+ * ILIAS is licensed with the GPL-3.0,
+ * see https://www.gnu.org/licenses/gpl-3.0.en.html
+ * You should have received a copy of said license along with the
+ * source code, too.
+ *
+ * If this is not the case or you just want to try ILIAS, you'll find
+ * us at:
+ * https://www.ilias.de
+ * https://github.com/ILIAS-eLearning
+ */
+
+export default class DurationTransforms {
+ /**
+ * @param {FormNode} node
+ * @return {Array}
+ */
+ valueTransform(node) {
+ const [start, end] = node.getAllChildren().map((child) => child.getValues()[0]);
+ if (start && end) {
+ return [`${start} - ${end}`];
+ }
+ return ['-'];
+ }
+
+ /**
+ * @param {FormNode} node
+ * @return {Array}
+ */
+ childrenTransform(node) {
+ return [];
+ }
+}
diff --git a/components/ILIAS/UI/resources/js/Input/Container/src/transforms/link.transform.js b/components/ILIAS/UI/resources/js/Input/Container/src/transforms/link.transform.js
new file mode 100644
index 000000000000..b9e2975ee0fa
--- /dev/null
+++ b/components/ILIAS/UI/resources/js/Input/Container/src/transforms/link.transform.js
@@ -0,0 +1,25 @@
+/**
+ * This file is part of ILIAS, a powerful learning management system
+ * published by ILIAS open source e-Learning e.V.
+ *
+ * ILIAS is licensed with the GPL-3.0,
+ * see https://www.gnu.org/licenses/gpl-3.0.en.html
+ * You should have received a copy of said license along with the
+ * source code, too.
+ *
+ * If this is not the case or you just want to try ILIAS, you'll find
+ * us at:
+ * https://www.ilias.de
+ * https://github.com/ILIAS-eLearning
+ */
+
+export default class LinkTransforms {
+ /**
+ * @param {FormNode} node
+ * @return {Array}
+ */
+ valueTransform(node) {
+ const [label, url] = node.getAllChildren().map((child) => child.getValues()[0]);
+ return [`${label} [${url}]`];
+ }
+}
diff --git a/components/ILIAS/UI/resources/js/Input/Container/src/transforms/multiselect.transform.js b/components/ILIAS/UI/resources/js/Input/Container/src/transforms/multiselect.transform.js
new file mode 100644
index 000000000000..beab191cea69
--- /dev/null
+++ b/components/ILIAS/UI/resources/js/Input/Container/src/transforms/multiselect.transform.js
@@ -0,0 +1,32 @@
+/**
+ * This file is part of ILIAS, a powerful learning management system
+ * published by ILIAS open source e-Learning e.V.
+ *
+ * ILIAS is licensed with the GPL-3.0,
+ * see https://www.gnu.org/licenses/gpl-3.0.en.html
+ * You should have received a copy of said license along with the
+ * source code, too.
+ *
+ * If this is not the case or you just want to try ILIAS, you'll find
+ * us at:
+ * https://www.ilias.de
+ * https://github.com/ILIAS-eLearning
+ */
+
+export default class MultiSelectTransforms {
+ /**
+ * @param {FormNode} node
+ * @return {Array}
+ */
+ valueTransform(node) {
+ const checked = node.getHtmlFields().filter((element) => element.checked);
+ if (checked.length === 0) {
+ return [];
+ }
+ const representation = [];
+ checked.forEach(
+ (field) => representation.push(field.parentNode.textContent),
+ );
+ return representation;
+ }
+}
diff --git a/components/ILIAS/UI/resources/js/Input/Container/src/transforms/optionalgroup.transform.js b/components/ILIAS/UI/resources/js/Input/Container/src/transforms/optionalgroup.transform.js
new file mode 100644
index 000000000000..38bed2473338
--- /dev/null
+++ b/components/ILIAS/UI/resources/js/Input/Container/src/transforms/optionalgroup.transform.js
@@ -0,0 +1,28 @@
+/**
+ * This file is part of ILIAS, a powerful learning management system
+ * published by ILIAS open source e-Learning e.V.
+ *
+ * ILIAS is licensed with the GPL-3.0,
+ * see https://www.gnu.org/licenses/gpl-3.0.en.html
+ * You should have received a copy of said license along with the
+ * source code, too.
+ *
+ * If this is not the case or you just want to try ILIAS, you'll find
+ * us at:
+ * https://www.ilias.de
+ * https://github.com/ILIAS-eLearning
+ */
+
+export default class OptionalGroupTransforms {
+ /**
+ * @param {FormNode} node
+ * @return {Array}
+ */
+ childrenTransform(node) {
+ if (!node.getHtmlFields()[0].checked
+ ) {
+ return [];
+ }
+ return node.getAllChildren();
+ }
+}
diff --git a/components/ILIAS/UI/resources/js/Input/Container/src/transforms/password.transform.js b/components/ILIAS/UI/resources/js/Input/Container/src/transforms/password.transform.js
new file mode 100644
index 000000000000..1a894e623227
--- /dev/null
+++ b/components/ILIAS/UI/resources/js/Input/Container/src/transforms/password.transform.js
@@ -0,0 +1,24 @@
+/**
+ * This file is part of ILIAS, a powerful learning management system
+ * published by ILIAS open source e-Learning e.V.
+ *
+ * ILIAS is licensed with the GPL-3.0,
+ * see https://www.gnu.org/licenses/gpl-3.0.en.html
+ * You should have received a copy of said license along with the
+ * source code, too.
+ *
+ * If this is not the case or you just want to try ILIAS, you'll find
+ * us at:
+ * https://www.ilias.de
+ * https://github.com/ILIAS-eLearning
+ */
+
+export default class SwitchableGroupTransforms {
+ /**
+ * @param {FormNode} node
+ * @return {null}
+ */
+ valueTransform(node) {
+ return null;
+ }
+}
diff --git a/components/ILIAS/UI/resources/js/Input/Container/src/transforms/radio.transform.js b/components/ILIAS/UI/resources/js/Input/Container/src/transforms/radio.transform.js
new file mode 100644
index 000000000000..27ae3248d12f
--- /dev/null
+++ b/components/ILIAS/UI/resources/js/Input/Container/src/transforms/radio.transform.js
@@ -0,0 +1,32 @@
+/**
+ * This file is part of ILIAS, a powerful learning management system
+ * published by ILIAS open source e-Learning e.V.
+ *
+ * ILIAS is licensed with the GPL-3.0,
+ * see https://www.gnu.org/licenses/gpl-3.0.en.html
+ * You should have received a copy of said license along with the
+ * source code, too.
+ *
+ * If this is not the case or you just want to try ILIAS, you'll find
+ * us at:
+ * https://www.ilias.de
+ * https://github.com/ILIAS-eLearning
+ */
+
+export default class RadioTransforms {
+ /**
+ * @param {FormNode} node
+ * @return {Array}
+ */
+ valueTransform(node) {
+ const checked = node.getHtmlFields().filter((element) => element.checked);
+ if (checked.length === 0) {
+ return [];
+ }
+ const representation = [];
+ checked.forEach(
+ (field) => representation.push(field.nextElementSibling.textContent),
+ );
+ return representation;
+ }
+}
diff --git a/components/ILIAS/UI/resources/js/Input/Container/src/transforms/select.transform.js b/components/ILIAS/UI/resources/js/Input/Container/src/transforms/select.transform.js
new file mode 100644
index 000000000000..d9b890933fad
--- /dev/null
+++ b/components/ILIAS/UI/resources/js/Input/Container/src/transforms/select.transform.js
@@ -0,0 +1,25 @@
+/**
+ * This file is part of ILIAS, a powerful learning management system
+ * published by ILIAS open source e-Learning e.V.
+ *
+ * ILIAS is licensed with the GPL-3.0,
+ * see https://www.gnu.org/licenses/gpl-3.0.en.html
+ * You should have received a copy of said license along with the
+ * source code, too.
+ *
+ * If this is not the case or you just want to try ILIAS, you'll find
+ * us at:
+ * https://www.ilias.de
+ * https://github.com/ILIAS-eLearning
+ */
+
+export default class SelectTransforms {
+ /**
+ * @param {FormNode} node
+ * @return {Array}
+ */
+ valueTransform(node) {
+ const field = node.getHtmlFields()[0];
+ return [field.options[field.options.selectedIndex].text];
+ }
+}
diff --git a/components/ILIAS/UI/resources/js/Input/Container/src/transforms/switchablegroup.transform.js b/components/ILIAS/UI/resources/js/Input/Container/src/transforms/switchablegroup.transform.js
new file mode 100644
index 000000000000..94478b9895d5
--- /dev/null
+++ b/components/ILIAS/UI/resources/js/Input/Container/src/transforms/switchablegroup.transform.js
@@ -0,0 +1,40 @@
+/**
+ * This file is part of ILIAS, a powerful learning management system
+ * published by ILIAS open source e-Learning e.V.
+ *
+ * ILIAS is licensed with the GPL-3.0,
+ * see https://www.gnu.org/licenses/gpl-3.0.en.html
+ * You should have received a copy of said license along with the
+ * source code, too.
+ *
+ * If this is not the case or you just want to try ILIAS, you'll find
+ * us at:
+ * https://www.ilias.de
+ * https://github.com/ILIAS-eLearning
+ */
+
+export default class SwitchableGroupTransforms {
+ /**
+ * @param {FormNode} node
+ * @return {Array}
+ */
+ valueTransform(node) {
+ const children = node.getChildren();
+ if (children.length === 0) {
+ return [];
+ }
+ const representation = [];
+ children.forEach((child) => representation.push(child.getLabel()));
+ return representation;
+ }
+
+ /**
+ * @param {FormNode} node
+ * @return {Array}
+ */
+ childrenTransform(node) {
+ return node.getAllChildren().filter(
+ (child) => child.getHtmlFields()[0].checked,
+ );
+ }
+}
diff --git a/components/ILIAS/UI/src/Component/Input/Container/Form/Form.php b/components/ILIAS/UI/src/Component/Input/Container/Form/Form.php
index 703ea43695ee..0d53f1960159 100755
--- a/components/ILIAS/UI/src/Component/Input/Container/Form/Form.php
+++ b/components/ILIAS/UI/src/Component/Input/Container/Form/Form.php
@@ -25,10 +25,11 @@
use Psr\Http\Message\ServerRequestInterface;
use ILIAS\UI\Component\Input\Container\Container;
use ILIAS\UI\Component\Input\Input;
+use ILIAS\UI\Component\JavaScriptBindable;
/**
* This describes commonalities between all forms.
*/
-interface Form extends Container
+interface Form extends Container, JavaScriptBindable
{
}
diff --git a/components/ILIAS/UI/src/Implementation/Component/Input/Container/Form/Form.php b/components/ILIAS/UI/src/Implementation/Component/Input/Container/Form/Form.php
index 2a8a684785d6..71316d51711e 100755
--- a/components/ILIAS/UI/src/Implementation/Component/Input/Container/Form/Form.php
+++ b/components/ILIAS/UI/src/Implementation/Component/Input/Container/Form/Form.php
@@ -26,12 +26,15 @@
use Psr\Http\Message\ServerRequestInterface;
use ILIAS\UI\Implementation\Component\Input\PostDataFromServerRequest;
use ILIAS\UI\Implementation\Component\Input\NameSource;
+use ILIAS\UI\Implementation\Component\JavaScriptBindable;
/**
* This implements commonalities between all forms.
*/
abstract class Form extends Container implements C\Input\Container\Form\Form
{
+ use JavaScriptBindable;
+
/**
* @param C\Input\Container\Form\FormInput[] $inputs
*/
diff --git a/components/ILIAS/UI/src/Implementation/Component/Input/Container/Form/Renderer.php b/components/ILIAS/UI/src/Implementation/Component/Input/Container/Form/Renderer.php
index db1fdada1866..807c7c3720bc 100755
--- a/components/ILIAS/UI/src/Implementation/Component/Input/Container/Form/Renderer.php
+++ b/components/ILIAS/UI/src/Implementation/Component/Input/Container/Form/Renderer.php
@@ -26,6 +26,7 @@
use ILIAS\UI\Renderer as RendererInterface;
use ILIAS\UI\Component;
use LogicException;
+use ILIAS\UI\Implementation\Render\ResourceRegistry;
class Renderer extends AbstractComponentRenderer
{
@@ -34,6 +35,10 @@ class Renderer extends AbstractComponentRenderer
*/
public function render(Component\Component $component, RendererInterface $default_renderer): string
{
+ $component = $component->withAdditionalOnLoadCode(
+ fn($id) => "il.UI.Input.Container.init('{$id}');"
+ );
+
if ($component instanceof Form\Standard) {
return $this->renderStandard($component, $default_renderer);
}
@@ -63,7 +68,17 @@ protected function renderStandard(Form\Standard $component, RendererInterface $d
$tpl->setVariable("BUTTONS_TOP", $default_renderer->render($submit_button));
$tpl->setVariable("BUTTONS_BOTTOM", $default_renderer->render($submit_button));
- $tpl->setVariable("INPUTS", $default_renderer->render($component->getInputGroup()));
+ $tpl->setVariable(
+ "INPUTS",
+ $default_renderer
+ //->withAdditionalContext($component)
+ ->render($component->getInputGroup())
+ );
+
+
+
+ $id = $this->bindJavaScript($component);
+ $tpl->setVariable("ID", $id);
return $tpl->get();
}
@@ -134,4 +149,11 @@ protected function maybeAddRequired(Form\Form $component, Template $tpl): void
$tpl->setVariable("TXT_REQUIRED", $this->txt("required_field"));
}
}
+
+
+ public function registerResources(ResourceRegistry $registry): void
+ {
+ parent::registerResources($registry);
+ $registry->register('./assets/js/container.min.js');
+ }
}
diff --git a/components/ILIAS/UI/src/examples/Input/Field/Section/foldable.php b/components/ILIAS/UI/src/examples/Input/Field/Section/foldable.php
new file mode 100644
index 000000000000..c7d19468b5d4
--- /dev/null
+++ b/components/ILIAS/UI/src/examples/Input/Field/Section/foldable.php
@@ -0,0 +1,206 @@
+
+ * Sections may fold
+ *
+ * expected output: >
+ * ILIAS shows the rendered Component.
+ * ---
+ */
+function foldable()
+{
+ global $DIC;
+ $ui = $DIC->ui()->factory();
+ $renderer = $DIC->ui()->renderer();
+ $request = $DIC->http()->request();
+
+ $number_input = $ui->input()->field()->numeric("number", "Put in a number.")
+ ->withLabel("a number");
+ $text_input = $ui->input()->field()->text("text", "Put in some text.")
+ ->withLabel("a text");
+
+ $file_input = $ui->input()->field()->file(
+ new \ilUIDemoFileUploadHandlerGUI(),
+ "Upload File",
+ "you can drop your files here"
+ );
+
+ $link_input = $ui->input()->field()->link(
+ "a LinkField",
+ "enter label and url"
+ );
+
+
+ $section1 = $ui->input()->field()->section(
+ [
+ $number_input->withValue(5),
+ $text_input->withValue('some text'),
+ $file_input,
+ $link_input,
+ ],
+ "first section",
+ "fill in some values"
+ );
+
+ $optional_group = $ui->input()->field()->optionalGroup(
+ [
+ $ui->input()->field()->duration("a dependent duration field", ""),
+ $ui->input()->field()->text("a dependent text field", "")
+ ],
+ 'optional group',
+ 'check to edit the field of the group',
+ );
+ $optional_group2 = $ui->input()->field()->optionalGroup(
+ [
+ $ui->input()->field()->section(
+ [
+ $ui->input()->field()->tag(
+ "Basic Tag",
+ ['Interesting', 'Boring', 'Animating', 'Repetitious'],
+ "Just some tags"
+ ),
+ $rating = $ui->input()->field()->rating("Rate with the Stars:", "change the rating")
+ ],
+ 'fields in opt. section'
+ )],
+ 'optional section',
+ 'byline opt. section',
+ );
+
+ $group1 = $ui->input()->field()->group(
+ [
+ "field_1_1" => $ui->input()->field()->text("Item 1.1", "Just some field"),
+ "field_1_2" => $ui->input()->field()->text("Item 1.2", "Just some other field"),
+ ],
+ "Switchable Group number one",
+ "Byline for Switchable Group number one"
+ );
+ $options = array(
+ "1" => "Pick 1",
+ "2" => "Pick 2",
+ "3" => "Pick 3",
+ "4" => "Pick 4",
+ );
+ $group2 = $ui->input()->field()->group(
+ [
+ $ui->input()->field()->multiselect("now, pick more", $options, "This is the byline of multi text")
+ ->withValue([2,3]),
+ $ui->input()->field()->select("now, select one more", $options, "This is the byline of select")
+ ->withValue(2),
+
+ $ui->input()->field()->radio("now, pick just one more", "byline for radio (pick one more)")
+ ->withOption('single1', 'Single 1')
+ ->withOption('single2', 'Single 2')
+ ],
+ "Switchable Group number two",
+ "Byline for Switchable Group number two"
+ );
+ $switchable_group = $ui->input()->field()->switchableGroup(
+ [
+ "g1" => $group1,
+ "g2" => $group2,
+ ],
+ "Pick One",
+ "Byline for the whole Switchable Group (pick one)"
+ );
+
+ $section2 = $ui->input()->field()->section(
+ [ $number_input->withValue(7),
+ $text_input->withValue('some other text'),
+ $optional_group->withValue(null),
+ $switchable_group,
+ $text_input->withValue('final words'),
+ ],
+ "second section",
+ "fill in some other values"
+ );
+
+
+ $form = $ui->input()->container()->form()->standard('#', [$optional_group2, $section1, $section2]);
+
+ $button_js = $ui->button()->standard('log struct', '')->withOnLoadCode(
+ fn($id) => "document.querySelector('#{$id}').addEventListener(
+ 'click',
+ (event) => console.log(
+ il.UI.Input.Container.get(event.srcElement.parentNode.querySelector('form').id)
+ .getNodes()
+ )
+ );"
+ );
+ $button_unfold = $ui->button()->standard('unfold', '')->withOnLoadCode(
+ fn($id) => "document.querySelector('#{$id}').addEventListener(
+ 'click',
+ (event) => {
+ const form = event.srcElement.parentNode.querySelector('form');
+ const nodes = il.UI.Input.Container.get(form.id);
+ const formparts = nodes.getNodes().getChildren();
+
+ formparts.forEach((part) => {
+ const partArea = form.querySelector('[data-il-ui-input-name=\"' + part.getFullName() +'\"]');
+ const fieldArea = partArea.querySelector(':scope > div.c-input__field');
+ const valArea = partArea.querySelector(':scope > div.c-input__value_representation');
+
+ fieldArea.style.display = 'block';
+ valArea.innerHTML = '';
+ });
+ }
+ );"
+ );
+
+ $button_fold = $ui->button()->standard('fold', '')->withOnLoadCode(
+ fn($id) => "document.querySelector('#{$id}').addEventListener(
+ 'click',
+ (event) => {
+ const form = event.srcElement.parentNode.querySelector('form');
+ const nodes = il.UI.Input.Container.get(form.id);
+ const formparts = nodes.getNodes().getChildren();
+
+ formparts.forEach((part) => {
+ const values = nodes.getValuesRepresentation(part);
+ let txt = '';
+ values.forEach((v) => {
+ const {label, value, indent, type} = v;
+ txt = txt
+ + ' '.repeat(indent + 1)
+ + label
+ + ' (' + type.replace('-field-input', '') + ') '
+ + ': ' + value + ''
+ + '
';
+ });
+
+ const partArea = form.querySelector('[data-il-ui-input-name=\"' + part.getFullName() +'\"]');
+ const fieldArea = partArea.querySelector(':scope > div.c-input__field');
+ const valArea = partArea.querySelector(':scope > div.c-input__value_representation');
+
+ fieldArea.style.display = 'none';
+ valArea.style.fontSize = '80%';
+ valArea.innerHTML = txt;
+ });
+
+ }
+ );"
+ );
+
+ if ($request->getMethod() == "POST") {
+ $form = $form->withRequest($request);
+ $result = $form->getData()[0];
+ } else {
+ $result = "No result yet.";
+ }
+
+ //Return the rendered form
+ return
+ "" . print_r($result, true) . "
" .
+ $renderer->render([
+ $form,
+ $button_js,
+ $button_fold,
+ $button_unfold
+ ]);
+}
diff --git a/components/ILIAS/UI/src/templates/default/Input/tpl.context_form.html b/components/ILIAS/UI/src/templates/default/Input/tpl.context_form.html
index 116c46e1112f..86d7a9aabbe0 100755
--- a/components/ILIAS/UI/src/templates/default/Input/tpl.context_form.html
+++ b/components/ILIAS/UI/src/templates/default/Input/tpl.context_form.html
@@ -14,4 +14,5 @@
{BYLINE}
-
\ No newline at end of file
+
+
diff --git a/components/ILIAS/UI/src/templates/default/Input/tpl.optionalgroup_label.html b/components/ILIAS/UI/src/templates/default/Input/tpl.optionalgroup_label.html
index 2630c5296cad..50e0477cdcb6 100644
--- a/components/ILIAS/UI/src/templates/default/Input/tpl.optionalgroup_label.html
+++ b/components/ILIAS/UI/src/templates/default/Input/tpl.optionalgroup_label.html
@@ -3,3 +3,4 @@
{BYLINE}
+
diff --git a/components/ILIAS/UI/src/templates/default/Input/tpl.standard.html b/components/ILIAS/UI/src/templates/default/Input/tpl.standard.html
index ebc6006c21ce..3f902e54f2d0 100755
--- a/components/ILIAS/UI/src/templates/default/Input/tpl.standard.html
+++ b/components/ILIAS/UI/src/templates/default/Input/tpl.standard.html
@@ -1,4 +1,4 @@
-