Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

It is impossible to override question error rendering for a particular survey #8189

Closed
andrewtelnov opened this issue Apr 25, 2024 · 2 comments
Assignees
Labels
enhancement user issue An issue or bug reported by users
Milestone

Comments

@andrewtelnov
Copy link
Member

The question was asked in SurveyJS support forum: Customize Error message in preview screen of survey creator.

@andrewtelnov andrewtelnov added enhancement user issue An issue or bug reported by users labels Apr 25, 2024
@tsv2013 tsv2013 self-assigned this Apr 26, 2024
@tsv2013
Copy link
Member

tsv2013 commented Apr 26, 2024

We decided to implement an ability to override question error component rendering

@tsv2013 tsv2013 transferred this issue from surveyjs/survey-creator Apr 26, 2024
@tsv2013 tsv2013 changed the title It is impossible to override the survey rendering in the Survey Preview It is impossible to override question error rendering in the Survey Preview Apr 26, 2024
@tsv2013 tsv2013 changed the title It is impossible to override question error rendering in the Survey Preview It is impossible to override question error rendering Apr 26, 2024
@andrewtelnov andrewtelnov changed the title It is impossible to override question error rendering It is impossible to override question error rendering for a particular survey Apr 26, 2024
tsv2013 pushed a commit that referenced this issue Apr 26, 2024
tsv2013 pushed a commit that referenced this issue Apr 26, 2024
…g for a particular survey - try to fix f-tests
tsv2013 pushed a commit that referenced this issue Apr 26, 2024
…g for a particular survey - passed context element
tsv2013 added a commit that referenced this issue Apr 27, 2024
…particular survey (#8191)

* Implemented #8189 - Allow to override question error rendering for a particular survey

* Work for #8189 - It is impossible to override question error rendering for a particular survey - try to fix f-tests

* Fixed Vue lint

* Work for #8189 - It is impossible to override question error rendering for a particular survey - passed context element

---------

Co-authored-by: tsv2013 <tsv2013@noreply.github.com>
@tsv2013
Copy link
Member

tsv2013 commented Apr 27, 2024

I've implemented functionality allowing to override question error rendering for any survey.

In order to do it it survey creator preview you need to use the declare custom component for error visualization:

class CustomQuestionError extends React.Component {
  render() {
    const owner = this.props.error.errorOwner;
    const question = !!owner && owner.isQuestion ? owner : undefined;
    const clickMeFunc = () => alert(!!question && !question.isEmpty() ? question.value : "No value");
    return (
      <div>
        <div>A custom text</div>
        <span className={this.props.cssClasses.error.icon || undefined} aria-hidden="true" />
        <span className={this.props.cssClasses.error.item || undefined}>
          <SurveyReact.SurveyLocStringViewer locStr={this.props.error.locText} />
        </span>
        <button onClick={clickMeFunc}>Click Me...</button>
      </div>
    );
  }
}

SurveyReact.ReactElementFactory.Instance.registerElement(
  "my-preview-error",
  (props) => {
    return React.createElement(CustomQuestionError, props);
  }
);

and set the questionErrorComponent property for survey used in preview tab:

creator.onSurveyInstanceCreated.add((sender, options) => {
  if (options.reason = "preview") {
    options.survey.questionErrorComponent = "my-preview-error";
  }
});

@tsv2013 tsv2013 closed this as completed Apr 27, 2024
@OlgaLarina OlgaLarina added this to the v1.10.2 milestone May 2, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement user issue An issue or bug reported by users
Projects
None yet
Development

No branches or pull requests

3 participants