Page Comparison

...

We can add as many post submission actions as we want to one form and only those whose enabled flag evaluates to true will be processed.

Confirmation Modal

The repeating rendering type lets you replicate instances of a question. Such replicas that were created can also be deleted. When deleting a replica, a confirmation modal should pop up asking the user to confirm the action.

...

Panel

panelIconId	atlassian-warning
panelIcon	:warning:
bgColor	#FFBDAD

The implementation of the confirmation modal must be registered and implemented within the frontend module/package that has the form-engine-lib linked.

In your frontend module, you must have the implementation for the confirmation modal like such:

Code Block

language	tsx

import React from 'react';
import { useTranslation } from 'react-i18next';
import { ModalHeader, ModalBody, ModalFooter, Button } from '@carbon/react';

interface DeleteModalProps {
  onConfirm: () => void;
  onCancel: () => void;
}

const DeleteModal: React.FC<DeleteModalProps> = ({ onConfirm, onCancel }) => {
  const { t } = useTranslation();

  return (
    <React.Fragment>
      <ModalHeader
        closeModal={onCancel}
        title={t('deleteQuestionConfirmation', 'Are you sure you want to delete this question?')}
      />
      <ModalBody>
        <p>{t('deleteQuestionExplainerText', 'This action cannot be undone.')}</p>
      </ModalBody>
      <ModalFooter>
        <Button kind="secondary" onClick={onCancel}>
          {t('cancel', 'Cancel')}
        </Button>
        <Button kind="danger" onClick={onConfirm}>
          {t('deleteQuestion', 'Delete question')}
        </Button>
      </ModalFooter>
    </React.Fragment>
  );
};

export default DeleteModal;

The modal must be registered in the routes.json of your frontend module in the property modals. For example,

Code Block

language	json

"modals": [
    {
      "name": "form-engine-delete-question-confirm-modal",
      "component": "deleteQuestionModal"
    }
  ],

Update the index.ts of your module to include the export of the confirmation modal, as such:

Code Block

language	typescript

export const deleteQuestionModal = getAsyncLifecycle(
  () => import('./form-renderer/repeat/delete-question-modal.component'),
  options,
);

Finally, update the FormEngine component to pass along a prop called handleConfirmQuestionDeletion. This prop should contain a function that has been defined and implemented in the frontend module and triggers the modal using showModal:

Code Block

language	tsx

const handleConfirmQuestionDeletion = useCallback(() => {
    return new Promise<void>((resolve, reject) => {
      const dispose = showModal('form-engine-delete-question-confirm-modal', {
        onCancel() {
          dispose();
          reject();
        },
        onConfirm() {
          dispose();
          resolve();
        },
      });
    });
  }, []);
  
  render(
    <FormEngineComponent
    ....
    handleConfirmQuestionDeletion={handleConfirmQuestionDeletion}
    />
  )

Info
If a confirmation modal is not implemented, the `form-engine-lib` fallbacks to deleting without showing the user any modal, but it is recommended to follow the instructions above and implement a modal if used in a package where the end user fills in the forms. An example implemented in esm-patient-chart can be used as a reference.

Versions Compared

Old Version 5

New Version Current

Key

Confirmation Modal