AMSDAL FrontendConfig Plugin¶

The AMSDAL FrontendConfig plugin provides the ability to create configurations for the AMSDAL portal and other similar frontend applications. It builds configurations automatically for models and transactions, and you can add your custom configuration for any model to define how it should be displayed in the frontend.

To enable this plugin, add amsdal.contrib.frontend_configs.app.FrontendConfigAppConfig value to AMSDAL_CONTRIBS environment variable (enabled by default).

Models¶

Plugin provides the following models:

FrontendModelConfig¶

It's the main model that stores configurations for models. Fields:

class_name - name of the target model
control - complex FrontendControlConfig structure that describes how to display model in the frontend

Usage¶

To use custom frontend config just add JSON fixture with FrontendModelConfig description to your application fixtures. For example, here is a custom frontend config for User model:

{
    "FrontendModelConfig": [
        {
            "external_id": "user_frontend_config",
            "class_name": "User",
            "control": {
                "type": "group",
                "name": "user",
                "label": "User",
                "controls": [
                    {
                        "name": "email",
                        "label": "Email",
                        "type": "email"
                    },
                    {
                        "name": "password",
                        "label": "Password",
                        "type": "password"
                    },
                    {
                        "name": "permissions",
                        "label": "User permissions",
                        "type": "array",
                        "control": {
                            "type": "object_latest",
                            "entityType": "Permission"
                        }
                    }
                ]
            }
        }
    ]
}

Available control types¶

group¶

Describes a group of controls, will be converted into an object with keys as control names and values as user inputs from controls.

{
    "type": "group",
    "name": "custom_group",
    "label": "Custom Group",
    "controls": [
        {
            "name": "nested_control",
            "label": "Nested Control",
            "type": "text"
        },
        {
            "name": "another_nested_control",
            "label": "Another nested Control",
            "type": "text"
        }
    ]
}

text¶

Describes a simple string input control.

{
    "type": "text",
    "name": "text_control",
    "label": "Text Control"
}

textarea¶

Describes a string input control for wide text input.

{
    "type": "textarea",
    "name": "textarea_control",
    "label": "Textarea Control"
}

email¶

Input with email validation for string field.

{
    "type": "email",
    "name": "email_control",
    "label": "Email Control"
}

phone¶

Input with phone validation for string field.

{
    "type": "phone",
    "name": "phone_control",
    "label": "Phone Control"
}

password¶

Input with asterisks for string field.

{
    "type": "password",
    "name": "password_control",
    "label": "Password Control"
}

select¶

Input with options for string field.

{
    "type": "select",
    "name": "select_control",
    "label": "Select Control",
    "options": [
        {
            "value": "option1",
            "label": "Option 1"
        },
        {
            "value": "option2",
            "label": "Option 2"
        }
    ]
}

radio¶

Input with options for string field.

{
    "type": "radio",
    "name": "radio_control",
    "label": "Radio Control",
    "options": [
        {
            "value": "option1",
            "label": "Option 1"
        },
        {
            "value": "option2",
            "label": "Option 2"
        }
    ]
}

date¶

Simple date input control with date picker for string field.

{
    "type": "date",
    "name": "date_control",
    "label": "Date Control"
}

dateTriplet¶

Date input control with three input fields for day, month and year.

{
    "type": "dateTriplet",
    "name": "date_triplet_control",
    "label": "Date Triplet Control"
}

number¶

Simple number input control.

{
    "type": "number",
    "name": "number_control",
    "label": "Number Control"
}

number-slider¶

Number input control with slider for number field.

{
    "type": "number-slider",
    "name": "number_slider_control",
    "label": "Number Slider Control",
    "sliderOptions": {
        "min": 0,
        "max": 20,
        "range": false
    }
}

toggle¶

Toggle input control for boolean field.

{
    "type": "toggle",
    "name": "toggle_control",
    "label": "Toggle Control"
}

array¶

Describes an array of controls, will be converted into an array of objects with keys as control names and values as user inputs from controls. Nested control field can be described as any other control type.

{
    "type": "array",
    "name": "array_control",
    "label": "Array Control",
    "control": {
        "type": "text",
        "name": "text_control",
        "label": "Text Control"
    }
}

multiselect¶

Input with options for array field.

{
    "type": "multiselect",
    "name": "multiselect_control",
    "label": "Multiselect Control",
    "options": [
        {
            "value": "option1",
            "label": "Option 1"
        },
        {
            "value": "option2",
            "label": "Option 2"
        }
    ]
}

checkbox¶

Input with options for array field.

{
    "type": "checkbox",
    "name": "checkbox_control",
    "label": "Checkbox Control",
    "options": [
        {
            "value": "option1",
            "label": "Option 1"
        },
        {
            "value": "option2",
            "label": "Option 2"
        }
    ]
}

object_latest¶

Describes a reference to the latest object of the specified type.

{
    "type": "object_latest",
    "name": "person",
    "label": "Reference to Person",
    "entityType": "Person"
}

dict¶

Describes a dictionary of controls, will be converted into an object with keys as control names and values as user inputs from controls.

{
    "name": "number_dict_field",
    "label": "Number Dict Field",
    "type": "dict",
    "control": {
        "type": "number",
        "name": "number",
        "label": "Number Input"
    }
}

file¶

Describes a file input control for File field.

{
    "type": "file",
    "name": "file_field",
    "label": "Attachment Input"
}

dropzone¶

Describes a file input control as a dropzone for File field.

{
    "type": "dropzone",
    "name": "file_field",
    "label": "Dropzone Input"
}

Table view in AMSDAL portal¶

Frontend configs are used to display and modify single objects, but with list of objects they are not very useful. For that we use types of the fields to decide how to display them in the table view. Sometimes you want to change the way how the field is displayed in the table view, and for that you can add custom methods to the model. To change the value that is displayed, add proeprty {field}_display_name. You can also change the display method for the field. For this, add class method {field}_cell_template that should return a string.

For example, here are two methods for person field of type Person:

@property
def person_display_name(self) -> str:
    if self.person is not None:
        return self.person.full_name
    return None

@classmethod
def person_cell_template(cls) -> str:  # noqa: ARG001
    return 'StringTemplate'

Filters¶

You can also filter objects in the . By default, AMSDAL generate filters for all fields model fields based on the field type. If you want to change the filter for a specific field, you can add a custom filter. To do this, add a class method {field}_filters that returns amsdal_server.apps.common.serializers.column_response.ColumnFilter object.

Here is an example of a filter for the email field:

from amsdal_server.apps.common.serializers.column_response import ColumnFilter
from amsdal_server.apps.common.serializers.column_response import FieldFilterControl
from amsdal_server.apps.common.serializers.column_response import FieldFilter

@classmethod
def email_filters(cls) -> ColumnFilter:  # noqa: ARG001
    return ColumnFilter(
        name='email',
        label='Email',
        filters=[
            FieldFilter(
                control=FieldFilterControl(
                    key='email',
                    label='Email Equal',
                    type=FieldFilterInputType.TEXT,
                ),
                type='EQ',
            ),
            FieldFilter(
                control=FieldFilterControl(
                    key='email__neq',
                    label='Email Not Equal',
                    type=FieldFilterInputType.TEXT,
                ),
                type='NEQ',
            ),
        ],
    )