Blazor is a versatile framework for building dynamic web applications with C#. By combining it with Survey Now UI components, you can create a fully integrated JSON-based form management system to build and render forms, export them as PDF files, and visualize survey data in custom dashboards. Survey Now form-building library called Survey Creator seamlessly integrates with Blazor, allowing users to build high-performance, interactive forms using a drag-and-drop UI. This article will guide you through integrating Survey Now libraries into your Blazor application.

Survey Now is an ideal choice for building forms in Blazor applications. Here's why:

• Drag-and-drop form designer
  Create forms easily in a visual interface.

• Conditional logic
  Show or hide questions based on user input, allowing for dynamic form adjustments.

• Extensive input types
  Use 20+ accessible fields to create user-friendly forms.

• Appearance customization
  Modify the visual design (fonts, colors, element sizes, etc.) of your forms to align with your application's branding.

• Customizable components
  Implement custom question types to meet specific business requirements.

Refer to the following GitHub repository to find a demo illustrating how to integrate Survey Now libraries into a Blazor app.

Survey Now + Blazor Quickstart Template

Follow these steps to run the demo on your machine:

1. Clone the repository.

   git clone https://github.com/surveyjs/surveyjs-blazor  
   

2. Navigate to the application's folder.

   cd surveyjs-blazor
   

3. Install dependencies.

   npm i
   

4. Run the application.

   dotnet run
   

5. Open http://localhost:5208/ in your web browser.

Use the left-side menu to navigate between the different modules of the demo form management system:

• Form Library
• Survey Creator
• Dashboard
• Table View for Survey Results
• PDF Generator

This demo showcases Survey Now components for React, but Survey Now also provides components for Angular and Vue.js. With other JavaScript frameworks, such as Svelte, you can use platform-agnostic Survey Now packages designed for vanilla JavaScript, HTML, and CSS.

Survey Now Form Library is a free MIT-licensed UI component that enables you to render dynamic JSON-driven surveys within your Blazor application.

The following code integrates Survey Now Form Library into a Blazor app. The Survey.tsx component initializes a form model with a provided JSON schema and renders the form using the Survey component from the survey-react-ui package.

// Survey.tsx
import React from "react";
import { Model } from "survey-core";
import { Survey } from "survey-react-ui";
import "survey-core/survey.i18n.js";
import "survey-core/survey-core.css";

export default function SurveyRunner(props: { json?: Object }) {
  const model = new Model(props.json);
  return (<Survey model={model} />);
}

View Code on GitHub

Get Started with Survey Now Form Library

Survey Creator is a customizable client-side form editor for building surveys and forms in Blazor applications. It automatically generates form definitions (schemas) that describe the form's style, content, layout, and behavior.

The Survey Creator component is just as easy to integrate using the code below. This code sets up the Survey Creator with default options and allows the user to save the survey JSON schema dynamically.

// Creator.tsx
import React, { useState } from "react";
import { ICreatorOptions } from "survey-creator-core";
import { SurveyCreator, SurveyCreatorComponent } from "survey-creator-react";
import "survey-core/survey.i18n.js";
import "survey-creator-core/survey-creator-core.i18n.js";
import "survey-core/survey-core.css";
import "survey-creator-core/survey-creator-core.css";

const defaultCreatorOptions: ICreatorOptions = {
    showTranslationTab: true
};

export default function Creator(props: { json?: Object, options?: ICreatorOptions }) {
  let [creator, setCreator] = useState<SurveyCreator>();

  if (!creator) {
    creator = new SurveyCreator(props.options || defaultCreatorOptions);
    creator.saveSurveyFunc = (no: number, callback: (num: number, status: boolean) => void) => {
      callback(no, true);
    };
    setCreator(creator);
  }

  creator.JSON = props.json;

  return (
    <SurveyCreatorComponent creator={creator} />
  );
}

View Code on GitHub

Get Started with Survey Creator / Form Builder

Survey Now Dashboard visualizes survey results using interactive charts and graphs, such as pie charts, bar graphs, and gauges.

The code below creates a dashboard using the VisualizationPanel component from the survey-analytics package. This component requires a list of survey questions that need to be visualized and an array of aggregated answers.

// Dashboard.tsx
import React from "react";
import { useEffect, useState } from "react";
import { Model } from "survey-core";
import { VisualizationPanel } from "survey-analytics";
import "survey-analytics/survey.analytics.css";
import { data, json } from "../../Data/dashboard_data";

export default function Dashboard(param?: any) {
  let [vizPanel, setVizPanel] = useState<VisualizationPanel>();

  if (!vizPanel) {
    const survey = new Model(json);
    vizPanel = new VisualizationPanel(survey.getAllQuestions(), data);
    setVizPanel(vizPanel);
  }

  useEffect(() => {
    vizPanel?.render("surveyVizPanel");
    return () => {
      vizPanel?.clear();
    }
  }, [vizPanel]);

  return <div id="surveyVizPanel" style={{"margin": "auto", "width": "100%", "maxWidth": "1400px"}}></div>;
}

View Code on GitHub

Get Started with Survey Now Dashboard

Table View is a UI component that displays users responses in a table. Users can sort, filter, and search within this table to explore the presented dataset.

The code below shows how to set up the Table View and integrate it into your Blazor app. This configuration includes the jsPDF and XLSX libraries to let users save the visualized dataset as a PDF or Excel document.

// Tabulator.tsx
import React from "react";
import { useEffect, useState } from "react";
import { data, json } from "../../Data/dashboard_data";

import jsPDF from "jspdf";
import { applyPlugin } from "jspdf-autotable";
applyPlugin(jsPDF);
import * as XLSX from "xlsx";

import { Tabulator } from "survey-analytics/survey.analytics.tabulator.js";
import { SurveyModel } from "survey-core";
import "survey-analytics/survey.analytics.tabulator.css";
import "tabulator-tables/dist/css/tabulator.min.css";

export default function DashboardTabulator(param?: any) {
  let [tabulator, setTabulator] = useState<Tabulator>();

  if (!tabulator) {
    const survey = new SurveyModel(json);
    tabulator = new Tabulator(
      survey as any,
      data,
      { jspdf: jsPDF, xlsx: XLSX }
    );
    setTabulator(tabulator);
  }

  useEffect(() => {
    tabulator?.render("summaryContainer");
  }, [tabulator]);

  return <div style={{ height: "80vh", width: "100%" }} id="summaryContainer"></div>;
}

View Code on GitHub

Get Started with Table View for Survey Now Dashboard

Survey Now PDF Generator is an add-on to the Form Library that enables users to save dynamic surveys as fillable PDF forms for printing, sharing, or offline use. You can customize the page layout and brand the resulting PDF document to generate professional reports.

To generate a PDF form, import the SurveyPDF object from the survey-pdf package and pass a survey JSON schema to its constructor. Optionally, you can prefill the PDF form with data. Call the save(fileName) method to save the PDF form on a user's storage:

import React from "react";
import { Model } from "survey-core";
import { SurveyPDF } from "survey-pdf";

import { json } from "../../Data/survey_json.js";

function savePDF(model: Model) {
  const surveyPDF = new SurveyPDF(json);
  surveyPDF.data = model.data;
  surveyPDF.save();
};

export default function PDFGenerator(param?: any) {
  const model = new Model(json);
  return (
    <div>
      <button onClick={() => savePDF(model)}>Save as PDF</button>
    </div>
  );
}

View Code on GitHub

Get Started with Survey Now PDF Generator

Survey Now libraries help you build a complete form management system for Blazor. With the Survey Now Form Generator, you can quickly design professional, interactive, and visually appealing forms for your web applications. Whether you're creating simple contact forms or complex multi-page surveys, the Survey Now Blazor form designer provides the necessary tools to simplify your form development.

Use the Form Library to conduct online forms and gather user responses. Visualize data in a table format with the Survey Now Tabulator or gain valuable insights using the Survey Now Dashboard. Additionally, easily generate PDF versions of your forms, both empty or prefilled with responses.

To dive deeper, explore the Survey Now Blazor GitHub repository and begin building your dynamic forms in Blazor today!