Skip to main content

Edit element

For creating Edit pages of elements, we can use EditItemComponent which has all the required features. First of all, we need to set dataModel which is the Article model we defined in "Defining Data Model" section. After that you can define id proprety which will use the id of item we want to update. In general we fetch it from route:

const { id } = router.query;
<EditItemComponent
    id={id!}
    dataModel={ArticleModel}
    headerComponent={
        <HeaderContent
            title={`${t('common:article')} ${id!}`}
            routes={breadsCrumb}
            onBack={() => router.back()}
        />
    }
    editSteps={[
        articleFormStep1(errorMessageEmptyInput),
        articleFormStep2(errorMessageEmptyInput),
        articleFormStep3(errorMessageEmptyInput)
    ]}
    routeAfterSuccess={`/articlev2/:id`}
/>

Form Steps​

As next step, you need to define form steps in editSteps property. This steps can be stored in seperate file under modules/Article/Forms. These are same with addSteps in create element component and you can check "Add Element" page for detailed explanation.

Other Properties​

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