Create a details page

The fastest way to create a new details page in a feature module is to use the OneCX generator. Some projects have their own generator based on the OneCX generator. It should be clarified before starting if this is the case for the project the app is generated for.

To run the generator, execute the following command:

nx generate <namespaceOfTheGenerator>/nx-plugin:details <nameOfTheFeature> [--standalone]

  • <namespaceOfTheGenerator>: For the OneCX generator, use @onecx. For a project specific generator, ask for the namespace of the generators.

  • <nameOfTheFeature>: The name the feature the details page should be created in e.g., theme.

Next, the CLI will ask you whether you want to customize names for the generation. When answering yes, the next few questions will ask you about names for the API. This can be useful if you want to adapt to a legacy API. When modifying names, assure that you use the same custom names for all generated components of the feature (search, details, create-update, delete) for the data object name, and the api service name as these ones are shared.

Options:

  • --standalone: if you want to develop an application that does not depend on onecx-services.

  • --editMode: if you want to generate an edit mode, see

  • --allowDelete: if you want to generate a delete button in the page header

Edit Mode

When running the generator you can decide whether to have an editMode generated. The editMode consists of a new action in the details page header: "Edit". Once clicked the page will go into editMode, enabling a form (default content) and showing two buttons instead of "Edit": "Cancel" and "Save". If the form is dirty, cancel will ask for approval before resetting. Save will submit a request to the generated Update Endpoint with the form values as request content, adapt where necessary. It will handle errors and success (switch editMode accordingly).

Allow Delete

If you decide to allow delete, a new delete action will be added to the details page. Once clicked it will ask for confirmation and then beform a delete request on approval. If successfull it will redirect to the parent / search page, else show an error and stay.

After running the generator, the following actions must be taken:

  1. Add core data to details page header

  2. Extend form fields (for Edit Mode)

  3. Commit the changes