Cruds


CRUD applications can be added from the Applications tab.


Apps

Creating

To add a new CRUD application, you can click on the Add CRUD button under the Applications Tab.


image


{info} After creating a new CRUD application, Vemto will automatically identify the Model fields and create the related inputs (including the Relationship selects).

CRUD Editor

Clicking on an Application card, you can access the CRUD Editor. When you open it, it shows you the Forms Tab, where you can add/remove inputs, edit the form responsivity, and update all the components options.


image

Input Components

To add a new Input Component, just click on it under the Components Panel. It will open a modal in that you can choose if you want to add a Standalone Component or a component Linked to a Model Field.


image

Each form input has the following options:

  • Name - The input name (editable only for standalone inputs)
  • Label - The input label
  • Placeholder - The input placeholder
  • Default Value - The input default value
  • Min - The input min. value (only for numeric inputs)
  • Max - The input max. value (only for numeric inputs)
  • Items - The input items (only for selects or inputs with multiple options like radio group, checkbox group, etc) - this field is not editable for inputs linked with model fields
  • Small Screen Size - The input size for small/mobile screens (available only on mobile mode)
  • Medium Screen Size - The input size for medium screens (available only on medium screen mode)
  • Large Screen Size - The input size for large screens (available only on large screen mode)
  • On Create - Defines if the input is shown on the Create page
  • On Update - Defines if the input is shown on the Edit page
  • On Show - Defines if the input is shown on the Show page
  • On Index - Defines if the input is shown on the Index page

"Belongs To" Relationship Input

To add a Belongs To relationship input (a select input by default), just select a foreign field in the Linked to Model Field model when adding a new input.


image

Linking to an FK field


image

The added Select for Relationship

{info} Even if you are not adding a Select Input, if you select an FK field, Vemto will always add a Select for Relationship input.

Responsivity

To change the form inputs responsivity, just select the screen mode on the inputs area top-right corner, then change the screen size on the input options.


image

Validation

The Form Validation settings are available under the Validation Tab. Vemto supports all Laravel Validation rules and has a built-in search to facilitate you selecting the correct rules.


image

{info} Vemto will automatically generate the basic validation based on the field name, type, and settings

Settings

The Form Settings are available under the Settings Tab. Currently, the following options are available:

  • Name - The CRUD application name (the name that will appear on the Apps menu on the generated application)
  • Route/endpoint Suffix - Defines the route/endpoint suffix for the generated application
  • Index Page Title - Application title on the Index page
  • Create Page Title - Application title on the Create page
  • Edit Page Title - Application title on the Edit page
  • Show Page Title - Application title on the Show page


image