Using backend forms in frontend - OctoberCMS

Question

I have a form in the back-end to create new entries. I want to allow my website's front-end users to create these entries as well, so since I already have such form and the controller in the back-end, I'd like to utilize it in the front-end as well.

I've created a component for the front-end and tried to render the back-end form in it, like so:

# components/NewEntryForm.php
<?php namespace Author\PluginName\Components;

use Cms\Classes\ComponentBase;
use Author\PluginName\Models\Entry;
use Author\PluginName\Controllers\Entries as EntryController;

class NewEntryForm extends ComponentBase
{
    public function componentDetails()
    {
        return [
            'name'        => 'NewEntryForm Component',
            'description' => 'No description provided yet...'
        ];
    }

    public function onRun()
    {
        // New back-end form with the context of 'frontend'
        $formController = new EntryController();
        $formController->create('frontend');

        // Append the entryController to the page
        $this->page['form'] = $formController;

        // Add backend styles to the form
        $this->addCss('/modules/backend/assets/css/controls.css', 'core');
    }
}

Component's default.htm:

<!-- components/newentryform/default.htm -->
<form role="form"
    data-request="{{ __SELF__ }}::onSave"
    data-request-success="$el.hide();$('.confirm-container').removeClass('hide');">

    {{ form.formRender()|raw }}

    <div class="form-group">
        <button class="btn btn-primary btn-block btn-lg" type="submit" value="register">Create</button>
    </div>
</form>

However, I get the following error:

An exception has been thrown during the rendering of a template ("The partial '_field_richeditor.htm' is not found.").

Hardik Satasiya · Accepted Answer · 2020-10-14T17:17:15.490

1

You need to resister those widgets manually , as in backend they are registered by backend provider.

Code for registering widgets in frontend, you need to put this code in your plugin's Plugin.php file

// import
use Backend\Classes\WidgetManager;

class Plugin extends PluginBase
{
    public function register() {
      WidgetManager::instance()->registerFormWidgets(function ($manager) {
        // You can add them as per need
        $manager->registerFormWidget('Backend\FormWidgets\RichEditor', 'richeditor');

        // $manager->registerFormWidget('Backend\FormWidgets\CodeEditor', 'codeeditor');          
        // $manager->registerFormWidget('Backend\FormWidgets\MarkdownEditor', 'markdown');
        // $manager->registerFormWidget('Backend\FormWidgets\FileUpload', 'fileupload');
        // $manager->registerFormWidget('Backend\FormWidgets\Relation', 'relation');
        // $manager->registerFormWidget('Backend\FormWidgets\DatePicker', 'datepicker');
        // $manager->registerFormWidget('Backend\FormWidgets\TimePicker', 'timepicker');
        // $manager->registerFormWidget('Backend\FormWidgets\ColorPicker', 'colorpicker');
        // $manager->registerFormWidget('Backend\FormWidgets\DataTable', 'datatable');
        // $manager->registerFormWidget('Backend\FormWidgets\RecordFinder', 'recordfinder');
        // $manager->registerFormWidget('Backend\FormWidgets\Repeater', 'repeater');
        // $manager->registerFormWidget('Backend\FormWidgets\TagList', 'taglist');
        // $manager->registerFormWidget('Backend\FormWidgets\MediaFinder', 'mediafinder');
        // $manager->registerFormWidget('Backend\FormWidgets\NestedForm', 'nestedform');
      });
    }
    // ... other code ...
}

It will register widgets, and you can use them in front-end without any issues.

if any doubts please comment.

edited Oct 14 '20 at 17:17

answered Oct 14 '20 at 17:11

Hardik Satasiya

9,547
3
22
40

This fixed it. Thank you very much. However, I now encounter another error: *Call to a member function hasAccess() on null*. I guess, it's because the backend form checks if the backend user is logged in. Do you know how to make the form available for frontend users? If so, should I create a separate question, so you could answer and I could upvote and accept it? – qwaz Oct 14 '20 at 17:43
hmm let me check it may be – Hardik Satasiya Oct 14 '20 at 17:44
I am not sure as from my component I added ajax handler and I can use normal form and submit it. may be your form is little complex I guess – Hardik Satasiya Oct 14 '20 at 17:59
are you sure you are not logged into the backend when you test it? – qwaz Oct 14 '20 at 18:12
When I disable *richeditor* field in my `fields.yaml`, the error goes away, I guess the issue is associated with the access to media files in *richeditor* that is not allowed on frontend. Did you test it with *richeditor* field present in your backend form? – qwaz Oct 14 '20 at 18:22
hmm yes I guess that may be the issue, as i tested with normal fields – Hardik Satasiya Oct 14 '20 at 18:23
may be try to use another editor in Fe may Be, as we can not edit core files, and without it we can not have proper solution :) – Hardik Satasiya Oct 15 '20 at 06:42
in this set up when I'm creating the form via formcontrolller, how can I just loop through fields and render it with my own code rather than relying on those widgets, etc? – qwaz Oct 15 '20 at 18:25
you can have all fields using `dd($formController->asExtension('FormController')->formGetWidget()->fields);` inside your `onRun` method and then you can pass it to your `default partial` and render your own fields as you like – Hardik Satasiya Oct 16 '20 at 07:44

Using backend forms in frontend - OctoberCMS

1 Answers1