Update backend list records in a popup

Have you ever needed or wanted to update a record from the list view by opening a popup, rather than navigating to the update page? This trick will help you do just that!

1. Update the recordOnClick property of your config_list.yaml inside your controller's folder:

# Link URL for each record
recordOnClick: "$.popup({ handler: 'onUpdateForm', extraData: { record_id: ':id' } })"

2. Register the onUpdateForm handler in your controller class:

public function onUpdateForm()
    {     
        $this->asExtension('FormController')->update(post('record_id'));
        $this->vars['recordId'] = post('record_id');
        return $this->makePartial('update_form');
    }

3. Create the _update_form.htm partial inside your controller's views directory (i.e. /plugins/author/controllers/controllerName):

<?= Form::open(['id' => 'updateForm']) ?>
    <input type="hidden" name="record_id" value="<?= $recordId ?>" />
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="popup">×</button>
        <h4 class="modal-title"><?= e($this->pageTitle) ?></h4>
    </div>

    <?php if (!$this->fatalError): ?>

        <div class="modal-body">
            <?= $this->formRender() ?>
        </div>
        <div class="modal-footer">
            <button
                type="submit"
                data-request="onUpdate"
                onclick="$(this).data('request-data', {
                    redirect: 0
                })"
                data-hotkey="ctrl+s, cmd+s"
                data-popup-load-indicator
                class="btn btn-primary">
                <u>S</u>ave
            </button>

            <button
                type="button"
                class="btn btn-default"
                data-dismiss="popup">
                <?= e(trans('backend::lang.form.cancel')) ?>
            </button>
        </div>

    <?php else: ?>

        <div class="modal-body">
            <p class="flash-message static error"><?= e(trans($this->fatalError)) ?></p>
        </div>
        <div class="modal-footer">
            <button
                type="button"
                class="btn btn-default"
                data-dismiss="popup">
                <?= e(trans('backend::lang.form.close')) ?>
            </button>
        </div>

    <?php endif ?>

    <script>
        setTimeout(
            function(){ $('#updateForm input.form-control:first').focus() },
            310
        )
    </script>

<?= Form::close() ?>

4. Register the onUpdate handler in the controller class:

public function onUpdate()
    {
        $this->asExtension('FormController')->update_onSave(post('record_id'));
        return $this->listRefresh();
    }