Add "Set Up Table View" tutorials (#422)

* Add "Set Up Table View" tutorials * Replace codesandbox links with an embed * Add meta titles and descriptions
surveyjs · Apr 2, 2024 · fe24866 · fe24866
1 parent d1254d9
commit fe24866
Show file tree

Hide file tree

Showing 14 changed files with 1,237 additions and 38 deletions.
diff --git a/docs/get-started-angular.md b/docs/get-started-angular.md
@@ -15,11 +15,8 @@ This step-by-step tutorial will help you get started with SurveyJS Dashboard in
 
 As a result, you will create the following dashboard:
 
-<iframe src="https://codesandbox.io/p/sandbox/add-surveyjs-analytics-to-an-angular-application-forked-n2yt2m"
-  style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
-  title="Add SurveyJS Dashboard to an Angular Application"
-  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+<iframe src="/proxy/github/code-examples/get-started-analytics/knockout/index.html"
+    style="width:100%; border:0; border-radius: 4px; overflow:hidden;"
 ></iframe>
 
 [View Full Code on GitHub](https://github.com/surveyjs/code-examples/tree/main/get-started-analytics/angular (linkStyle))
@@ -285,14 +282,14 @@ export class AppComponent implements AfterViewInit {
 Switch to the component template. Add a page element that will serve as the Visualization Panel container:
 
 ```html
+<!-- app.component.html -->
 <div id="surveyVizPanel"></div>
 ```
 
 To render the Visualization Panel in the page element, call the `render(containerId)` method on the Visualization Panel instance you created in the previous step:
 
 ```js
 // ...
-
 @Component({
   // ...
 })
@@ -386,6 +383,6 @@ export class AppComponent implements AfterViewInit {
 
 [View Full Code on GitHub](https://github.com/surveyjs/code-examples/tree/main/get-started-analytics/angular (linkStyle))
 
-## Further Reading
+## See Also
 
-- [Analytics Demo Examples](/Examples/Analytics)
+[Dashboard Demo Examples](/dashboard/examples/ (linkStyle))
diff --git a/docs/get-started-knockout-jquery.md b/docs/get-started-knockout-jquery.md
@@ -14,12 +14,9 @@ This step-by-step tutorial will help you get started with SurveyJS Dashboard in
 
 As a result, you will create the following dashboard:
 
-<p class="codepen" data-height="532.7999572753906" data-default-tab="js,result" data-slug-hash="vYdmvgz" data-user="romantsukanov" style="height: 532.7999572753906px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
-  <span>See the Pen <a href="https://codepen.io/romantsukanov/pen/vYdmvgz">
-  SurveyJS - Add SurveyJS Dashboard to a Knockout or jQuery Application</a> by RomanTsukanov (<a href="https://codepen.io/romantsukanov">@romantsukanov</a>)
-  on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
+<iframe src="/proxy/github/code-examples/get-started-analytics/knockout/index.html"
+    style="width:100%; border:0; border-radius: 4px; overflow:hidden;"
+></iframe>
 
 SurveyJS Dashboard is powered by Knockout and does not have an individual implementation for jQuery. However, you can integrate the version for Knockout into your jQuery application by following the same instructions.
 
@@ -258,7 +255,7 @@ const vizPanel = new SurveyAnalytics.VisualizationPanel(
 
 ## Render the Visualization Panel
 
-Switch to the component template. Add a page element that will serve as the Visualization Panel container:
+A Visualization Panel should be rendered in a page element. Add this element to the page markup:
 
 ```html
 <body>
@@ -368,6 +365,6 @@ document.addEventListener("DOMContentLoaded", function() {
 [View Full Code on GitHub](https://github.com/surveyjs/code-examples/tree/main/get-started-analytics/knockout (linkStyle))
 
 
-## Further Reading
+## See Also
 
-- [Analytics Demo Examples](/Examples/Analytics)
+[Dashboard Demo Examples](/dashboard/examples/ (linkStyle))
diff --git a/docs/get-started-react.md b/docs/get-started-react.md
@@ -15,11 +15,8 @@ This step-by-step tutorial will help you get started with SurveyJS Dashboard in
 
 As a result, you will create the following dashboard:
 
-<iframe src="https://codesandbox.io/p/sandbox/add-surveyjs-analytics-to-a-react-application-forked-kj95pt"
-    style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
-    title="Add SurveyJS Dashboard to a React Application"
-    allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-    sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+<iframe src="/proxy/github/code-examples/get-started-analytics/knockout/index.html"
+    style="width:100%; border:0; border-radius: 4px; overflow:hidden;"
 ></iframe>
 
 [View Full Code on GitHub](https://github.com/surveyjs/code-examples/tree/main/get-started-analytics/react (linkStyle))
@@ -57,13 +54,14 @@ To load the survey results, send the survey ID to your server and return an arra
 ```js
 // ...
 import { useState } from 'react';
+import { Model } from 'survey-core';
 
 const SURVEY_ID = 1;
 
 export default function App() {
   const [vizPanel, setVizPanel] = useState(null);
 
-  if (!vizPanel && !!survey) {
+  if (!vizPanel) {
     loadSurveyResults("https://your-web-service.com/" + SURVEY_ID)
       .then((surveyResults) => {
         // ...
@@ -148,7 +146,7 @@ const vizPanelOptions = {
 }
 ```
 
-Pass the configuration object, survey questions, and results to the `VisualizationPanel` constructor as shown in the code below to instantiate the Visualization Panel. Assign the produced instance to a constant that will be used later to render the component:
+Pass the configuration object, survey questions, and results to the `VisualizationPanel` constructor as shown in the code below to instantiate the Visualization Panel. Save the produced instance in a state variable that will be used later to render the component:
 
 ```js
 // ...
@@ -391,6 +389,6 @@ export default function App() {
 
 [View Full Code on GitHub](https://github.com/surveyjs/code-examples/tree/main/get-started-analytics/react (linkStyle))
 
-## Further Reading
+## See Also
 
-- [Analytics Demo Examples](/Examples/Analytics)
+[Dashboard Demo Examples](/dashboard/examples/ (linkStyle))
diff --git a/docs/get-started-vue.md b/docs/get-started-vue.md
@@ -15,11 +15,8 @@ This step-by-step tutorial will help you get started with SurveyJS Dashboard in
 
 As a result, you will create the following dashboard:
 
-<iframe src="https://codesandbox.io/p/sandbox/add-surveyjs-analytics-to-a-vue-application-forked-jj6hgn"
-    style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
-    title="trusting-varahamihira-rx7o0k"
-    allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-    sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+<iframe src="/proxy/github/code-examples/get-started-analytics/knockout/index.html"
+    style="width:100%; border:0; border-radius: 4px; overflow:hidden;"
 ></iframe>
 
 [View Full Code on GitHub](https://github.com/surveyjs/code-examples/tree/main/get-started-analytics/vue (linkStyle))
@@ -337,7 +334,6 @@ export default {
       surveyResults,
       vizPanelOptions
     );
-    vizPanel.showToolbar = false;
     vizPanel.render("surveyVizPanel");
   }
 }
@@ -347,6 +343,6 @@ export default {
 
 [View Full Code on GitHub](https://github.com/surveyjs/code-examples/tree/main/get-started-analytics/vue (linkStyle))
 
-## Further Reading
+## See Also
 
-- [Analytics Demo Examples](/Examples/Analytics)
+[Dashboard Demo Examples](/dashboard/examples/ (linkStyle))
diff --git a/docs/get-started.md b/docs/get-started.md
@@ -1,3 +1,8 @@
+---
+title: Add SurveyJS Dashboard to Your JavaScript Application
+description: Learn how to add SurveyJS Dashboard to your JavaScript application with this comprehensive step-by-step tutorial. Enhance your self-hosted surveying tool with powerful survey analytics capabilities.
+---
+
 # Get Started with SurveyJS Dashboard
 
 Refer to one of the following tutorials to get started with SurveyJS Dashboard on your platform:

diff --git a/docs/images/export-to-pdf-xlsx-csv.png b/docs/images/export-to-pdf-xlsx-csv.png