How to customize a widget

I want  to customize a widget,meaning create my own widget and add  it to the surveyjs

On 1/27/2020 12:27 PM, Support Support wrote:

Hello,

You can use this example for SurveyJS library and this example for SurveyCreator. Customize it for you needs

Thanks, Alex
SurveyJS Team

there is a file called customwidget.js, i am using vuejs,
how to integrate customwidget.js into vuejs project

On 1/27/2020 1:06 PM, Support Support wrote:

Hello,

You can check our SurveyJS Vue Quickstart repository for this

Thanks, Alex
SurveyJS Team

how to integrate custom widget into your survejs

On 1/27/2020 2:50 PM, Support Support wrote:

I am trying to follow with this link https://next.plnkr.co/edit/fXsLf1R88WxxDFaFEnYx?p=preview&preview, unfortunately  my side its not working

On 1/27/2020 2:50 PM, Support Support wrote:

Hello,

Have you checked this link? This project demonstrates how to integrate custom widgets into VueJS project

Thanks, Alex
SurveyJS Team

I am not adding customer widget package, I am building  my own widget   what do i integrate in my vuejs project. this is my code

var widget = {
  //the widget name. It should be unique and written in lowcase.
  name: "textwithbutton",
  //the widget title. It is how it will appear on the toolbox of the SurveyJS Editor/Builder
  title: "Text with button",
  //the name of the icon on the toolbox. We will leave it empty to use the standard one
  iconName: "",
  //If the widgets depends on third-party library(s) then here you may check if this library(s) is loaded
  widgetIsLoaded: function () {
      //return typeof $ == "function" && !!$.fn.select2; //return true if jQuery and select2 widget are loaded on the page
      return true; //we do not require anything so we just return true.
  },
  //SurveyJS library calls this function for every question to check, if it should use this widget instead of default rendering/behavior
  isFit: function (question) {
      //we return true if the type of question is textwithbutton
      return question.getType() === 'textwithbutton';
      //the following code will activate the widget for a text question with inputType equals to date
      //return question.getType() === 'text' && question.inputType === "date";
  },
  //Use this function to create a new class or add new properties or remove unneeded properties from your widget
  //activatedBy tells how your widget has been activated by: property, type or customType
  //property - it means that it will activated if a property of the existing question type is set to particular value, for example inputType = "date"
  //type - you are changing the behaviour of entire question type. For example render radiogroup question differently, have a fancy radio buttons
  //customType - you are creating a new type, like in our example "textwithbutton"
  activatedByChanged: function (activatedBy) {
      //we do not need to check acticatedBy parameter, since we will use our widget for customType only
      //We are creating a new class and derived it from text question type. It means that text model (properties and fuctions) will be available to us
      Survey.JsonObject.metaData.addClass("textwithbutton", [], null, "text");
      //signaturepad is derived from "empty" class - basic question class
      //Survey.JsonObject.metaData.addClass("signaturepad", [], null, "empty");

//Add new property(s)
      //For more information go to https://surveyjs.io/Examples/Builder/?id=addproperties#content-docs
      Survey.JsonObject.metaData.addProperties("textwithbutton", [
          { name: "buttonText", default: "Click Me" }
      ]);
  },
  //If you want to use the default question rendering then set this property to true. We do not need any default rendering, we will use our our htmlTemplate
  isDefaultRender: false,
  //You should use it if your set the isDefaultRender to false
  htmlTemplate:

Code
"<div><input /><button></button></div>"  

,
  //The main function, rendering and two-way binding
  afterRender: function (question, el) {
      //el is our root element in htmlTemplate, is "div" in our case
      //get the text element
      var text = el.getElementsByTagName("input")[0];
      //set some properties
      text.inputType = question.inputType;
      text.placeholder = question.placeHolder;
      //get button and set some rpoeprties
      var button = el.getElementsByTagName("button")[0];
      button.innerText = question.buttonText;
      button.onclick = function () {
          question.value = "You have clicked me";
      }

//set the changed value into question value
      text.onchange = function () {
          question.value = text.value;
      }
      onValueChangedCallback = function () {
          text.value = question.value ? question.value : "";
      }
      onReadOnlyChangedCallback = function() {
        if (question.isReadOnly) {
          text.setAttribute('disabled', 'disabled');
          button.setAttribute('disabled', 'disabled');
        } else {
          text.removeAttribute("disabled");
          button.removeAttribute("disabled");
        }
      };
      //if question becomes readonly/enabled add/remove disabled attribute
      question.readOnlyChangedCallback = onReadOnlyChangedCallback;
      //if the question value changed in the code, for example you have changed it in JavaScript
      question.valueChangedCallback = onValueChangedCallback;
      //set initial value
      onValueChangedCallback();
      //set initial readOnly if needed
      onReadOnlyChangedCallback();
  },
  //Use it to destroy the widget. It is typically needed by jQuery widgets
  willUnmount: function (question, el) {
      //We do not need to clear anything in our simple example
      //Here is the example to destroy the image picker
      //var $el = $(el).find("select");
      //$el.data('picker').destroy();
  }
}

//Register our widget in singleton custom widget collection
Survey.CustomWidgetCollection.Instance.addCustomWidget(widget, "customtype");

On 1/27/2020 3:51 PM, Support Support wrote: