Rendering

#Rendering Form

Once installing Laraform backend package you can extend Laraform class to create a new form:

<?php

namespace App\Forms;

use Laraform;

class MyForm extends Laraform
{
  public $schema = [
    'title' => [
      'type' => 'text',
      'label' => 'Title'
    ]
  ];
}

You can use the $schema property to define a form, or alternatively the schema() method:

<?php

namespace App\Forms;

use Laraform;

class MyForm extends Laraform
{
  public function schema() {
     return [
      'title' => [
        'type' => 'text',
        'label' => 'Title'
      ]
    ];
  }
}

Once you have your form defined you can pass it to a view and call its render() method to render it:

// routes/web.php

Route::get('/', function(Request $request){
  $myForm = app('App\Forms\MyForm');

  return view('index', [
    'myForm' => $myForm
  ])
});
<!-- index.blade.php -->

<html>
  <head>
    <!-- ... -->
  </head>
  <body>
    <div id="app">
      {{ $myForm->render() }}
    </div>
  </body>

</html>

As you can see App\Forms\MyForm is instantiated using app() function, because we need to resolve its constructor dependencies automatically.

When instantiating a form make sure to use app() function to resolve its dependencies.

This will render the <laraform> component and pass over properties like schema in a JSON as :form property:

<!-- index.blade.php -->

<html>
  <head>
    <!-- ... -->
  </head>
  <body>
    <div id="app">
      <laraform :form="{schema:{title:{type:'text',label:'Title'}},...}"></laraform>
    </div>
  </body>

</html>

In fact Laraform passes over a whole bunch of other properties like buttons or form key and many more which will basically set up the Laraform Vue component via the :form property.

#Connect To Vue Component

Obviously not all the functionalities can be defined in the backend (eg. frontend hooks) and therefore we need to be able to extend it on the frontend. To do so you can define a $component property and instruct Laraform to render a specific component for the form instead of <laraform>:

<?php

namespace App\Forms;

use Laraform;

class MyForm extends Laraform
{
  public $component = 'my-form';

  public function schema() {
     return [
      'title' => [
        'type' => 'text',
        'label' => 'Title'
      ]
    ];
  }
}

Calling the render() method will result in rendering the form with the custom component:

<!-- index.blade.php -->

<html>
  <head>
    <!-- ... -->
  </head>
  <body>
    <div id="app">
      <my-form :form="{schema:{title:{type:'text',label:'Title'}},...}"></my-form>
    </div>
  </body>

</html>

From this point forward you might extend the functionality of MyForm in the my-form Vue component.

By default anything you define on a component level will override what a form receives in its :form property. For example defining $mulitlingual = true on the backend, but multilingual: false in the Vue component would result in multilingual = false because frontend overrides backend.

Properties that give an array or object of items, like schema will not be overridden but extended by the Vue component:

<?php

namespace App\Forms;

use Laraform;

class MyForm extends Laraform
{
  public $component = 'my-form';

  public function schema() {
     return [
      'title' => [
        'type' => 'text',
        'label' => 'Title'
      ]
    ];
  }
}
// ./path/to/MyForm.vue

<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        title: {
          created() {
            console.log(this.label + ' is created')
          }
        }
      }
    })
  }
</script>

This will render a form with a Title field and log Title is created when the element is created.

The following properties will be extended by Vue components instead of overriding:

  • schema
  • tabs
  • wizard
  • messages
  • buttons.

#Properties

All the properties Laraform Vue component uses can be defined at the backend too. Here's a list of them:

All of them can be defined but none of them are required. Some of them will be passed to the frontend component based on Configuration values, if not defined.