Field Options

When editing the creation, reading, updating, and deleting lines, you have a selection field that allows you to include additional information or parameters for your data type. This text area accepts JSON and is applied to the following types of inputs:

Text (Text Box, Text Area, Rich Textbox and Hidden)
Check Box
Drop Down
Radio Button
Image (Cropper)
Date

Learn how to use these additional details below:
Text (Text Box, Text Area, Rich Textbox and Hidden)

{
    "default" : "Default text"
}

The Text Box, Text Area, Rich Textbox and Hidden are all text inputs. In JSON above, you can specify a default value for input.

Check Box

{
    "on" : "On",
    "off" : "Off",
    "checked" : "false"
}

In the Laravel Admin Panel, the Check Box is converted to a toggle switch, and as you can see above, the power key will contain a value when the toggle switch is turned on, and off will contain the value set with the switch turned off. If the check box is set to true, the check box is disabled; otherwise it will be enabled by default.

Drop Down

{
    "default" : "key2",
    "options" : {
        "key1": "Value 1",
        "key2": "Value 2"
    }
}

When specifying that the type of input should be drop-down, you will need to specify the values of this drop-down list. In JSON above, you can specify the default value of the drop-down list if it does not matter. In addition, in the options object you specify the value of the parameter on the left and the text that will be displayed on the right.

Drop Down

{
    "default" : "key2",
    "options" : {
        "key1": "Value 1",
        "key2": "Value 2"
    }
}

Radio Button

{
    "default" : "key2",
    "options" : {
        "key1": "Value 1",
        "key2": "Value 2"
    }
}

The button "Radio" is exactly the same as the drop-down list. You can specify a default value if it was not set, and in the options object you specify the value of the parameter to the left and the text that will be displayed on the right.

Image

{
    "resize": {
        "width": "800",
        "height": null
    },
    "quality" : "80%",
    "upsize" : true,
    "thumbnails": [
        {
            "name": "medium",
            "scale": "50%"
        },
        {
            "name": "small",
            "scale": "25%"
        },
        {
            "name": "cropped",
            "crop": {
                "width": "300",
                "height": "250"
            }
        }
    ]
}

Image input has many options. By default, if you do not specify any parameters, there are no problems ... Your image will still be downloaded. But if you want to resize the image, change the image quality, or specify thumbnails for the downloaded image, you will need to specify these details.

resize
If you want to specify the size, you will need to include it in the resizing object. If you set either a height or a width to null, it will maintain the aspect ratio depending on the width or height set. Thus, for the example above, the width is set to 800 pixels, and since the height is set to zero, it will resize the image to 800 pixels and change the height dimension according to the current aspect ratio.

quality
If you want to compress the image with percentage quality, you can specify this percentage in the quality key. Usually from 80 to 100% little attention is paid to the quality of the image, but the image size can be significantly lower.

upsize
If you specify that your image will be changed to 800px and the image is less than 800px by default, it will not increase the image size to 800px; However, if you set the upsize to true it will magnify all images to the specified size values.

thumbnails
Thumbnails takes an array of objects. Each object contains 2 values, a percentage of names and a scale. The name will be attached to your thumbnail (as an example, let's say that you uploaded the image name.jpg to name-medium.jpg) a thumbnail with the name of the environment will be created. Scale is the percentage that you want the thumbnail to scale. This value will be a percentage of the width and height of the resizing, if indicated.

Date & Timestamp

{
    "format" : "%Y-%m-%d"
}

The date and time entry field allows you to specify a date. In JSON above, you can specify the value of the date format. It allows you to display the formatted date in the view and read mode using the formatLocalized() method Carbon