Add element

We have previously created a table of element, but what if we want to display add a new element?

We first need to create a page, here add-article.tsx. It will call our new PageContainer AddArticle.tsx.

Creating the form

This PageContainer will call our AddItemComponent stored in modules/crud folder. You can use a regular form or create a multi-step form.

In this example we will show you how to set a multi-step form.

Here is the how component code looks like:

const { t } = useTranslation('actions');
const errorMessageEmptyInput = t('messages:error-message-empty-input');


<AddItemComponent
    headerComponent={
        <HeaderContent
            title={t('add2', { name: 'Article' })}
            routes={addArticleRoutes}
        />
    }
    addSteps={[
        articleFormStep1(errorMessageEmptyInput),
        articleFormStep2(errorMessageEmptyInput),
        articleFormStep3(errorMessageEmptyInput)
    ]}
    dataModel={ArticleModel}
    routeAfterSuccess={`/articlev2/:id`}
/>

You need to define some properties in order this component to run. First of all, we need to use dataModel we defined in previous steps.

Form Steps

As next step, you need to define form steps in addSteps property. This steps can be stored in seperate file under modules/Article/Forms.

In this file, we basicly define properties of form items. You can use different form item types as Number,String,Boolean,TextArea,Dropdown. This is how they look like:

import { FormDataType } from 'models/Models';

const articleFormStep1 = (errorMessageEmptyInput: string) => {
    return [
        {
            name: 'name',
            type: FormDataType.String,
            rules: [{ required: true, message: errorMessageEmptyInput }]
        },
        { name: 'additionalDescription', type: FormDataType.TextArea },
        { name: 'supplierName', type: FormDataType.String },
        {
            name: 'status',
            type: FormDataType.Number,
            rules: [{ required: true, message: errorMessageEmptyInput }]
        },
        {
            name: 'code',
            type: FormDataType.String,
            rules: [{ required: true, message: errorMessageEmptyInput }]
        },
        {
            name: 'stockOwnerId',
            type: FormDataType.String,
            rules: [{ required: true, message: errorMessageEmptyInput }]
        }
    ];
};

export { articleFormStep1, articleFormStep2, articleFormStep3 };

DropDown Field

To create dropdown field, we also need to set subOptions property. Here is the example to load status names from config and display as dropdown.

<AddItemComponent addSteps={[
    {
        name: 'stockOwnerId',
        displayName: t('d:stockOwner'),
        type: FormDataType.Dropdown,
        rules: [{ required: true, message: errorMessageEmptyInput }],
        subOptions: statusTexts
    }
]} />

const [statusTexts, setStatusTexts] = useState<Array<FormOptionType>>();

const typeTextList = useListConfigsForAScopeQuery(
    graphqlRequestClient,
    {
        scope: 'pattern_status'
    }
);
useEffect(()=> {
    if (typeTextList) {
        const newStatusTexts: Array<FormOptionType> = [];

        const cData = typeTextList?.data?.listConfigsForAScope;
        if(cData) {
            cData.forEach((item) => {                    
                newStatusTexts.push({ key: parseInt(item.code), text: item.text });
            });
            setStatusTexts(newStatusTexts);
        }
    }
}, [typeTextList.data]);

Other Properties

• We also need to define headerComponent to visualize on top of page and the routeAfterSuccess to redirect after successful creation of item. While defining this path you can use :id to let component replace it with new items id.

• There is also optional extraData property which can be used for adding additional hidden fields to post to backend.

<AddItemComponent extraData={{order:1}} />