Adding custom label for field and help text for field (#119)

Author: dashspcedash

examples/fastapi_sqlalchemy/example.py

@@ -20,7 +20,12 @@ class UserModelAdmin(SqlAlchemyModelAdmin):
     list_filter = ("id", "username", "is_superuser")
     search_fields = ("username",)
     formfield_overrides = {  # noqa: RUF012
-        "username": (WidgetType.SlugInput, {"required": True}),
+        "username": (WidgetType.SlugInput, {"required": True,
+                                            # Changing the field label to a custom option
+                                            # "label": "Custom label",
+                                            # Adding a small text below the field to better understand the purpose of the field
+                                            # "help": "Detailed description of the field"
+                                            }),
         "password": (WidgetType.PasswordInput, {"passwordModalForm": True}),
         "avatar_url": (
             WidgetType.Upload,
@@ -130,7 +135,6 @@ async def lifespan(app: FastAPI) -> AsyncGenerator[None, None]:
 
 app = FastAPI(lifespan=lifespan)
 
-
 app.mount("/admin", admin_app)
 
 app.add_middleware(

frontend/src/components/form-container/index.tsx

@@ -1,4 +1,4 @@
-import { Col, Collapse, Divider, Form, Row } from "antd";
+import {Col, Collapse, Divider, Form, Row, Typography} from "antd";
 import type React from "react";
 import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -102,7 +102,10 @@ export const FormContainer: React.FC<IFormContainer> = ({
         <Form.Item
           key={field.name}
           name={field.name}
-          label={getTitleFromFieldName(field.name)}
+          label={
+            getConf(field).form_widget_props?.label 
+            ? getConf(field)?.form_widget_props?.label 
+            : getTitleFromFieldName(field.name)}
           rules={
             [
               ...(getConf(field).required
@@ -167,6 +170,11 @@ export const FormContainer: React.FC<IFormContainer> = ({
           }
         >
           {getWidget(getConf(field))}
+          {getConf(field).form_widget_props?.help && 
+            <Typography.Text type={"secondary"} style={{marginTop: ".35rem", display: "flex"}}>
+              {getConf(field).form_widget_props?.help}
+            </Typography.Text>
+          }
         </Form.Item>
       ));
     },