Page Comparison

...

As mentioned Placeholder does not matter much, and it should work with any value picked by the user. Although it is recommended to stay with “auto” for debugging purposes. If isAutogenerateEnabled setting is on, frontend will replace code value with placeholder and send True as value of autogenerate.
Additionally code field is set to read-only and “auto” is set as a code of a claim.

Apart from that, it is possible to display this autogenerated code instantly after form saving. The entire process will be illustrated using the claim entity as an example.

First and foremost, we need to change the "save" function to be asynchronous.

Code Block

  // EditPage.js
  
  save = async (claim) => {
    if (!claim.uuid) {
      this.props.createClaim(
        this.props.modulesManager,
        claim,
        formatMessageWithValues(this.props.intl, "claim", "CreateClaim.mutationLabel", {
          code: this.autoGenerateClaimCode ? "Auto" : claim.code,
        }),
      );
    } else {
      this.props.updateClaim(
        this.props.modulesManager,
        claim,
        formatMessageWithValues(this.props.intl, "claim", "UpdateClaim.mutationLabel", { code: claim.code }),
      );
    }
  };

After saving the entity, we must retrieve the generated code. This can be achieved using a mutation and mutationClientId, which will allow us to fetch the automatically generated code and replace it in the form. As a result, after saving, the field will be updated.

Code Block

  // ClaimForm.js
  
  _save = (claim) => {
    this.setState({ lockNew: true }, () => {
      this.props
        .save(claim)
        .then(() => {
          // It's crucial to perform this action selectively, based on specific conditions.
          // Here, it should only occur if the autoGenerateClaimCode global setting is enabled.
          if (this.autoGenerateClaimCode) {
            const {
              mutation: { clientMutationId },
              fetchMutation,
            } = this.props;

            if (clientMutationId) {
              fetchMutation(clientMutationId)
                .then((response) => {
                  const { autogeneratedCode } = parseData(response.payload.data.mutationLogs)[0];

                  this.setState((prevState) => ({
                    claim: { ...prevState.claim, code: autogeneratedCode },
                  }));
                })
                .catch((error) => {
                  console.error("[ERROR]: Error while fetching autogenerated code.", error);
                });
            }
          }
        })
        .catch((error) => {
          console.error("[ERROR]: Failed to save claim", error);
        });
    });
  };

The final step will be disabling the code validation, which can be done by using shouldValidate util function.

Code Block

  shouldValidate = (inputValue) => {
    // If autoGenerateClaimCode global setting enabled, do not validate the input.
    if (this.autoGenerateClaimCode) return false;

    const { savedClaimCode } = this.props;
    const shouldValidate = inputValue !== savedClaimCode;
    return shouldValidate;
  };

Versions Compared

Old Version 1

New Version Current

Key