Atomic Fields

⚛️ Atomic Panel ships with built in fields .

Defining Fields

Each Model with AtomicModel Fields has function called AtomicFields() , just override this method to start defining fields

use Illuminate\Database\Eloquent\Model;
use MustafaKhaled\AtomicPanel\AtomicModel;
use MustafaKhaled\AtomicPanel\Fields\ID;

class MyModel extends Model
{
     use AtomicModel;
     
     public static function AtomicFields()
     {
          return [
              ID::make('id', 'id'),
          ];   
     }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Showing / Hiding Fields

The following methods may be used to show / hide fields based on the display context:

  • hideFromIndex
  • hideFromDetail
  • hideWhenCreating
  • hideWhenUpdating
  • onlyOnIndex
  • onlyOnDetail
  • onlyOnForms
  • exceptOnForms

You may chain any of these methods onto your field's definition in order to instruct Atomic where the field should be displayed:

Text::make('Name')->hideFromIndex()
1

Sortable Fields

When attaching a field to a AtomicModel, you may use the sortable method to indicate that the resource index may be sorted by the given field in datatable:

Text::make('Name', 'name_column')->sortable()
1

Searchable Fields

When attaching a field to a AtomicModel, you may use the searchable method to indicate that the resource index may be searched by the given field in datatable:

Text::make('Name', 'name_column')->searchable()
1

Relationships Fields

Relationships

Relationships Fields has its own page here Relation Fields

Field Types

Atomic ships with a variety of field types. So, let's explore all of the available types and their options:

Checkbox Field

Checkbox Field Provide an checkbox input control :

use MustafaKhaled\AtomicPanel\Fields\Checkbox;

Checkbox::make('Gender', 'column_gender')
1
2
3

Customizing True / False Values

Customizing True / False Values If you are using values other than true, false, 1, or 0 to represent "true" and "false", you may instruct Field to use the custom values recognized by your application. To accomplish this, chain the trueValue and falseValue methods onto your field's definition

Checkbox::make('Gender', 'column_gender')->trueValue('Yes')->falseValue('No')
1

Date Field

The Date field provides an input control with a datepicker:

use MustafaKhaled\AtomicPanel\Fields\Date;

Date::make('Display Title', 'timestamp_column_name')
1
2
3

Email Field

The Email field provides an input control with a type attribute of email:

use MustafaKhaled\AtomicPanel\Fields\Email;

Email::make('Display Title', 'column_title')
1
2
3

File Field

The File field provides your the ability to upload files/images/etc:

use MustafaKhaled\AtomicPanel\Fields\File;

File::make('File', 'column_name')
1
2
3

Custom Upload Path

You can customize File field upload path by method path($path)

File::make('File', 'column_name')->path('members')
1

Custom Upload Disk

You can customize File field upload disk by method disk($disk) and $disk is Storage Available Disk

File::make('File', 'column_name')->disk('s3')
1

ID Field

The ID field represents the primary key of your model's database table.

use MustafaKhaled\AtomicPanel\Fields\ID;
ID::make('ID', 'id_column')
1
2

Number Field

The Number field provides an input control with a type attribute of number:

use MustafaKhaled\AtomicPanel\Fields\Number;

Number::make('Display Title', 'column_title')
1
2
3

Alternative Methods

Number has alternative methods to customize min and max for input

Number::make('Display Title', 'column_title')->min(0)->max(10)
1

Option Field

Option Field Provide an radio control for given options:

use MustafaKhaled\AtomicPanel\Fields\Option;

Option::make('Gender', 'column_gender')->options([
    'male' => "Male",
    'female' => "Female"
])

1
2
3
4
5
6
7

Password Field

The Password field provides an input control with a type attribute of password and the value already hashed by bcrypt laravel function:

use MustafaKhaled\AtomicPanel\Fields\Password;

Password::make('Display', 'password')
1
2
3

Select Field

Select Field Provide an select control for given options:

use MustafaKhaled\AtomicPanel\Fields\Select;

Select::make('User Type', 'type')->options([
    'guest '=> "Guest",
    'user' => "User",
    'admin' => "Admin",
])

1
2
3
4
5
6
7
8

Text Field

The Text field provides an input control with a type attribute of text:

use MustafaKhaled\AtomicPanel\Fields\Text;

Text::make('Display Title', 'column_title')
1
2
3

Textarea Field

The Textarea field provides an Textarea control:

use MustafaKhaled\AtomicPanel\Fields\Textarea;

Textarea::make('Display Text', 'column_name')
1
2
3

Trix Field

The Trix field provides a Trix editor for its associated field. Typically, this field will correspond to a TEXT column in your database. The Trix field will store its corresponding HTML within the associated database column:

use MustafaKhaled\AtomicPanel\Fields\Trix;

Trix::make('Content')
1
2
3

Customization

Field Help Text

If you would like to place "help" text beneath a field, you may use the help method:

Password::make('Password')->help(
    'password must contain letters and numbers and be 6-16 characters'
)
1
2
3

Value Custom Display

if you want to replace the display of the value in the index or details , you may use the indexDisplay method:

Text::make('name', 'name')->indexDisplay(function ($model){
   return $model->id.' Custom Display';
}),
1
2
3