Basic Field
Sample that shows how to integrate a basic input field with label support and validity check ,the value entered will be checked against 'ngsurvey' and the field will expand to a textarea if its height property has been set to higher than 1 in the answer property page.
class BasicFieldSampleWidget extends NGSWidget {
/* Html template that will generate before class gets created
All id's and css classes name will be suffixed by the uniqueId
provided during creation of the widget */
static get template() {
return `
<ngs-label></ngs-label>
<div class="ngs-widget-field-container">
<input class="ngs-question__answer-field" type="text" id="myField">
<textarea rows="{{height}}" class="ngs-question__answer-field ngs-question__answer-field-comment"></textarea>
</div>
`;
}
/* Style that will be assigned to this widget, note that all
elements class names will be scoped using the widget unique id */
static get style() {
return `.ngs-widget-field-container {display:flex;flex-direction:row;align-items:center} .flex-auto{flex:1 1 auto}`
}
/* Does this widget support label, the label is the text a form
admin can enter using the form design and can be injected in
the template using the <ngs-label></ngs-label> tag
*/
static get hasLabel() {
return true;
}
/* Allows the answer to be set required or not
from the answer settings page to make
the widget answer required during survey */
static get required() {
return true;
}
/* Properties that can be set in from the form designer for each
answer using this widget as an answer type in the answer properties */
static get propertiesDef() {
return [{
id: 'height',
label: 'height',
defaultValue: '1',
type: 'text'
}];
}
init() {
// Get the input element from the template
this.inputField = this.widgetQuerySelector('.ngs-question__answer-field');
this.inputTextArea = this.widgetQuerySelector('.ngs-question__answer-field-comment');
// We can get property value changes at any time
this.getProperties$(prop => {
this.inputField.style.display = prop.height > 1 ? 'none' : 'block';
this.inputTextArea.style.display = prop.height > 1 ? 'block' : 'none';
});
// Get the current render mode to know how we should
// setup the state here make it disabled if the
// widget is in read only mode
this.isDisabled$(disabled => {
this.inputField.disabled = disabled;
});
// Gets the current value of the wdiget
this.getValue$(value => {
this.inputField.value = value;
this.inputTextArea.value = value;
});
// Set the inital value when the widget gets created
if (this.initialValue) {
this.inputField.value = this.initialValue;
this.inputTextArea.value = this.initialValue;
}
// If the user changes the text make sure to save the value
// in the form
this.inputField.addEventListener('input', (event) => {
this.textChanged(this.inputField.value, this);
});
this.inputTextArea.addEventListener('input', (event) => {
this.textChanged(this.inputTextArea.value, this);
});
}
// Post the value to the form
textChanged(value, widget) {
if (widget.inputField && widget.inputField.style.display == 'block') {
widget.setAnswer(this.inputField.value);
} else if (widget.inputTextArea && widget.inputTextArea.style.display == 'block') {
widget.setAnswer(this.inputTextArea.value);
}
}
// Will be called by the form
// to see if the value is valid
// If not valid must return '' (no error message shown) or the error message to show
// If its valid return null
isValid() {
if ((this.inputField && this.inputField.style.display == 'block' && this.inputField.value && this.inputField.value != 'ngsurvey') ||
(this.inputTextArea && this.inputTextArea.style.display == 'block' && this.inputTextArea.value && this.inputTextArea.value != 'ngsurvey')) {
return 'Value must be equal to ngsurvey';
} else {
return null;
}
}
}
Last updated
Was this helpful?