Extend plugins form with secondary form / secondary section (outside main form tags)

I want to extend the RainLab Users plugin within my custom plugin in October CMS.

What I want to do exactly is:
I want to add extra tab fields to the ‘tab’ field of the existing Users plugin (such as address, orders) and list user-related information in these fields, along with adding an add button to each table. When this add address or order button is clicked, I want a modal to open and the form inside the modal to work independently from the existing Users form. If I extend the form fields as a “partials” in the current structure, since these fields are created within the main form, the form tag and submit button inside the modal are also sending requests for the main form.

UserController::extendFormFields(function ($form, $model, $context) {
	if (! $model instanceof \RainLab\User\Models\User || ! in_array($context, ['preview', 'update'])) {
		return;
	}

	// İlişkili verileri yükleyin
	$model->load(['addresses']);



	// İlişkili verileri formda bir sekme altında göster
	$form->addTabFields([
		'addresses'    => [
			'type' => 'partial',
			'tab'  => 'Addresses',
			'path' => '$/rasch/shortcut/controllers/extended_users/address.htm',
		],

I’m thinking of adding a modal outside of the form and considering using it to both open and render the form and its elements via AJAX when the button is clicked. However, I’m quite new to October CMS and I can’t figure out how to do this. Could you please help me with this?

If you extend the form on that page, you can use a partial type and include practically anything.

If you want AJAX, take a look at a form widget… it is like a partial on steroids.

Once registered, you refer to it as a form field, e.g. type: myformwidget

I think I might not have explained what I’m trying to achieve properly. How is the widget structure you mentioned supposed to help me?

I’ve created a table for users to add their addresses to the existing Rainlab.User plugin and linked it. Now, I want to utilize this relationship in the backend in the simplest way possible by adding a new tab area on the users’ preview page. Within this tab, I aim to list the addresses users have added, include a form to add new addresses, and use the same form to update existing addresses. How exactly are form widgets going to facilitate this? The form I’m trying to extend is located within a partial that’s used in the tab areas, but because this is being rendered inside the main form element of the current preview page, the form I added doesn’t function properly.

form
div.extended-tab
form(extended tab)
input.address_form_inputs

You can extend the fields of RainLab.User to add your relation.

In your Plugin.php

public function boot() {
      $this->extendRainLabUserFormField();
}
public function extendRainLabUserFormField() {

        Event::listen('backend.form.extendFields', function($form) {
            
            // Only for the User model
            if (!$form->model instanceof \RainLab\User\Models\User) {
                return;
            }

            if (!$form->model->exists) {
                return;
            }
            
            $form->addTabFields([
                'addresses' => [
                    'tab' => 'Addresses',
                    'label'   => 'Addresses',
                    'type'    => 'relation',
                ],
            ]);

Don’t forget to add the relation to Rainlab\User\Models\User.

public function boot() {
      $this->extendRainLabUserFormField();
      $this->extendRainLabUserModel();
}
public function extendRainLabUserModel() {

        \Rainlab\User\Models\User::extend(function($model) {

            if (!$model instanceof Rainlab\User\Models\User) {
                return;
            }

            $model->belongsToMany['addresses'] = [
                'YourAuthorName\YourPlugin\Models\Address'
            ];

        });

    }

And add the new relation config and implement the RelationController behavior :

public function boot() {
      $this->extendRainLabUserFormField();
      $this->extendRainLabUserModel();
      $this->extendRainLabUserController();
}
 public function extendRainLabUserController() {

        \Rainlab\User\Controllers\Users::extend(function($controller) {

            if (!$controller instanceof \Rainlab\User\Controllers\Users) {
                return;
            }

            $controller->implement[] = 'Backend\Behaviors\RelationController';
            $controller->relationConfig = '$/yourAuthorName/yourPlugin/controllers/users/config_relation.yaml';

        });
    }

In your config_relation.yaml:

# config_relation.yaml
addresses:
    label: Addresses
    view:
        list: $/yourAuthorName/yourPlugin/models/address/columns_user.yaml
        toolbarButtons: add|remove
    manage:
        list: $/yourAuthorName/yourPlugin/models/address/columns_user.yaml
        form: $/yourAuthorName/yourPlugin/models/address/fields_user.yaml

You just have to create the columns and fields file with the fields that you want to see.

1 Like

I was used this method and that’s working perfect finally but the preview page excluding. Thank you

1 Like