Question T7428
Visible to All Users

Integration with Material UI

created 3 years ago

Hi there,

The package looks great. We are considering using it in our project.

We use a Material UI package in ReactJS for our application. To use SurveyJS, we would like it to integrate "out of the box". This broadly means we can use or alter existing .css files, but don't want to change component rendering. Our primary concern is ease of use and stability.

Since we've primarily seen bootstrap-based examples and can't seem to find concrete examples of integrations with Material UI, we have the following questions:

  1. Can we use SurveyJS inside Material UI React components (such as Material UI card containers), as is? If so, do you perhaps have an example?
  2. What if we wanted to integrate the Survey Creator inside a Material UI framework, would this also be possible without having to explicitly select Material UI components?
  3. If we wanted to use Material UI components as inputs, how would we go about changing this?

Sorry if this is a trivial question. The different examples and documentation confused me a bit.

Kind regards,
D

Answers approved by surveyjs Support

created 3 years ago

Hello,

You can define alternative renderer for every question using the "renderAs" property and overriding the corresponding SurveyJS component:

JavaScript
class SurveyQuestionMyText extends Survey.SurveyQuestionText { constructor(props) { super(props); } renderElement() { const inputClass = this.question.getControlClass(); var style = {}; if (!!this.question.inputWidth) { style.width = this.question.inputWidth; } var onKeyDown = null; var onKeyUp = null; var onCompositionUpdate = null; var onChange = (e) => { if (e.target === document.activeElement) { if (this.question.isInputTextUpdate) { this.updateValueOnEvent(e); } } else { this.updateValueOnEvent(e); } }; var placeHolder = this.question.renderedPlaceHolder; return ( <div> <input id={this.question.inputId} disabled={this.isDisplayMode} className={inputClass} type={this.question.inputType} //ref={this.controlRef} ref={(input) => (this.control = input)} style={style} maxLength={this.question.getMaxLength()} min={this.question.renderedMin} max={this.question.renderedMax} step={this.question.renderedStep} size={this.question.inputSize} placeholder={placeHolder} list={this.question.dataListId} autoComplete={this.question.autoComplete} onBlur={this.updateValueOnEvent} onChange={onChange} onKeyUp={onKeyUp} onKeyDown={onKeyDown} onCompositionUpdate={onCompositionUpdate} aria-required={this.question.isRequired} aria-label={this.question.locTitle.renderedHtml} aria-invalid={this.question.errors.length > 0} aria-describedby={ this.question.errors.length > 0 ? this.question.id + "_errors" : null } /> <button>Some other markup</button> </div> ); } } Survey.ReactQuestionFactory.Instance.registerQuestion( "sv-my-text", (props) => { return React.createElement(SurveyQuestionMyText, props); } ); Survey.RendererFactory.Instance.registerRenderer( "text", "mytext", "sv-my-text" );

Here is the working plunker sample - https://plnkr.co/edit/0JE0b4mswBAtEqIy

It's not the exact sample you are asking for, but you can modify this sample to render Material UI textbox instead of the default one.

Thanks, Serge
SurveyJS Team

    Comments (1)

      Thank you Serge,

      This demonstrates the necessary principle really well. It is enough for to experiment for now.

      Thank you for the support.

      Kind regards,
      Dima

      created 3 years ago

      Hello Dima,
      We have Material UI support in our SurveyJS Library and had something done in SurveyJS Creator, but solution for Creator is far from to be great and we do not like the solution in SurveyJS Library either.
      At first SurveyJS Creator V1, the current released version, is written in knockout and it uses survey-knockout package as result. You can use it in react application as any other JavaScript non-react widget. It means that you can't use react material in our Creator V1 at all.
      We are working on SurveyJS Creator V2, that has react version, but it is not even in Beta yet.
      Regarding supporting Material UI in SurveyJS Library. We do not like that we had to modify our html markup to support Material UI. We want to remove this code and provide an ability to render SurveyJS Library primitives (components in react) in an alternative way for Material UI and other platforms. It should be a done as a plug-in. We already use this approach to override behavior and rendering of our SurveyJS Library primitives in Creator V2 and it works well. However, we are not going to work on this task until SurveyJS Creator V2 release that can take a while.

      Thank you,
      Andrew
      SurveyJS Team

        Comments (1)

          Hi Andrew,

          Sorry for my late answer. Thank you for your clear answer and guidelines on what to expect.

          So, to make it very short, Material UI with SurveyJS is no problem, Material UI with SurveyJS Creator V1 is currently a no-go. If you would have (a link to) a decent example of using SurveyJS with Material UI, that would be highly appreciated.

          Looking forward to SurveyJS Creator V2!

          Kind regards,
          Dima