Customize FormEngine

Engines Form Engine
,
1

Hello,

Our application was created using App-Factory 2025.06-ext1.
I would like to define a customWidgetMap for the FormEngine.
CRUDViews.FormEngine is overridden with FormEngineViews.FormEngine in viewProvider.tsx

function createEnginesViewMap(): ViewMap {
    return {
        TreeEngine(props) {
            return <TreeEngineFactories.ViewComponent {...props} />;
        },
        FormEngine(props) {
            return <FormEngineViews.FormEngine {...props} />;
        },
        OverviewEngine(props) {
            return <CRUDViews.OverviewEngineView {...props} timeMode="24h" />;
        }
    };
}

In addition,
createFormEngineMiddlewares, formEngineSagas, and formEngineDataReducers
were defined in the appSetup.
I get the following error:

Error: Not a valid Data EngineState Slice

Stacktrace



ConnectFunction@webpack-internal:///./node_modules/react-redux/es/components/connectAdvanced.js:234:68

FormEngine@unknown:0:0

div@unknown:0:0

BaseProgressIndicator@webpack-internal:///./node_modules/@com.mgmtp.a12.client/client-core/lib/core/view/internal/components/progress-indicator.js:15:72

ProgressIndicator@webpack-internal:///./node_modules/@com.mgmtp.a12.client/client-core/lib/core/frame/internal/components/DefaultProgressComponentProvider.js:15:159

ErrorBoundary@webpack-internal:///./node_modules/@com.mgmtp.a12.client/client-core/lib/core/frame/internal/components/error-boundary/ErrorBoundary.js:12:1

div@unknown:0:0

O@webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:32:23175

div@unknown:0:0

O@webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:32:23175

ResizeHandler@webpack-internal:///./node_modules/@com.mgmtp.a12.widgets/widgets-core/lib/layout/resizable/resize-handler.view.js:48:23

LayoutPane@webpack-internal:///./node_modules/@com.mgmtp.a12.widgets/widgets-core/lib/layout/master-detail/main/master-detail.internal.js:42:66

Transition@webpack-internal:///./node_modules/react-transition-group/esm/Transition.js:133:30

CSSTransition@webpack-internal:///./node_modules/react-transition-group/esm/CSSTransition.js:120:35

div@unknown:0:0

TransitionGroup@webpack-internal:///./node_modules/react-transition-group/esm/TransitionGroup.js:57:30

StyledMasterDetailLayoutBody<@webpack-internal:///./node_modules/@com.mgmtp.a12.widgets/widgets-core/lib/layout/master-detail/main/master-detail.styled.js:185:96

O@webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:32:23175

Body@webpack-internal:///./node_modules/@com.mgmtp.a12.widgets/widgets-core/lib/layout/master-detail/main/master-detail.internal.js:109:115

TransitionProvider@webpack-internal:///./node_modules/@com.mgmtp.a12.widgets/widgets-core/lib/layout/master-detail/main/master-detail.context.js:20:28

div@unknown:0:0

O@webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:32:23175

MasterDetailTemplate@webpack-internal:///./node_modules/@com.mgmtp.a12.widgets/widgets-core/lib/layout/master-detail/main/master-detail.view.js:26:155

MasterDetail@webpack-internal:///./node_modules/@com.mgmtp.a12.widgets/widgets-core/lib/layout/master-detail/main/master-detail.view.js:29:22

MasterDetailRegionLayout@webpack-internal:///./node_modules/@com.mgmtp.a12.client/client-core/lib/core/frame/internal/layout/MasterDetailRegionLayout.js:25:74

DefaultRegionUi@webpack-internal:///./node_modules/@com.mgmtp.a12.client/client-core/lib/core/frame/internal/layout/DefaultRegionUi.js:13:142

ContentWrapper@webpack-internal:///./node_modules/@com.mgmtp.a12.client/client-core/lib/core/frame/internal/layout/ApplicationFrameLayout.js:411:47

div@unknown:0:0

O@webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:32:23175

div@unknown:0:0

O@webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:32:23175

div@unknown:0:0

O@webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:32:23175

ApplicationFrame@webpack-internal:///./node_modules/@com.mgmtp.a12.widgets/widgets-core/lib/layout/application-frame/main/application-frame.view.js:36:243

PageTemplate@webpack-internal:///./node_modules/@com.mgmtp.a12.client/client-core/lib/core/frame/internal/layout/ApplicationFrameLayout.js:311:27

SidebarContextMemoWrapper@webpack-internal:///./node_modules/@com.mgmtp.a12.client/client-core/lib/core/frame/internal/layout/ApplicationFrameLayout.js:347:16

ApplicationFrameLayoutComponent@webpack-internal:///./node_modules/@com.mgmtp.a12.client/client-core/lib/core/frame/internal/layout/ApplicationFrameLayout.js:121:9

ApplicationFrameLayoutWithContext@unknown:0:0

ConnectFunction@webpack-internal:///./node_modules/react-redux/es/components/connectAdvanced.js:234:68

CustomApplicationFrameLayout@webpack-internal:///./src/app/layoutProvider.tsx:33:55

DefaultRegionUi@webpack-internal:///./node_modules/@com.mgmtp.a12.client/client-core/lib/core/frame/internal/layout/DefaultRegionUi.js:13:142

AuthenticatedPage@webpack-internal:///./src/app/page/AuthenticatedPage.tsx:46:42

NotificationFrame@webpack-internal:///./node_modules/@com.mgmtp.a12.notificationcenter/notificationcenter-core/lib/internal/components/NotificationFrame/NotificationFrame.js:39:43

div@unknown:0:0

BaseProgressIndicator@webpack-internal:///./node_modules/@com.mgmtp.a12.client/client-core/lib/core/view/internal/components/progress-indicator.js:15:72

DefaultVetoDialog@webpack-internal:///./node_modules/@com.mgmtp.a12.client/client-core/lib/extensions/dirtyHandling/internal/components/VetoDialog.js:31:78

div@unknown:0:0

NotificationFrame@webpack-internal:///./node_modules/@com.mgmtp.a12.client/client-core/lib/core/notification/internal/components/notification-frame.js:26:78

DndProvider@webpack-internal:///./node_modules/react-dnd/dist/core/DndProvider.js:43:25

BasePage@webpack-internal:///./src/app/page/index.tsx:68:62

ot@webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:32:19964

Ye@webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:32:15718

StyledPage@unknown:0:0

Provider@webpack-internal:///./node_modules/react-redux/es/components/Provider.js:19:15

How can I achieve this customization?

3

Hi @jozsef-sharp-packet,

I was not able to reproduce this in a basic A12 Project Template setup for 2025.06-ext2.

But the error states some issues with data slice of form engine i guess something went wrong in form engine state creation.

Error: Not a valid Data EngineState Slice

Having a check on the code location this error is thrown tells me that the data state is not correct:

// @com.mgmtp.a12.formengine/formengine-core/src/back-end/store/internal/selectors/engineState.ts:115
export function isDataState(value: unknown): value is EngineStore.DataState {
	return isRecord(value) && isRecord(value.document);
}

When this state is not correct something is wrong in creation by the used...EngineStateAdapter. Please check the kind of models you try to display in here for CDM the handling is slightly different and a other kind of adapter (cddActivityStateAdapter) provided by relationship engine package has to be used.

Have a look into this related older discourse answer:

Also have a look into CRUDViews.FormEngineView from crud package for some implementation details.

Furhter readings:

5

Hello @jozsef-sharp-packet, I am a member of the Discourse team. I can see that there was a new response to your question on Customize FormEngine. Do you find it helpful, or should the question remain open?

Thanks ahead for your feedback and have a nice rest of the day!

6

Hello @hang-tinted-forest , yes I found it good. We can close it.

Thanks

Regards

Jozsef