taylornetwork / laravel-dynamic-form
Requires
- php: >=7.2
- illuminate/config: >=5.5
- illuminate/database: >=5.5
- illuminate/support: >=5.5
This package is auto-updated.
Last update: 2024-09-23 10:29:15 UTC
README
This package lets you dynamically create forms for a Laravel application that can be easily filled out by a user.
I created this package to have better control over user form pages, questions and options.
Note: both the package and readme are still a work in progress
Install
$ composer require taylornetwork/laravel-dynamic-form
Setup
Run migrations
$ php artisan migrate
Models
All models are in the namespace TaylorNetwork\DynamicForm\Models
Form
The Form
model allows you to define a form key
and title
and will provide all related models below.
Page
The Page
model allows you to define pages on the form. This can be useful if you have a lot of questions to ask the user. Forms need at least 1 page.
Pages are numbered automatically when you use the addPage
method (see Usage below)
Pages can have a title that will be displayed to the user.
Question
The Question
model is the actual question that will be shown to the user. You can specify the a few different question types.
Currently supported types
text
(default)textarea
select
select multiple
select multiple taggable
(select multiple but can include user defined values)
Option
The Option
model is only used if the question type is one that includes select
. It allows you to set options to be used for the select controls
Usage
For example you want to create a multiple page form that asks the user about themselves and their home.
Create a new form
Form::create([ 'key' => 'user-info', 'title' => 'User Information Form' ]);
Fetch a form by key
You can use the fetch
method on the Form
model to fetch a form by key or you can use the get_form_data
helper function.
Form::fetch('user-info'); get_form_data('user-info');
Add a page
Use the addPage
method to add a new page to a form. Forms need at least 1 page. The addPage
method will automatically increment the page numbers. It accepts an optional parameter that is the title of the page.
Form::fetch('user-info')->addPage('Information about you'); Form::fetch('user-info')->addPage();
Add questions
Use the addQuestion
method to add a question to a page of a form.
Form::fetch('user-info')->page(1)->addQuestion('What is your name?'); Form::fetch('user-info')->page(1)->addQuestion('What is your email address?'); Form::fetch('user-info')->page(1)->addQuestion('Tell us something interesting about you?', 'textarea');
Add questions with options
Basic options:
For basic options that the values to pass back are the same as the text shown to the user, use the addOptions
method and pass an array to a question.
Form::fetch('user-info')->page(1)->addQuestion('Are you the home owner?', 'select')->addOptions([ 'Yes', 'No' ]); Form::fetch('user-info')->page(1)->addQuestion('What colours are in your home?', 'select multiple taggable')->addOptions([ 'Yellow', 'Blue', 'Red' ]);
Options with different values:
For options that the values passed back are different than the text shown to the user, use the addOption
method and pass the text as the first parameter and the value as the second.
The addOption
method returns an instance of the Option
model so you cannot chain multiple together.
$question = Form::fetch('user-info')->page(1)->addQuestion('What rooms need work?', 'select multiple'); $question->addOption('Bathroom', 'BATH'); $question->addOption('Living Room', 'LVRM'); $question->addOption('Bedroom', 'BDRM'); $question->addOption('Basement', 'BSMT');
VueJS Setup
If you want to use the VueJS modal included
Install required NPM dependencies
$ npm install --save vue-select sweetalert2
Publish VueJS component
$ php artisan vendor:publish --tag=form-components
Add the following line to your resources/js/app.js
somewhere after window.Vue = require('vue');
Vue.component('dynamic-form', require('./components/DynamicForm.vue').default);
VueJS Usage
The Vue modal has 3 required props
id
: The modal ID, used to open the modalform-data
: The actual form data, you can use theget_form_data()
helperpost-route
: The route to post the saved data to
When the data is submitted the component will use make an axios
POST request to the uri from post-route
.
The POST data will be an object with keys being the id
of the question and the value being the data entered. If using select multiple
this will be an array if more than one item is selected.
Basic Example
<button class="btn btn-outline-secondary" data-toggle="modal" data-target="#dynForm">Open Modal</button> <dynamic-form id="dynForm" :form-data="{{ get_form_data('user-info') }}" post-route="{{ route('api.dynamic.form.store') }}"> </dynamic-form>
Note: When passing the form data to the Vue component be sure to include the :
to bind the data. T
Example POST Data
Based on example above.
{ 1: 'John Doe', 2: 'johndoe@example.com', 3: 'John Doe is not my real name.', 4: 'Yes', 5: [ 'Blue', 'Red' ], 6: 'BDRM' }