# Building a basic form

**Adding a form simply requires you to add a block with pre-built PHTML template to your own XML layout file and adding a few arguments to it.**

## Adding XML layout
Within the layout file `view/adminhtml/layout/example.xml`, add the following:

```xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:View/Layout:etc/page_configuration.xsd">
    <update handle="loki_admin_components_form"/>

    <body>
        <referenceContainer name="content">
            <block
                name="yireo-training.example-admin.form"
                template="Loki_AdminComponents::form.phtml">
                <arguments>
                    <argument name="provider" xsi:type="string">Magento\Catalog\Api\ProductRepositoryInterface</argument>
                </arguments>
            </block>
        </referenceContainer>
    </body>
</page>
```

As a block name, we strongly recommend to prefix your own block (`form`) with a vendor `yireo-training`) and module name `example-admin`. There are perhaps other things that you want to add to the page, like a `title`. But that's not needed for this scope.

By using the XML layout handle `loki_admin_components_form` (as shown in the code above), the behaviour for admin forms is imported into your own layout.

As you can see, you define your own form block, while reusing the PHTML template of the `Loki_AdminComponents` module. The `provider` needs to point a class or a classname. In this example, the repository is inserted as a classname (so a string), because the product repository class does not implement the required `ArgumentInterface`. A provider could be either `repository`, `collection` or `array`. The underlying logic tries its best to *guess* the right provider handle for the given provider. If this does not work, a friendly exception is thrown. Just see what happens.

## Transforming the form block into a Loki Component
Next, we will need to *transform* the form block into a Loki Component, allowing for magic to happen on the JavaScript-level (using Alpine.js) and the PHP-level. For this, we create a file `etc/loki_components.xml` with the following content:

```xml
<?xml version="1.0" encoding="UTF-8" ?>
<components xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Loki_Components:etc/loki_components.xsd">
    <component 
        name="yireo-training.example-admin.form"
        group="loki_admin.form"
    />
</components>
```

The default behavior detects fields by looking at the first item that your provider provides. Either this includes too many fields, too few or the labels are not good enough. For this, it is normal to add additional configurations as `arguments` to the XML layout or to create your own ViewModel class, extending it from `Loki\AdminComponents\Component\Form\FormViewModel`.

The group `loki_admin.form` contains a reference to the default PHP classes (a `ComponentViewModel`, `ComponentRepository` and `ComponentContext`). If you want to change these classes, you can either drop the `group` attribute and all classes yourself or you can keep the `group` and only override the classes you need to override.

```xml
<?xml version="1.0" encoding="UTF-8" ?>
<components xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Yireo_LokiComponents:etc/loki_components.xsd">
    <component
        name="yireo-training.example-admin.form"
        viewModel="Loki\AdminComponents\Component\Form\FormViewModel"
        context="Loki\AdminComponents\Component\Form\FormContext"
        repository="Loki\AdminComponents\Component\Form\FormRepository">
    </component>
</components>
```

In most cases, you do not need to extend the repository class. If you want to do this, **let us know** first via an [GitHub Issue](https://github.com/LokiExtensions/Loki_AdminComponents/issues).

## Done
If you refresh the cache, you should now have a workable form.
