Melies/FormCRUD: save on change

Client
1

Hi there!
I am currently working with melies models and the default FormCRUD component from the bap-client and i was wondering if there is an existing pattern for save the model on changing (or blurring) an input element (instead of on submitting).

Best Regards,
Alex (<PROJECT_NAME> team)

2

HI Alex,

Tthere is a prop called “onValueChanged” which is always called when a value in the form engine is changed, which you can use for this task.
So you could do something like this:

<CRUDViews.FormEngine
	{...props}
	onValueChanged={() => {
                // Dispatch the save action
		store.dispatch(ActivityActions.save.started({activityId: activityIdWhichShouldBeSaved}));
	}}
/>

I hope this helps you.
Maria

3

That helps a lot, thank you! (Btw, it is “ActivityActions.commit.started…”)

Is there a similar easy way to prevent the view from closing after save. Because now it is gone after each value change…

4

Which version are you working on? Because with 2.1.0 we introduced the action “ActivityActions.save.started”, and this one does not close the form after saving.

5

I see, i am currently on version 2.0.1.

But that is a good reason to migrate, thanks again.

6

Hi Alex. Please use the [Engine integration components]<INTERNAL_LINK>.

The [CRUD components]<INTERNAL_LINK> are only meant for zero-coding use cases. Otherwise, your code might break later when we make changes to CRUD.

7

I don’t quite understand. As @mschmidt_inactive pointed to, i am now using a wrapper component surrounding CRUDViews.FormEngine and not FormCRUD. Isn’t this, what i am supposed to do?

8

@alexander-pure-wind, you can use your wrapper around CRUDViews.FormEngine, but we don’t recommend doing it. The CRUDViews.FormEngine is actually a wrapper around the ViewViews.FormEngine component with some additional code to show that we can do CRUD operations with documents in the BAP client.

For doing prototypes or just playing around with the form or overview engine component it is fine to use the CRUDViews components. For code which might get shipped in production, I would better use the ViewViews.FormEngine.

If you have problems integrating the ViewViews.FormEngine in your wrapper code, just contact me or the TPS team.

9

Thanks, @jbrockmeyer_inactive . I had a discussion with @baschir-loud-bluff who could already solve my confusion, and showed me the solution (exactly like yours): Use ViewViews.FormEngine instead of CRUDViews.FormEngine and handle all events by myself.

I will post my final SaveOnChangeForm as soon as it is finished.

10

Conclusion: I am using the onValueChanged prop of the FormEngine to dispatch the save action (new feature in version 2.1.0). The mentioned FormEngine is imported from ViewViews (@com.mgmtp.a12/bap-client/lib/core/view), not from CRUDViews which are considered as prototyping feature and not stable regarding upcoming versions of the bap-client.

The AutoSavingForm is currently looking like this:

interface DispatchProps {
	dispatchCancel(): void;
	dispatchSave(): void;
}

/**
 * This is a wrapper component for the FormEngine. It will automatically dispatch a save action, when the user changes
 * an input value.
 * There is a default delay of 3 seconds after the last change, to prevent too many save requests and state changes.
 * On leaving the form (on a custom event "event_close") it will save immediatly, if the 3 seconds didn't pass yet.
 */
class AutoSavingFormComp extends React.Component<FormEngineProps & DispatchProps, {}> {
	private pendingSaveTimeoutId: number | undefined;
	private saveDelay = 3000;

	render() {
		const onValueChanged = () => {
			if (this.pendingSaveTimeoutId) {
				window.clearTimeout(this.pendingSaveTimeoutId);
			}
			this.pendingSaveTimeoutId = window.setTimeout(() => {
				this.props.dispatchSave();
				this.pendingSaveTimeoutId = undefined;
			}, this.saveDelay);
		};
		const onEvent = (eventName: string) => {
			switch (eventName) {
				case "event_close":
					if (this.pendingSaveTimeoutId) {
						window.clearTimeout(this.pendingSaveTimeoutId);
						this.props.dispatchSave();
						this.pendingSaveTimeoutId = undefined;
					}
					this.props.dispatchCancel();
					return;
				default:
					return;
			}
		};
		return <ViewViews.FormEngine {...this.props} {...{ onValueChanged, onEvent }} />;
	}
}

export const AutoSavingForm = connect<{}, DispatchProps, FormEngineProps, ApplicationState>(
	null,
	(dispatch, props) => ({
		dispatchCancel: () => {
			dispatch(ActivityActions.cancelRequested({ activityIds: [props.activity.id] }));
		},
		dispatchSave: () => {
			dispatch(ActivityActions.save.started({ activityId: props.activity.id }));
		}
	})
)(AutoSavingFormComp);