Hi,
We wrote the following code to extend the functionality of the existing question types:
JavaScriptimport { CustomWidgetCollection, Serializer } from "survey-core"
export const loadConformanceType = () => {}
CustomWidgetCollection.Instance.add({
name: "conformance",
isFit: function (element: any) {
* return element.getType() == "text" *
},
init() {
* Serializer.addProperty("text", { *
name: "conformant:boolean",
default: false,
category: "general",
})
},
isDefaultRender: true,
afterRender: function (question: any, el: any) {
var mainDiv = document.createElement("div")
mainDiv.textContent = "conformance boolean UI"
mainDiv.style.backgroundColor = "green"
mainDiv.style.color = "white"
mainDiv.style.backgroundColor = "green"
mainDiv.style.marginTop = "10px"
mainDiv.style.padding = "3px"
mainDiv.style.textAlign = "center"
el.append(mainDiv)
mainDiv.style.display = !question.conformant ? "none" : ""
question.registerFunctionOnPropertyValueChanged("conformant", function () {
mainDiv.style.display = !question.conformant ? "none" : ""
})
},
})
The above code adds a property to the text question called "conformant", when that property is toggled some extra UI is appended to that question. However, what we want is code that adds this property/UI to all types of questions, not just "text". One thing we tried is changing the question type in the code lines highlighted with "*" in the code. So we would write the exact same code for each of the question types but change the type from "text" to "dropdown" for example. We had two problems with that approach:
1- The approach does not work with the boolean question type. This is an example of the text type (works OK):
but we change the type to boolean we get this (does not work as expected):
As you can see the change affects all the boolean elements in the page even the ones in the property area, which is not what we want. We only want the question in the survey page to be affected.
2- If we go with this approach we have duplicate the above code 17 or 18 times to cover all the question types. Is there a way to make the above code work for all the questions at once? we tried replacing the question type in the highlighted lines above with "question" which is the parent class of all the question types. Although the Serializer added the property checkbox correctly, clicking on it did not trigger any changes. So afterRender and registerFunctionOnPropertyValueChanged were not being called at all.
JavaScript...
isFit: function (element: any) {
return element.getType() == "question"
},
...
init() {
Serializer.addProperty("question", {
name: "conformant:boolean",
default: false,
category: "general",
})
},
...
If you have any suggestions regarding problems 1 and 2 above please let us know. If you think we going completely in the wrong direction and there is a better way to achieve this please point us to it.
Thanks.
Aleksandra