Question T15368
Visible to All Users

Radio button group/checkboxes with optional text

created a year ago

Hi Support team,

Thanks for all the support.

Our application is developed using non modular vuejs. I have two issues.

1) We were able to display radio button group/checkboxes with optional text in the form library. Pls can you tell us how to add support for radio button group/checkboxes with optional text in the survey creator?

2) Even when we set the form library to render in read only mode, when we use radio button group/checkboxes with optional text in the questionnair, the form is editable.

survey.mode = 'display';

Thanks in advance.

Krishnan

Answers approved by surveyjs Support

created a year ago

Hello Krishnan,
Thank you for reaching out to us.

  1. It seems that we've been already discussing this task in your other tickets:

Let me reiterate: a Survey Creator for Vue uses the survey-knockout-ui package to render a survey. Therefore, you need to follow the knockout integration to register a custom Radiogroup and Checkbox question component. Please refer to the following demo which shows how to implement a custom item template for a Survey Creator for Vue2: View CodePen.

  1. To process the second inquiry in the most efficient manner, I created a separate issue.
    Radio button group/checkboxes with optional text - Read-only mode is not applied

Thanks

    Show previous comments (2)

      Hello Krishnan,
      Thank you for the update. If you integrate a Survey Creator for Knockout within a Vue 2 app, the survey-vue package is not required. Please remove the following scripts:

      HTML
      https://unpkg.com/survey-vue@1.9.114/survey.vue.min.js https://unpkg.com/survey-vue@1.9.114/themes/index.min.js

      Regarding your additional question: please refer to the demo I shared earlier. It demonstrates how to register an itemComment property for choice items using the Survey.Serializer.addProperty function.
      Clipboard-File-1.png

      Users will access and modify this property in a Survey Creator.

      I would also recommend that you explore a list of JS and CSS resources used within this demo. Go to Settings -> Pen Settings -> JS/CSS:
      Clipboard-File-2.png

      Please follow the demo configuration and code.

      Should you have any further questions, I'll be happy to assist you further.

        Hi Jane,

        Thanks for all the support.

        We need to display survey creator and form library in our application. Please find our observations.

        1. When we remove these two files, we are not able to see form library in the UI. Please refer form_library_not_visible.png. There is no javascript error.
        Code
        https://unpkg.com/survey-vue@1.9.114/survey.vue.min.js https://unpkg.com/survey-vue@1.9.114/themes/index.min.js
        1. When we include the files mentioned in the codepen(https://codepen.io/JaneGaid/pen/oNmvGJQ)), we are not able to see the form library(form_library_not_visible.png). survey creator is working properly.
        Code
        https://unpkg.com/vue@2.6.12/dist/vue.min.js (Note, we have tested our application with vuejs version 2.6.12) <script src="https://unpkg.com/knockout@3.5.1/build/output/knockout-latest.js"></script> <script src="https://unpkg.com/survey-core@1.9.113/survey.core.min.js"></script> <script src="https://unpkg.com/survey-core@1.9.113/survey.i18n.min.js"></script> <script src="https://unpkg.com/survey-core@1.9.113/themes/index.min.js"></script> <script src="https://unpkg.com/survey-knockout-ui@1.9.113/survey-knockout-ui.min.js"></script> <script src="https://unpkg.com/survey-creator-core@1.9.113/survey-creator-core.min.js"></script> <script src="https://unpkg.com/survey-creator-core@1.9.113/survey-creator-core.i18n.min.js"></script> <script src="https://unpkg.com/survey-creator-core@1.9.113/themes/index.min.js"></script> <script src="https://unpkg.com/survey-creator-knockout@1.9.113/survey-creator-knockout.min.js"></script>
        1. When we used the libraries mentioned in the codepen and integrated the code mentioned in the codepen, we are still getting the below error.
        Code
        Uncaught TypeError: Cannot read properties of undefined (reading 'register')

        We have included these libraries in our application. Not sure if these libraries is having any impact.
        vue-router version 3.1.5
        vue-i18n version 8.8.2
        vue2-bootstrap-table2 version 1.2.5
        vue-good-table version 2.15.3
        bootstrap-vue.min.js

        1. When these libraries were included, both survey creator and form library is functioning(form_library_visible.png). That is why we have decided to use these set of files.
        Code
        https://unpkg.com/vue@2.6.12/dist/vue.min.js https://unpkg.com/knockout@3.5.1/build/output/knockout-latest.js https://unpkg.com/survey-core@1.9.114/survey.core.min.js https://unpkg.com/survey-knockout-ui@1.9.114/survey-knockout-ui.min.js https://unpkg.com/survey-creator-core@1.9.114/survey-creator-core.min.js https://unpkg.com/survey-creator-core@1.9.114/survey-creator-core.i18n.min.js https://unpkg.com/survey-creator-knockout@1.9.114/survey-creator-knockout.min.js https://unpkg.com/survey-vue@1.9.114/survey.vue.min.js https://unpkg.com/survey-vue@1.9.114/themes/index.min.js
        AT AT
        Andrew Telnov a year ago

          Hello Krishnan,
          I think it is better remove "survey-vue*" packages at all. You can use knockout version on your survey page as you do for Creator. It will make your code simpler and reduce your application size.
          We are working on SurveyJS Creator for Vue3. We should release it by the end of the year. It will make sense for you to use vue only rendering when we release Vue3 version and you move your application into Vue3 as well.

          Thank you,
          Andrew
          SurveyJS Team