SurveyJS React

3 min read react, javascript
  • arch recommender based on cloud foundation principles - inline and link to them
  • “cloud foundation principles” shows first with “get started” button
  • top level categories
    • SaaS, compute, storage (file, db), COTS, integation, real-time (streaming), ML/AI, static employee facing site -> company cdn+waf solution link, pcf link (static build pack)
    • for each recommendation, show which principles it is tied to and give it a score
  • recommender builder similar to aws pricing calculator. comprehensive recommendations for your entire solution across compte, storage, integration, etc. e.g. add compute recommendation to plan, add storage recommendation to plan, …
  • do you have secrets like api keys, crdentials, tokens, etc. that your code needs to access -> secrets manager
  • is business classification >= business critical (ha/dr) multi-az / multi-region
  • is GxP ->
  • service icon next to each service recommendation
  • have an example use case and show a recommendation
  • for each recommended service have a link to the service pricing page and aws pricing calculator
  • need help / have question about a service. search / post in CoP
  • don’t have an account yet / get started / request an account link when complete
  • IaC - tf/cfn always in recommendation
    • link to tf modules repo
  • metrics / alarming - always in recommendations
  • step fns / eb - always in recommendations
  • host on static cloud site. make generic / not tied to company version on brianpfeil.com (hugo)

React quickstart boilerplate for SurveyJS: Survey Library and Survey Creator

This project was bootstrapped with Create React App .

How to run this sample application

You can find the detailed information on how to perform common tasks in this guide .

Add survey component on your page

//In your react App.js or yourComponent.js file add these lines to import
import * as Survey from "survey-react";
import "survey-react/survey.css";

class App extends Component {
 //Define Survey JSON
 //Here is the simplest Survey with one text question
 json = {
  elements: [
   { type: "text", name: "customerName", title: "What is your name?", isRequired: true}
  ]
 };

 //Define a callback methods on survey complete
 onComplete(survey, options) {
  //Write survey results into database
  console.log("Survey results: " + JSON.stringify(survey.data));
 }
 render() {
  //Create the model and pass it into react Survey component
  //You may create survey model outside the render function and use it in your App or component
  //The most model properties are reactive, on their change the component will change UI when needed.
  var model = new Survey.Model(this.json);
  return (<Survey.Survey model={model} onComplete={this.onComplete}/>);
  /*
  //The alternative way. react Survey component will create survey model internally
  return (<Survey.Survey json={this.json} onComplete={this.onComplete}/>);
  */
  //You may pass model properties directly into component or set it into model
  // <Survey.Survey model={model} mode="display"/>
  //or 
  // model.mode="display"
  // <Survey.Survey model={model}/>
  // You may change model properties outside render function. 
  //If needed react Survey Component will change its behavior and change UI.
 }
}