SpringBot Data table tile customisation of post creation

Model

For this article we will be using our LMS entity model from our Learning Management System (LMS) - Example project as our example. Specifically our Course entity.

The current behaviour redirects the users back to the Data table as shown below upon successful persistence.

Task

In this article we will be stepping through the process of adding custom actions on the successful creation of an entity instance in the Data table.

ArticleTileCrudComponent - onCreateOrSaveClicked

The first method that we will explore is the onCreateOrSaveClicked found within clientside/src/app/components/crud/course/edit/course-crud-edit.component.ts.

This method is triggered when the save button is clicked within the create/update view of the Data table tile and manages the persistence of the data.

Within this method, there are a couple of important elements.

TargetModel

The target model contains all the data for the model that is being saved/updated.

This is accessible through the use of this.targetModel which utilises the Ngrx libraries.

This method controls both the creation and update actions and these are treated differently based on the condition event.isCreate.

The state is first set with the target model data. We can modify out state before persisting in the protected region here called Add any additional onCreateOrSaveClicked logic before the main body here.

let stateConfig: PassableStateConfig<CourseModel> = {
    targetModel: this.targetModel,
    collectionId: this.collectionId
};

Before the event is then triggered the after action list is set, this list of actions includes a redirect to the Data table list page.

let afterwardActions: NgRxAction[] = [
    new routingAction.NavigateRoutingAction(['admin', 'entities', 'course'])
];

To override this default action turn on the protected region called Add any additional logic before creating a new model here and place your new actions in here.

For example, to route back to the home page after save I would add the following:

// % protected region % [Add any additional logic before creating a new model here] on begin
afterwardActions = [
    new routingAction.NavigateRoutingAction(['academy-home'])
];
// % protected region % [Add any additional logic before creating a new model here] end

To update so that the user is redirected to the homepage after editing a course entity, locate the protected region Add any additional logic before update the current model here and paste the following:

// % protected region % [Add any additional logic before update the current model here] off begin
afterwardActions = [
    new routingAction.NavigateRoutingAction(['academy-home']),
];
// % protected region % [Add any additional logic before update the current model here] end

Now, after all actions have been defined, the CreateCourseModel action is dispatched.

this.store.dispatch(new modelAction.CourseAction(
    modelAction.CourseModelActionTypes.CREATE_COURSE, stateConfig,
    // % protected region % [Add any additional constructor arguments for   CreateModel here] off begin
    // % protected region % [Add any additional constructor arguments for   CreateModel here] end,
    afterwardActions
));

Once you create or edit a course entity, you will automatically be redirected back to the academy-home like below

Solution

Have a look at the custom-post-creation branch to see the solution code.