This forum has moved to a new location and is in read-only mode. Please visit talk.octobercms.com to access the new location.

mja
mja

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

boogiebug
boogiebug

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

odlex
odlex

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

corentin8023
corentin8023

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.

deroccha
deroccha

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.

chris10207
chris10207

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

Fibonacci
Fibonacci

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?

amdad
amdad

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

amdad
amdad

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

Jasson_10861
Jasson_10861

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

forums7529
forums7529

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

inot
inot

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

MarSch
MarSch

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.

aljayog1919188
aljayog1919188

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?

MarSch
MarSch

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?

dmitry.barchuk18445
dmitry.barchuk18445

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.

MarSch
MarSch

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

dmitry.barchuk18445
dmitry.barchuk18445

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.

MarSch
MarSch

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?

skygdi

1-20 of 32

You cannot edit posts or make replies: the forum has moved to talk.octobercms.com.