Hey,

I've been developing on OctoberCMS for quite a while now and often enough I ran in to the same problem: I had to use the same form in both backend and frontend of my app.

As of writing this I don't think there is a clean way how this could be done, so I thought I could share my method.

https://medium.com/@matissjanis/octobercms-using-backend-forms-in-frontend-component-fe6c86f9296b

I hope this will be useful to you as well. Cheers!

Last updated 9 years ago

Thanks, I think this is what I'm looking for!

Hi and thanks mja,

If you want the js / css backoffice and js / css of formwidget You Should add in OnRun method of your component:

// form's assets loading

        $this->addJs('/modules/system/assets/js/framework.extras.js', 'core');
        $this->addJs('/modules/backend/assets/js/october-min.js', 'core');

        $this->addCss('/modules/backend/assets/css/october.css', 'core');
        $this->addCss('/modules/backend/assets/css/controls.css', 'core');

        foreach($formController->getAssetPaths() as $type => $assets)
            foreach($assets as $asset)
                $this->{'add'.ucfirst($type)}($asset);

I hope this will be helpful for you too.

Last updated 9 years ago

Hi all and Tank's mja ! It's very useful but I would like to add widget form in Front. It's possible ? especially for repeater : https://octobercms.com/docs/backend/forms#widget-repeater I try to Extend it but I failed.

It would be really cool if this approach would be sustained in the future by the october developers to give us more flexibility to can manage easily forms created in backend and do not repeat our self. With simple forms this workaround works great but with widgets we face a lot problems.

Thanks @mja for sharing your workaround +1.

i really like the approach and it would be great to share the backend form with the frontend environment.

currently the approach is only working when you want to create a new record, what about updating an existing one ?

also, the backend forms are providing a lot of useful widget to handle the relationship between the models. for example, i need to provide to the frontend user the ability to update his company profile which has many many relationship with other data model (not a dropdown list but the tables) such as users, contacts, business categories, business licenses. With the backend API, it is awesomely fast to develop the form for the backend. But i have no idea and no clue on how to develop the same for the frontend with the same capacity

chris10207 said:

i really like the approach and it would be great to share the backend form with the frontend environment.

currently the approach is only working when you want to create a new record, what about updating an existing one ?

also, the backend forms are providing a lot of useful widget to handle the relationship between the models. for example, i need to provide to the frontend user the ability to update his company profile which has many many relationship with other data model (not a dropdown list but the tables) such as users, contacts, business categories, business licenses. With the backend API, it is awesomely fast to develop the form for the backend. But i have no idea and no clue on how to develop the same for the frontend with the same capacity

yap. How about to update?

Yea, it bother me a lot. I would like to see example how backed forms/widgets can be taken to frontend.

It should works with backend? With current release it doesn't. Any update?

I'm also very interested in this approach. Just wonder if there's any update for this.

Please could someone explain how or where to code the HTML form controls and div tags etc rather than simply calling {{ form.formRender()|raw }} and having it all done automatically ?

For instance, I'm using Foundation 6 and the HTML generated by {{ form.formRender()|raw }} is completely incompatible with that CSS Framework.

Is it possible to use something like {{ Form::text('first_name', 'Chuck') }} and if so, where does that code need to go ?

Last updated 8 years ago

It is possible to generate date picker or file browse field ? @mja

I am not sure if that solves all problems here described, but when i tested the solution of this guide i got for some of my forms error when they contained formwidgets e.g. a relation, fileupload ...

After some searching in errorlogs i understood, that by using formwidgets in the frontend, formwidgets are not registered... so the field-type-description in YAML-file (e.g. codeeditor) is unknown. By registering all common formwidgets of the backend in our new plugin, it should work.

/*plugin.php of our forms-component */
    public function registerFormWidgets()
{
    return [
        'Backend\FormWidgets\CodeEditor' => [
            'label' => 'Code editor',
            'code'  => 'codeeditor'
        ],

        'Backend\FormWidgets\RichEditor' => [
            'label' => 'Rich editor',
            'code'  => 'richeditor'
        ],

        'Backend\FormWidgets\MarkdownEditor' => [
            'label' => 'Markdown editor',
            'code'  => 'markdown'
        ],

        'Backend\FormWidgets\FileUpload' => [
            'label' => 'File uploader',
            'code'  => 'fileupload'
        ],

        'Backend\FormWidgets\Relation' => [
            'label' => 'Relationship',
            'code'  => 'relation'
        ],

        'Backend\FormWidgets\DatePicker' => [
            'label' => 'Date picker',
            'code'  => 'datepicker'
        ],

        'Backend\FormWidgets\TimePicker' => [
            'label' => 'Time picker',
            'code'  => 'timepicker'
        ],

        'Backend\FormWidgets\ColorPicker' => [
            'label' => 'Color picker',
            'code'  => 'colorpicker'
        ],

        'Backend\FormWidgets\DataTable' => [
            'label' => 'Data Table',
            'code'  => 'datatable'
        ],

        'Backend\FormWidgets\RecordFinder' => [
            'label' => 'Record Finder',
            'code'  => 'recordfinder'
        ],

        'Backend\FormWidgets\Repeater' => [
            'label' => 'Repeater',
            'code'  => 'repeater'
        ],

        'Backend\FormWidgets\TagList' => [
            'label' => 'Tag List',
            'code'  => 'taglist'
        ]
    ];
}

Hope that will help some of you.

mja said:

Hey,

I've been developing on OctoberCMS for quite a while now and often enough I ran in to the same problem: I had to use the same form in both backend and frontend of my app.

As of writing this I don't think there is a clean way how this could be done, so I thought I could share my method.

https://medium.com/@matissjanis/octobercms-using-backend-forms-in-frontend-component-fe6c86f9296b

I hope this will be useful to you as well. Cheers!

Hey MJA

I followed your tutorial but I get an error when using file uploads in the form. It says: An exception has been thrown during the rendering of a template ("The partial '_field_fileupload.htm' is not found.").

Do you know what I can do to fix this?

Did you tried my solution with registering the formwidgets? Probably that will solve your problem...

aljayog1919188 said:

mja said:

Hey,

I've been developing on OctoberCMS for quite a while now and often enough I ran in to the same problem: I had to use the same form in both backend and frontend of my app.

As of writing this I don't think there is a clean way how this could be done, so I thought I could share my method.

https://medium.com/@matissjanis/octobercms-using-backend-forms-in-frontend-component-fe6c86f9296b

I hope this will be useful to you as well. Cheers!

Hey MJA

I followed your tutorial but I get an error when using file uploads in the form. It says: An exception has been thrown during the rendering of a template ("The partial '_field_fileupload.htm' is not found.").

Do you know what I can do to fix this?

I used Mja's method, it works! When i using form widgets the System shows error. So, I register form widgets as MarSch said, and Exceptions gone, but widgets not showing: there is textarea instead rich editor, and file upload have only label.

Hello dmitry, can you take a look which javascripts got loaded by developement tools of your browser? I did not tested all formwidgets till now but i suspect that probably some javascripts are missing... i your case richeditor.js / fileupload.js. If that files are not loaded you could try somethink like the following code. Please give feedback if that solved your problem.

$this->addJs('/modules/backend/formwidgets/richeditor/assets/js/richeditor.js', 'core');

Last updated 8 years ago

Hello MarSch, I used your method... but not enough just add widget' script. Also I added another scripts and styles(I saw them in backend web-console). It looks good, it works, but the confirmation of from created two materials instead one, and image from fileupload not saved.

Hmmm in case of fileUploader for frontend / as Component take a look here: https://github.com/octobercms/october/issues/871

and here:

https://github.com/responsiv/uploader-plugin

Maybe this can help. Richeditor as Component now working?

Thanks