Is it possible to display a react component in a custom tab?

Nadav Gur-Arieh

created 5 years ago

The only custom tab you show on your site inserts html to the tab via a "text/html" type script
Creating custom tab:

JavaScript
this.surveyCreator.tabs().push({
  name: "custom-options",
  title: "Custom Options",
  template: "custom-tab-survey-templates",
  action: () => {
    this.surveyCreator.makeNewViewActive("custom-options");
  },
  data: {},
});

Injecting html

HTML
render() {
    return 
    <div>
      <script type="text/html" id="custom-tab-survey-templates">
        {`<div>TEST</div>`}
      </script>

      <div id="surveyCreatorContainer" />
    </div>
  }

I'd like to add something more complex to the custom tab. but that doesn't seam possible. I've tried changing the script tag to div, but that has the unfortunate side effect of rendering the div both above the "surveyCreatorContainer" and inside the custom tab.

Answers

Serge T

created 5 years ago

Hello,

Very weird. It wasn't supposed to work this way.
SurveyJS Creator is using KnockoutJS and custom tab is a knockoutjs template.
Probably there are existing some ways to make ReactJS components to work inside KO template but I think it willn't be reliable enough.

Thanks, Serge
SurveyJS Team

Comments (1)

Nadav Gur-Arieh 5 years ago

If that's the case I hope you are working to improve the survey creator so it can work better in React. It doesn't seem like a huge stretch to be able to make it work in a similar fashion to how surveyjs works in react:

JavaScript
constructor(props) {
        super(props)
        this.state = {

            window: {
                survey: new Survey.Model(this.props.survey) // Here we expect the Object for the survey.
            },
        }
        //add localization 



    }

HTML
<Survey.Survey
    model={this.state.window.survey}
    showCompletedPage={false}
    showNavigationButtons={"none"}
    onComplete={this.endFunc}
    onCurrentPageChanged={this.changePage}
    onAfterRenderSurvey={this.update}
    onAfterRenderPage={this.startCapture}
    onStarted={this.started}
    // onUpdatePageCssClasses={this.applyRtl}
    css={myCss}
/>

It works so nicely, I wish I could just plop down a Survey Creator component in my render instead of the way shown in the React boilerplate.

Ah well, here's hopping I'll be able to do what I need in the custom tab

Nadav Gur-Arieh

created 5 years ago

So I was able to change the script tag into a div, and give it the "hidden" property to prevent it from being displayed above the creator, but still visible in the custom tab!

HTML
<div  id="custom-tab-survey-templates" hidden>
  <LoadingSpinner/>
</div>

Is it possible to display a react component in a custom tab?

Answers

Recently viewed tickets