SurveyJS packages naming and theming/layout question

[metaturso]

Are you requesting a feature, reporting a bug or asking a question?

Question.

Question

I would like to use SurveyJS in a business project but there's a few questions that I couldn't answer on my own just by reading the documentation on https://surveyjs.io/Documentation/Library and the quick start projects alone:

1. What is the difference between the survey-vue and survey-vue-ui packages?
2. What is the difference between the survey-library and survey-core packages? E.g. is the latter the UI framework-independent code from survey-library that supports one of the SurveyJS UI component packages such as survey-vue-ui?
3. Is it possible to customize the survey layout without abusing the CSS theme classes, or is the <survey> component the only accepted way to render the survey and all its sub-components?

Extra Context

I'm working out whether SurveyJS (Vue) UI component can be deconstructed to change how the survey is presented on an existing SPA. In particular, here's a summary of what I'm looking to do:

• Show an index page with links to every other page.
  • ℹ️ I would rather generate this page dynamically instead of using the html rendering component.
• Show the survey progress bar in the existing application sub-header.
• Show a Preview button at the bottom of every page, by the navigation buttons, which jumps to the preview page.
• Show a Index button at the top of every page, by the progress indicator, which jumps to the index page.
• Show extra details about the questions on a page using a drawer.

Knowing which package I should ignore between survey-vue and survey-vue-ui would be a great start.

I don't need a tutorial on how to do any of those things. Just a quick answer to determine whether SurveyJS can be customized to achieve some, or all, of those goals. Any extra advice is greatly appreciated but not required.

[andrewtelnov]

@metaturso Regarding your (1) (2) questions. The short answer: survey-vue = survey-core + survey-vue-ui + localization strings. You can use any of them. However, I would recommend ot use survey-vue for now.

The long answer. survey-library is not our package. Let me explain our packages as they were created over the time: survey-knockout - survey version for knockoutjs, using knockout rendering survey-vue - survey version for vue, using vue v2 rendering survey-react - survey version for react, using react rendering. After we started to work on "vue" and then react versions, we decided to rewrite our code and separate rendering from platform independed part, survey model. We do not create the separate packages, we only create this layour in our code. It took time, but we remove a lot of code duplication and in many cases, we could add a new functionality on survey model level and it applies to all versions. Later we develop Survey Creator, survey-creator packages, it is written using knockout and it depends on survey-knockout package. Further, some people ask us to work with our Survey Model that doesn't has rendering part on NodeJS server. We have created it and new package "survey-core" was created. survey-core - survey model without rendering. survey-vue and survey-react contain this code inside the package. Later we started to work on Creator V2, that we want to make for react/knockout and later for angular/vue. From the start we have created Creator Model and have created the package "survey-creator-core", it is obviosly depends on "survey-core". So for Creator V2 for react we have package: "survey-creator-react" that depends on survey-creator-core, survey-core and new created survey-react-ui, rendering part of survey for react. So for Creator V2 for vue, we will have the same: survey-creator-vue, survey-creator-core, survey-core and survey-vue-ui. However, we think, we will create survey-vue-ui for vue3 and leave survey-vue for vue2. Please note, we do not have started to work on Creator V2 for vue yet. At first we will create Creator V2 for Angular, then survey-vue-ui for vue3 and then Survey-Creator V2 for vue3.

Question 3. You can override our css rules or add your css rules. Please review examples in this section.

Your extra questions. There are a lot properties, functions and events in our survey model. For your task you can use survey.currentPageNo, survey.visiblePages, survey.onCurrentPageChanged event and so on. You can use them to create your own progress bar. Please review the custom navigation example. You can create your own navigation panel or add a button(s) into our navigation panel. Here is the example. You can override rendering using the following approach.

PS: Please create separate issues for different question types. It will be impossible for others to read your questions and our answers.

Thank you, Andrew

[ramonwenger]

@andrewtelnov I am reading between the lines a bit, probably, but: Do I understand you correctly in that someone currently wanting to use SurveyJS with Vue 3 it would be better to just use survey-core and not use survey-vue? Or wait until you create survey-vue-ui?