Cannot embed image to dynamucally binded richtext item in Xpage - xpages

Question

I have a quiz form, which lets to create different psychological tests. Now it hardcoded to 50 questions. I need some questions to have embedded images, that's why I use RichText. When I bind it dynamically, with value="#{document1[viewScope.FieldName]}" it works fine with custom text formatting, but don't let me import an image into richtext. Binding with value="${document1[viewScope.FieldName]}" lets, but I can't dynamically change fields.
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xe="http://www.ibm.com/xsp/coreex"
xmlns:xc="http://www.ibm.com/xsp/custom">
<xp:this.data>
<xp:dominoDocument var="document1" formName="test">
</xp:dominoDocument>
</xp:this.data>
<xp:this.beforePageLoad><![CDATA[#{javascript:if (!viewScope.qNum || viewScope.qNum == 0) {
viewScope.qNum = 1;
}
viewScope.qFNCount = 'Q'+viewScope.qNum + 'Count';
viewScope.qFNCorrect = 'Q'+viewScope.qNum + 'Correct';
viewScope.qFNTitle = 'Q'+viewScope.qNum + 'Title';
viewScope.qFNA1 = 'Q'+viewScope.qNum + 'A1';
viewScope.qFNA2 = 'Q'+viewScope.qNum + 'A2';
viewScope.qFNA3 = 'Q'+viewScope.qNum + 'A3';
viewScope.qFNA4 = 'Q'+viewScope.qNum + 'A4';
viewScope.qFNA5 = 'Q'+viewScope.qNum + 'A5';}]]></xp:this.beforePageLoad>
<xp:this.beforeRenderResponse><![CDATA[#{javascript:
viewScope.qFNCount = 'Q'+viewScope.qNum + 'Count';
viewScope.qFNCorrect = 'Q'+viewScope.qNum + 'Correct';
viewScope.qFNTitle = 'Q'+viewScope.qNum + 'Title';
viewScope.qFNA1 = 'Q'+viewScope.qNum + 'A1';
viewScope.qFNA2 = 'Q'+viewScope.qNum + 'A2';
viewScope.qFNA3 = 'Q'+viewScope.qNum + 'A3';
viewScope.qFNA4 = 'Q'+viewScope.qNum + 'A4';
viewScope.qFNA5 = 'Q'+viewScope.qNum + 'A5';}]]></xp:this.beforeRenderResponse>
<xp:scriptBlock id="scriptBlock2">
<xp:this.value>
<![CDATA[
CKEDITOR.config.removeButtons = 'TextColor,BGColor,Find,Font,Underline,Subscript,Superscript,Scayt,Anchor,Table,HorizontalRule,SpecialChar,Maximize,Strike,NumberedList,BulletedList,Indent,Outdent,Blockquote,Styles,Format,About';
]]>
</xp:this.value>
</xp:scriptBlock>
<xp:this.resources>
<xp:styleSheet href="/application.css"></xp:styleSheet>
<xp:script src="/core.ssjs.jss" clientSide="false"></xp:script>
<xp:script src="/client.js" clientSide="true"></xp:script>
<xp:script src="/form.js" clientSide="true"></xp:script>
</xp:this.resources>
<xp:panel styleClass="container form-horizontal" id="container">
<xe:djHorizontalSlider id="djHorizontalSlider1"
value="#{viewScope.qNum}" clickSelect="true" maximum="50" minimum="1"
pageIncrement="1" showButtons="true" required="true"
style="overflow:hidden" readOnly="false" discreteValues="50"
lang="ru" slideDuration="50">
<xe:this.converter>
<xp:convertNumber integerOnly="true"></xp:convertNumber>
</xe:this.converter>
<xe:djSliderRuleLabels
style="height:14px;font-size:75%;color:gray" count="50"
container="bottomDecoration" id="djSliderRuleLabels1" maximum="50"
minimum="1" labels="#{javascript:rangeStr(1,51)}">
</xe:djSliderRuleLabels>
<xp:eventHandler event="onChange" submit="true"
refreshMode="complete">
<xe:this.action><![CDATA[#{javascript:viewScope.qFNTitle = 'Q'+viewScope.qNum + 'Title';
viewScope.qFNCount = 'Q'+viewScope.qNum + 'Count';
viewScope.qFNCorrect = 'Q'+viewScope.qNum + 'Correct';
viewScope.qFNA1 = 'Q'+viewScope.qNum + 'A1';
viewScope.qFNA2 = 'Q'+viewScope.qNum + 'A2';
viewScope.qFNA3 = 'Q'+viewScope.qNum + 'A3';
viewScope.qFNA4 = 'Q'+viewScope.qNum + 'A4';
viewScope.qFNA5 = 'Q'+viewScope.qNum + 'A5';}]]></xe:this.action>
</xp:eventHandler>
</xe:djHorizontalSlider>
<xp:panel styleClass="panel panel-default" id="quests">
<xp:panel styleClass="panel-body">
<xc:ccSectionPanel panel_id="ccSection"
initClosed="false" panel_class="panel-default" footer="false"
disable_collapse="true"
titleBarText="#{javascript:'Вопрос номер ' + viewScope.qNum;}"
custom_title="true">
<xp:this.facets>
<xp:panel xp:key="customTitle">
<xp:text escape="true" id="computedField1"
value="#{javascript:'Вопрос номер ' + viewScope.qNum;}"
styleClass="panel-title">
</xp:text>
<xp:button value="Редактировать" id="button2"
rendered="#{javascript:document1.isEditable()==#False()}"
styleClass="pull-right"
style="margin-top:-7px;margin-right:-12px;">
<xp:eventHandler event="onclick"
submit="true" refreshMode="complete">
<xp:this.action>
<xp:actionGroup>
<xp:changeDocumentMode
mode="edit" var="document1">
</xp:changeDocumentMode>
<xp:executeScript>
<xp:this.script><![CDATA[#{javascript:viewScope.put("editmode", true)}]]></xp:this.script>
</xp:executeScript>
</xp:actionGroup>
</xp:this.action>
</xp:eventHandler>
</xp:button>
<xp:button value="Сохранить" id="button1"
rendered="#{javascript:document1.isEditable()}"
styleClass="pull-right"
style="margin-top:-7px;margin-right:-12px;">
<xp:eventHandler event="onclick"
submit="true" refreshMode="complete">
<xp:this.action>
<xp:actionGroup>
<xp:actionGroup>
<xp:saveDocument
var="document1">
</xp:saveDocument>
<xp:changeDocumentMode
mode="readOnly" var="document1">
</xp:changeDocumentMode>
</xp:actionGroup>
<xp:executeScript>
<xp:this.script><![CDATA[#{javascript:viewScope.put("editmode", false)}]]></xp:this.script>
</xp:executeScript>
</xp:actionGroup>
</xp:this.action>
</xp:eventHandler>
</xp:button>
</xp:panel>
<xp:panel xp:key="panelBody">
<xc:ссFormGroup fg_id="fgTitle"
editmode="true" label_target="inputRichTextTitle">
<xc:this.label_text><![CDATA[#{javascript:'Заголовок вопроса [' + viewScope.qFNTitle + ']'}]]></xc:this.label_text>
<xp:this.facets>
<xp:inputRichText
id="inputRichTextTitle" xp:key="fieldFacet"
value="#{document1[viewScope.qFNTitle]}">
</xp:inputRichText>
</xp:this.facets>
</xc:ссFormGroup>
<xc:ссFormGroup fg_id="fgCountAnswers"
editmode="true" label_target="radioGroup1">
<xc:this.label_text><![CDATA[#{javascript:'Количество вариантов ответа [' + viewScope.qFNCount + ']'}]]></xc:this.label_text>
<xp:this.facets>
<xp:radioGroup id="radioGroup1"
xp:key="fieldFacet" defaultValue="4"
value="#{document1[viewScope.qFNCount]}">
<xp:selectItem itemLabel="1"></xp:selectItem>
<xp:selectItem itemLabel="2"></xp:selectItem>
<xp:selectItem itemLabel="3"></xp:selectItem>
<xp:selectItem itemLabel="4"></xp:selectItem>
<xp:selectItem itemLabel="5"></xp:selectItem>
<xp:eventHandler
event="onchange" submit="true" refreshMode="partial"
refreshId="container">
</xp:eventHandler>
</xp:radioGroup>
</xp:this.facets>
</xc:ссFormGroup>
<xc:ссFormGroup fg_id="fgA1" editmode="true"
label_target="inputRichTextA1">
<xc:this.label_text><![CDATA[#{javascript:'Ответ 1 [' + viewScope.qFNA1 + ']'}]]></xc:this.label_text>
<xp:this.facets>
<xp:inputRichText
id="inputRichTextA1" xp:key="fieldFacet"
value="#{document1[viewScope.qFNA1]}">
</xp:inputRichText>
</xp:this.facets>
</xc:ссFormGroup>
<xc:ссFormGroup fg_id="fgA2" editmode="true"
label_target="inputRichTextA2">
<xc:this.rendered><![CDATA[#{javascript:count = document1.getItemValueString(viewScope.qFNCount);
if (!count || count == '') {count = 4}
count > 1}]]></xc:this.rendered>
<xc:this.label_text><![CDATA[#{javascript:'Ответ 2 [' + viewScope.qFNA2 + ']'}]]></xc:this.label_text>
<xp:this.facets>
<xp:inputRichText
id="inputRichTextA2" xp:key="fieldFacet"
value="#{document1[viewScope.qFNA2]}">
</xp:inputRichText>
</xp:this.facets>
</xc:ссFormGroup>
<xc:ссFormGroup fg_id="fgA3" editmode="true"
label_target="inputRichTextA3">
<xc:this.rendered><![CDATA[#{javascript:count = document1.getItemValueString(viewScope.qFNCount);
if (!count || count == '') {count = 4}
count > 2}]]></xc:this.rendered>
<xc:this.label_text><![CDATA[#{javascript:'Ответ 3 [' + viewScope.qFNA3 + ']'}]]></xc:this.label_text>
<xp:this.facets>
<xp:inputRichText
id="inputRichTextA3" xp:key="fieldFacet"
value="#{document1[viewScope.qFNA3]}">
</xp:inputRichText>
</xp:this.facets>
</xc:ссFormGroup>
<xc:ссFormGroup fg_id="fgA4" editmode="true"
label_target="inputRichTextA4">
<xc:this.rendered><![CDATA[#{javascript:count = document1.getItemValueString(viewScope.qFNCount);
if (!count || count == '') {count = 4}
count > 3}]]></xc:this.rendered>
<xc:this.label_text><![CDATA[#{javascript:'Ответ 4 [' + viewScope.qFNA4 + ']'}]]></xc:this.label_text>
<xp:this.facets>
<xp:inputRichText
id="inputRichTextA4" xp:key="fieldFacet"
value="#{document1[viewScope.qFNA4]}">
</xp:inputRichText>
</xp:this.facets>
</xc:ссFormGroup>
<xc:ссFormGroup fg_id="fgA5" editmode="true"
label_target="inputRichTextA5">
<xc:this.rendered><![CDATA[#{javascript:count = document1.getItemValueString(viewScope.qFNCount);
if (!count || count == '') {count = 4}
count > 4}]]></xc:this.rendered>
<xc:this.label_text><![CDATA[#{javascript:'Ответ 5 [' + viewScope.qFNA5 + ']'}]]></xc:this.label_text>
<xp:this.facets>
<xp:inputRichText
id="inputRichTextA5" xp:key="fieldFacet"
value="#{document1[viewScope.qFNA5]}">
</xp:inputRichText>
</xp:this.facets>
</xc:ссFormGroup>
<xc:ссFormGroup fg_id="fg1" editmode="true"
label_target="radioGroupCorrect">
<xc:this.label_text><![CDATA[#{javascript:'Верный ответ [' + viewScope.qFNCorrect + ']'}]]></xc:this.label_text>
<xp:this.facets>
<xp:radioGroup
id="radioGroupCorrect" xp:key="fieldFacet"
value="#{document1[viewScope.qFNCorrect]}">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:var count = document1.getItemValueString(viewScope.qFNCount);
if (!count || count == '') {count = 4}
count++;
rangeStr(1,count)}]]></xp:this.value>
</xp:selectItems>
</xp:radioGroup>
</xp:this.facets>
</xc:ссFormGroup>
</xp:panel>
</xp:this.facets>
</xc:ccSectionPanel>
</xp:panel>
</xp:panel>
</xp:panel></xp:view>
The simplest and most brutal solution is to create 50*7 static fields with dynamic render state. Is there any other way?

Answer 1

An alternative and probably better approach then is to create questions in separate documents. Then you don't have to dynamically bind to a field. It's one I've used on at least two similar occasions.
The driver for using fields in one document is often habit. Traditional Domino web or Notes Client typically required everything to be in the same document. XPages doesn't. Break the habit and you remove the problem.
One change that will be required is to create and save the quiz before adding questions. There are a variety of reasons why this is actually a better approach, for a web app and a quiz with a number of questions.