3
Я пытаюсь создать компонент в AEM CQ5, который будет генерировать модуль викторины. Мое требование - создать диалог, который позволит мне создавать несколько вопросов, каждый из которых имеет несколько ответов. Мой диалог XML выглядит следующим образом -AEM CQ5 - Multifield custom xtype внутри пользовательского типа mutlifield xtype
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="cq:Dialog"
xtype="dialog">
<items jcr:primaryType="cq:Widget"
xtype="tabpanel">
<items jcr:primaryType="cq:WidgetCollection">
<categories
jcr:primaryType="cq:Panel"
title="Questions & Answers">
<items jcr:primaryType="cq:WidgetCollection">
<questions-answers
jcr:primaryType="cq:Widget"
title="Questions & Answers"
name="./qasegment"
xtype="dialogfieldset">
<items jcr:primaryType="cq:WidgetCollection">
<link
jcr:primaryType="cq:Widget"
fieldDescription="Click on Add item to add questions. Once question is added, click on Edit Answers to add answers and the destination URLs"
name="./questionsAnswers"
typeHint="String"
xtype="multifield">
<fieldConfig
jcr:primaryType="nt:unstructured"
xtype="widgets.configurableQandAfield"/>
</link>
</items>
</questions-answers>
</items>
</categories>
</items>
</items>
</jcr:root>
С и xtype: mutlifield, я имею в виду пользовательский ExtJS виджет, который следующим образом. Это создаст (вопрос + вопрос конфигурации + Добавить ответ multifield) multifield.
NirmalWeb.ConfigurableQandAField = CQ.Ext.extend(CQ.form.CompositeField, {
/**
* @private
* @type CQ.Ext.form.HiddenField
*/
hiddenField: null,
/**
* @private
* @type CQ.Ext.form.TextField
*/
questionField: null,
/**
* @private
* @type CQ.Ext.form.TextField
*/
linkField: null,
textField:null,
answerOptions:null,
answerType:null,
widgetConfig: null,
constructor: function(config) {
config = config || { };
var defaults = {
"border": true,
"layout": "form",
"labelSeparator": ":",
"padding": "10px"
};
this.widgetConfig = config;
config = CQ.Util.applyDefaults(config, defaults);
EeWeb.ConfigurableQandAField.superclass.constructor.call(this, config);
},
// overriding CQ.Ext.Component#initComponent
initComponent: function() {
EeWeb.ConfigurableQandAField.superclass.initComponent.call(this);
// Add a hidden field to hold our result to store.
this.hiddenField = new CQ.Ext.form.Hidden({
name: this.name
});
this.add(this.hiddenField);
// Add the link text field and label.
this.questionField = new CQ.Ext.form.TextField({
fieldLabel: 'Question',
allowBlank: false,
emptyText: "Enter the question",
width: 500,
listeners: {
change: {
fn:this.updateQuestionStore
},
dialogclose: {
scope: this,
fn: this.updateHidden
}
}
});
this.add(this.questionField);
var fieldsetConfig = CQ.Ext.apply({}, {
xtype: 'fieldset',
title: 'Edit Answer',
// title or checkboxToggle creates fieldset header
columnWidth: 0.5,
checkboxToggle: true,
collapsed: true,
items :[
{
xtype: "fieldset",
title: 'Answer configurations',
autoHeight:true,
items: [
new CQ.Ext.form.RadioGroup({
vertical: false,
id:"answerType",
items: [
{boxLabel: 'Text Answer', name: 'answerType', inputValue: 1, checked:true},
{boxLabel: 'Image Answer', name: 'answerType', inputValue: 2}
]
}),
new CQ.Ext.form.RadioGroup({
vertical: false,
id:"answerOptions",
items: [
{boxLabel: 'Single Answer', name: 'answerOptions', inputValue: 1, checked:true},
{boxLabel: 'Multiple Answer', name: 'answerOptions', inputValue: 2}
]
}),
]
},
{
xtype: "multifield",
fieldConfig : {
items: [
{
xtype: "widgets.configurablemultiAnswerfield",
hideLabel: true,
}
]
}
},
]
});
this.textField = new CQ.Ext.form.FieldSet(fieldsetConfig);
this.add(this.textField);
},
// overriding CQ.form.CompositeField#processInit
processInit: function (path, record) {
this.linkTextField.processInit(path, record);
this.linkField.processInit(path, record);
},
// overriding CQ.form.CompositeField#setValue
setValue: function(value) {
var link = JSON.parse(value);
this.linkTextField.setValue(link.text);
this.linkField.show();
this.hiddenField.setValue(value);
},
// overriding CQ.form.CompositeField#getValue
getValue: function() {
return this.getRawValue();
},
// overriding CQ.form.CompositeField#getRawValue
getRawValue: function() {
return JSON.stringify("test");
},
// private
updateHidden: function() {
this.hiddenField.setValue(this.getValue());
},
editAnswer: function(value) {
alert("radio group change");
}
});
// Register our new xtype.
CQ.Ext.reg('widgets.configurableQandAfield', NirmalWeb.ConfigurableQandAField);
В пользовательском виджете, я создаю еще один многопрофильный для добавления текста ответа и наконечника инструмента, который является другим пользовательским виджетом. К сожалению, элемент multifield Add просто добавляет текстовое поле, а не все поля в настраиваемом виджетах 'configurablemultiAnswerfield'.
Пожалуйста, помогите мне. Дайте мне знать, если потребуется больше. Заранее спасибо.
Только предложение, почему вы хотите, чтобы загромождать диалог с несколькими несколькими полями. Скорее вы можете задать вопрос с вопросом и мультифиллом для ответов. Перетащите компонент несколько раз на страницу и используйте его (что-то вроде вашего компонента формы по умолчанию, состоящего из нескольких полей ввода). – rakhi4110
Спасибо rakhi за предложение. Конечной целью этого компонента викторины является повышение полезности страниц справки. Вместо того, чтобы показывать полный контент для всех клиентов, мы планируем показать клиентам соответствующий контент, задавая вопросы. Например, справочную страницу для планов данных Airtel - мы зададим вопрос 1 - какой пользователь вы a1. предоплата a2. pospaid. При выборе предоплаты он может либо привести к следующему вопросу, либо текстовому контенту и аналогичным образом для постплатежа. Абсолютно открыт для любых предложений по реализации этой логики. –
Подход rakhi - это то, как я пойду, таким образом +1. Что касается вашей дальнейшей потребности, вы можете создать еще один компонент, который будет действовать как контейнер для вопросов, где вы могли бы реализовать логику, что будет отображаться дальше, в зависимости от результата предыдущего вопроса. – Thomas